webpack fails on npm run start

[kmclaugh]

When following the instructions here

I get the following error when trying to run locally (npm run start).

const components = getBuildableComponents();
                   ^

TypeError: getBuildableComponents is not a function
    at Object.<anonymous> (/Users/kevinmclaughlin/projects/ds-community-connector-tutorial2/barchart/webpack.config.js:7:20)
    at Module._compile (internal/modules/cjs/loader.js:955:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
    at Module.load (internal/modules/cjs/loader.js:811:32)
    at Function.Module._load (internal/modules/cjs/loader.js:723:14)
    at Module.require (internal/modules/cjs/loader.js:848:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at WEBPACK_OPTIONS (/Users/kevinmclaughlin/projects/ds-community-connector-tutorial2/barchart/node_modules/webpack-cli/bin/utils/convert-argv.js:114:13)
    at requireConfig (/Users/kevinmclaughlin/projects/ds-community-connector-tutorial2/barchart/node_modules/webpack-cli/bin/utils/convert-argv.js:116:6)
    at /Users/kevinmclaughlin/projects/ds-community-connector-tutorial2/barchart/node_modules/webpack-cli/bin/utils/convert-argv.js:123:17
    at Array.forEach (<anonymous>)
    at module.exports (/Users/kevinmclaughlin/projects/ds-community-connector-tutorial2/barchart/node_modules/webpack-cli/bin/utils/convert-argv.js:121:15)
    at Object.<anonymous> (/Users/kevinmclaughlin/projects/ds-community-connector-tutorial2/barchart/node_modules/webpack-dev-server/bin/webpack-dev-server.js:84:40)
    at Module._compile (internal/modules/cjs/loader.js:955:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
    at Module.load (internal/modules/cjs/loader.js:811:32)
Command failed: webpack-dev-server --open

[mattkizaric-leveragelab]

I had the same issue earlier this week. It seems like there was something wrong with the distribution package. I was able to fix this by cloning this library to a different location, going into the packages/dscc-scripts directory and running the build command. You can then point all of the scripts from the package.json dscc-gen made to the packages/dscc-scripts/index.js file. Bit of a hack, but good for the quick fix.

[kmclaugh]

Thanks for the heads up. I ended up doing what you described and then copying the new util.js file generated by your suggested clone over the node_modeules/@google/dscc-scripts/build/viz/util.js file generated by the installation in the tutorial.

Anyway, the fix seems to be to update the `viz/util.js' file with the below code.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getComponentIndex = exports.getBuildableComponents = exports.validateConfigFile = exports.validateManifestFile = exports.validateBuildValues = void 0;
/**
 * @license
 * Copyright 2018 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
const validate = require("@google/dscc-validation");
const fs_1 = require("fs");
const args_1 = require("../args");
const util_1 = require("../util");
exports.validateBuildValues = (args) => {
    const components = exports.getBuildableComponents();
    const devBucket = process.env.npm_package_dsccViz_gcsDevBucket;
    if (devBucket === undefined) {
        throw util_1.invalidVizConfig('gcsDevBucket');
    }
    const prodBucket = process.env.npm_package_dsccViz_gcsProdBucket;
    if (prodBucket === undefined) {
        throw util_1.invalidVizConfig('gcsProdBucket');
    }
    const devMode = args.deployment === args_1.DeploymentChoices.PROD ? false : true;
    const gcsBucket = devMode ? devBucket : prodBucket;
    const manifestFile = 'manifest.json';
    const pwd = process.cwd();
    return {
        components,
        devBucket,
        prodBucket,
        manifestFile,
        devMode,
        pwd,
        gcsBucket,
    };
};
const friendifyError = (error) => `The value at: ${error.dataPath} is invalid. ${error.message}.`;
const unique = (ts) => [...new Set(ts)];
const throwIfErrors = (errors, fileType) => {
    const friendlyErrors = errors.map(friendifyError);
    const uniqueErrors = unique(friendlyErrors);
    if (uniqueErrors.length !== 0) {
        throw new Error(`Invalid ${fileType}: \n${JSON.stringify(uniqueErrors)}`);
    }
};
exports.validateManifestFile = (path) => {
    const fileExists = fs_1.existsSync(path);
    if (!fileExists) {
        throw new Error(`The file: \n${path}\n was not found.`);
    }
    const fileContents = fs_1.readFileSync(path, 'utf8');
    let parsedJson;
    try {
        parsedJson = JSON.parse(fileContents);
    }
    catch (e) {
        throw new Error(`The file:\n ${path}\n could not be parsed as JSON. `);
    }
    throwIfErrors(validate.validateManifest(parsedJson), 'manifest');
    return parsedJson;
};
exports.validateConfigFile = (path) => {
    const fileExists = fs_1.existsSync(path);
    if (!fileExists) {
        throw new Error(`The file: \n${path}\n was not found.`);
    }
    const fileContents = fs_1.readFileSync(path, 'utf8');
    let parsedJson;
    try {
        parsedJson = JSON.parse(fileContents);
    }
    catch (e) {
        throw new Error(`The file:\n ${path}\n could not be parsed as JSON. `);
    }
    throwIfErrors(validate.validateConfig(parsedJson), 'config');
    return true;
};
exports.getBuildableComponents = () => {
    const components = [];
    const lastComponentIdx = Object.keys(process.env)
        .filter((key) => key.startsWith('npm_package_dsccViz_components_'))
        .map((s) => s.replace('npm_package_dsccViz_components_', ''))
        .map((a) => parseInt(a, 10))
        .reduce((a, b) => (a > b ? a : b), 0);
    // Check for vizpack configuration
    for (let idx = 0; idx <= lastComponentIdx; idx++) {
        const jsonFile = process.env[`npm_package_dsccViz_components_${idx}_jsonFile`];
        if (!jsonFile) {
            throw util_1.invalidVizConfig(`components[${idx}].jsonFile`);
        }
        const cssFile = process.env[`npm_package_dsccViz_components_${idx}_cssFile`];
        // Require either jsFile or tsFile
        const jsFile = process.env[`npm_package_dsccViz_components_${idx}_jsFile`];
        const tsFile = process.env[`npm_package_dsccViz_components_${idx}_tsFile`];
        if (jsFile === undefined && tsFile === undefined) {
            throw util_1.invalidVizConfig(`components[${idx}].jsFile`);
        }
        components.push({
            jsonFile,
            cssFile,
            jsFile,
            tsFile,
        });
    }
    return components;
};
exports.getComponentIndex = (args, manifestPath) => {
    if (args.componentName) {
        const componentName = args.componentName;
        const manifest = exports.validateManifestFile(manifestPath);
        const idx = manifest.components.findIndex((component) => component.name === componentName);
        if (idx === -1) {
            throw new Error(`${componentName} is not present in your manifest.json`);
        }
        return idx.toString();
    }
    return '0';
};

[kmclaugh]

Link to breaking change commit

[niluparupasinghe]

By only updating the 'util.js' file I get this error.

modules@google\dscc-scripts\build\viz\util.js:100
throw util_1.invalidVizConfig(components[${idx}].jsonFile);
^

Error: Your package.json must have a dsccViz.components[0].jsonFile entry:
{
"dsccViz": {
"gcsDevBucket": "gs://validBucketPath",
"gcsProdBucket": "gs://validBucketPath",
"jsFile": "index.js",
"jsonFile": "index.json",
"cssFile": "index.css",
"print": "printMessage.js"
}
}
at invalidConfig (my_path\node_modules@google\dscc-scripts\build\util.js:48:12)
at Object.exports.invalidVizConfig (my_path\node_modules@google\dscc-scripts\build\util.js:54:12)
at exports.getBuildableComponents (my_path\node_modules@google\dscc-scripts\build\viz\util.js:100 : 26)
at Object. (my_path\webpack.config.js:7:20)
at Module._compile (node:internal/modules/cjs/loader:1102:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1131:10)
at Module.load (node:internal/modules/cjs/loader:967:32)
at Function.Module._load (node:internal/modules/cjs/loader:807:14)
at Module.require (node:internal/modules/cjs/loader:991:19)
at require (node:internal/modules/cjs/helpers:92:18)
at WEBPACK_OPTIONS (my_path\node_modules\webpack-cli\bin\utils\convert-argv.js:114:13)
at requireConfig (my_path\node_modules\webpack-cli\bin\utils\convert-argv.js:116:6)
at my_path\node_modules\webpack-cli\bin\utils\convert-argv.js:123:17
at Array.forEach ()
at module.exports (my_path\node_modules\webpack-cli\bin\utils\convert-argv.js:121:15)
at Object. (my_path\node_modules\webpack-dev-server\bin\webpack-dev-server.js:84:40)
Command failed: webpack-dev-server --open
npm ERR! code 1
npm ERR! path my_path
npm ERR! command failed
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c "dscc-scripts viz start"

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\nilup\AppData\Local\npm-cache_logs\2020-11-14T16_47_04_950Z-debug.log

[mattkizaric-leveragelab]

@nilupaadl
The way configuration files are written was changed. See here

[niluparupasinghe]

@nilupaadl
The way configuration files are written was changed. See here

@mattkizaric-leveragelab
Hi thanks for the direction, but does this mean that I have to do this manually for all the files? I mean what is the workaround to get "npm run start" to work? I'm bit new to the stuff.

[YannBrrd]

⬆️ on the thread. Is there a fix/workaround available?

[raddevon]

Thanks for the heads up. I ended up doing what you described and then copying the new util.js file generated by your suggested clone over the node_modeules/@google/dscc-scripts/build/viz/util.js file generated by the installation in the tutorial.

Anyway, the fix seems to be to update the `viz/util.js' file with the below code.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getComponentIndex = exports.getBuildableComponents = exports.validateConfigFile = exports.validateManifestFile = exports.validateBuildValues = void 0;
/**
 * @license
 * Copyright 2018 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
const validate = require("@google/dscc-validation");
const fs_1 = require("fs");
const args_1 = require("../args");
const util_1 = require("../util");
exports.validateBuildValues = (args) => {
    const components = exports.getBuildableComponents();
    const devBucket = process.env.npm_package_dsccViz_gcsDevBucket;
    if (devBucket === undefined) {
        throw util_1.invalidVizConfig('gcsDevBucket');
    }
    const prodBucket = process.env.npm_package_dsccViz_gcsProdBucket;
    if (prodBucket === undefined) {
        throw util_1.invalidVizConfig('gcsProdBucket');
    }
    const devMode = args.deployment === args_1.DeploymentChoices.PROD ? false : true;
    const gcsBucket = devMode ? devBucket : prodBucket;
    const manifestFile = 'manifest.json';
    const pwd = process.cwd();
    return {
        components,
        devBucket,
        prodBucket,
        manifestFile,
        devMode,
        pwd,
        gcsBucket,
    };
};
const friendifyError = (error) => `The value at: ${error.dataPath} is invalid. ${error.message}.`;
const unique = (ts) => [...new Set(ts)];
const throwIfErrors = (errors, fileType) => {
    const friendlyErrors = errors.map(friendifyError);
    const uniqueErrors = unique(friendlyErrors);
    if (uniqueErrors.length !== 0) {
        throw new Error(`Invalid ${fileType}: \n${JSON.stringify(uniqueErrors)}`);
    }
};
exports.validateManifestFile = (path) => {
    const fileExists = fs_1.existsSync(path);
    if (!fileExists) {
        throw new Error(`The file: \n${path}\n was not found.`);
    }
    const fileContents = fs_1.readFileSync(path, 'utf8');
    let parsedJson;
    try {
        parsedJson = JSON.parse(fileContents);
    }
    catch (e) {
        throw new Error(`The file:\n ${path}\n could not be parsed as JSON. `);
    }
    throwIfErrors(validate.validateManifest(parsedJson), 'manifest');
    return parsedJson;
};
exports.validateConfigFile = (path) => {
    const fileExists = fs_1.existsSync(path);
    if (!fileExists) {
        throw new Error(`The file: \n${path}\n was not found.`);
    }
    const fileContents = fs_1.readFileSync(path, 'utf8');
    let parsedJson;
    try {
        parsedJson = JSON.parse(fileContents);
    }
    catch (e) {
        throw new Error(`The file:\n ${path}\n could not be parsed as JSON. `);
    }
    throwIfErrors(validate.validateConfig(parsedJson), 'config');
    return true;
};
exports.getBuildableComponents = () => {
    const components = [];
    const lastComponentIdx = Object.keys(process.env)
        .filter((key) => key.startsWith('npm_package_dsccViz_components_'))
        .map((s) => s.replace('npm_package_dsccViz_components_', ''))
        .map((a) => parseInt(a, 10))
        .reduce((a, b) => (a > b ? a : b), 0);
    // Check for vizpack configuration
    for (let idx = 0; idx <= lastComponentIdx; idx++) {
        const jsonFile = process.env[`npm_package_dsccViz_components_${idx}_jsonFile`];
        if (!jsonFile) {
            throw util_1.invalidVizConfig(`components[${idx}].jsonFile`);
        }
        const cssFile = process.env[`npm_package_dsccViz_components_${idx}_cssFile`];
        // Require either jsFile or tsFile
        const jsFile = process.env[`npm_package_dsccViz_components_${idx}_jsFile`];
        const tsFile = process.env[`npm_package_dsccViz_components_${idx}_tsFile`];
        if (jsFile === undefined && tsFile === undefined) {
            throw util_1.invalidVizConfig(`components[${idx}].jsFile`);
        }
        components.push({
            jsonFile,
            cssFile,
            jsFile,
            tsFile,
        });
    }
    return components;
};
exports.getComponentIndex = (args, manifestPath) => {
    if (args.componentName) {
        const componentName = args.componentName;
        const manifest = exports.validateManifestFile(manifestPath);
        const idx = manifest.components.findIndex((component) => component.name === componentName);
        if (idx === -1) {
            throw new Error(`${componentName} is not present in your manifest.json`);
        }
        return idx.toString();
    }
    return '0';
};

I'm also having this issue. Copying this code to node_modeules/@google/dscc-scripts/build/viz/util.js worked for me to fix npm run start, but it broke update_message. I was getting The "path" argument must be of type string. Received type undefined whenever I ran npm run update_message.

I discovered the utils fix along with an apparently outdated package.json schema in the template were causing the new issue. By reverting node_modeules/@google/dscc-scripts/build/viz/util.js, I got a new error when running npm run update_message:

Your package.json must have a dsccViz.jsonFile entry:
{
  "dsccViz": {
    "gcsDevBucket": "gs://validBucketPath",
    "gcsProdBucket": "gs://validBucketPath",
    "jsFile": "index.js",
    "jsonFile": "index.json",
    "cssFile": "index.css",
    "print": "printMessage.js"
  }
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ update_message: `dscc-scripts viz update_message -f object`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ update_message script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

I found my package.json included a dsccViz key, but the missing jsonFile key was nested one level deeper in a components array containing a single object. Here's what that looked like:

{
  "dsccViz": {
    "gcsDevBucket": "gs://dm-pop-up-list-visualization/dev",
    "gcsProdBucket": "gs://dm-pop-up-list-visualization/prod",
    "components": [
      {
        "jsFile": "index.js",
        "jsonFile": "index.json",
        "cssFile": "index.css"
      }
    ]
  },
  "scripts": {
    "build:dev": "dscc-scripts viz build -d dev",
    "build:prod": "dscc-scripts viz build -d prod",
    "push:dev": "dscc-scripts viz push -d dev",
    "push:prod": "dscc-scripts viz push -d prod",
    "update_message": "dscc-scripts viz update_message -f object",
    "start": "dscc-scripts viz start"
  },
  "devDependencies": {
    "@google/dscc": "^0.3.17",
    "@google/dscc-scripts": "^1.0.17",
    "copy-webpack-plugin": "^4.6.0"
  }
}

I changed it to this instead:

{
  "dsccViz": {
    "gcsDevBucket": "gs://dm-pop-up-list-visualization/dev",
    "gcsProdBucket": "gs://dm-pop-up-list-visualization/prod",
    "jsFile": "index.js",
    "jsonFile": "index.json",
    "cssFile": "index.css"
  },
  "scripts": {
    "build:dev": "dscc-scripts viz build -d dev",
    "build:prod": "dscc-scripts viz build -d prod",
    "push:dev": "dscc-scripts viz push -d dev",
    "push:prod": "dscc-scripts viz push -d prod",
    "update_message": "dscc-scripts viz update_message -f object",
    "start": "dscc-scripts viz start"
  },
  "devDependencies": {
    "@google/dscc": "^0.3.17",
    "@google/dscc-scripts": "^1.0.17",
    "copy-webpack-plugin": "^4.6.0"
  }
}

and npm run update_message now works. This breaks npm run start again.

[t111]

Workaround: use dscc-gen@2.0.30

Since the issue was introduced with the latest release2.0.31, we can simply go back and use the previous version until they fix it.

# create a new project with the previous version of `dscc-gen`
npx @google/dscc-gen@2.0.30 viz

Then move your src/ folder to the new project manually.

[monishwhisper]

dscc-gen@2.0.30

Why not just use the version listed instead of also moving the files around? I got around by just using this version number suggested by @eonyang

[t111]

dscc-gen@2.0.30

Why not just use the version listed instead of also moving the files around? I got around by just using this version number suggested by @eonyang

You're right. I was worried about dependency conflicts but seems like yarn and npm are smart enough to resolve it nicely.

[danielovalle]

I used the dscc-gen@2.0.30
`➜ test2 npm run start

start
dscc-scripts viz start

node:internal/validators:129
throw new ERR_INVALID_ARG_TYPE(name, 'string', value);
^

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
at new NodeError (node:internal/errors:329:5)
at validateString (node:internal/validators:129:11)
at Object.join (node:path:1081:7)
at Object. (/Users/danielovalle/github/dovalle-viz/test2/webpack.config.js:6:26)
at Module._compile (node:internal/modules/cjs/loader:1108:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
at Module.load (node:internal/modules/cjs/loader:973:32)
at Function.Module._load (node:internal/modules/cjs/loader:813:14)
at Module.require (node:internal/modules/cjs/loader:997:19)
at require (node:internal/modules/cjs/helpers:92:18)
at WEBPACK_OPTIONS (/Users/danielovalle/github/dovalle-viz/test2/node_modules/webpack-cli/bin/utils/convert-argv.js:114:13)
at requireConfig (/Users/danielovalle/github/dovalle-viz/test2/node_modules/webpack-cli/bin/utils/convert-argv.js:116:6)
at /Users/danielovalle/github/dovalle-viz/test2/node_modules/webpack-cli/bin/utils/convert-argv.js:123:17
at Array.forEach ()
at module.exports (/Users/danielovalle/github/dovalle-viz/test2/node_modules/webpack-cli/bin/utils/convert-argv.js:121:15)
at Object. (/Users/danielovalle/github/dovalle-viz/test2/node_modules/webpack-dev-server/bin/webpack-dev-server.js:84:40) {
code: 'ERR_INVALID_ARG_TYPE'
}
Command failed: webpack-dev-server --open`

[taljuk01]

I tried all the ideas in this post and none worked. Did someone solve it?

[taljuk01]

I found a solution.
First of all install the latest version of npx:
npx @google/dscc-gen viz

Then if you go to node_modules/@google/dscc-scripts/build/viz/util.js, replace the code for this one here.

This will solve the first problem:
TypeError: getBuildableComponents is not a function

Now you will get this error:

Your package.json must have a dsccViz.jsonFile entry:
{
  "dsccViz": {
    "gcsDevBucket": "gs://validBucketPath",
    "gcsProdBucket": "gs://validBucketPath",
    "jsFile": "index.js",
    "jsonFile": "index.json",
    "cssFile": "index.css",
    "print": "printMessage.js"
  }
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ update_message: `dscc-scripts viz update_message -f object`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ update_message script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

To solve this error go to node_modules/@google/dscc-scripts/build/viz/util.js and replace this lines:

Line 97 to 115:

 // Check for vizpack configuration
    for (let idx = 0; idx <= lastComponentIdx; idx++) {
        const jsonFile = "index.json"//process.env[`npm_package_dsccViz_components_${idx}_jsonFile`];
        /*if (!jsonFile) {
            throw util_1.invalidVizConfig(`components[${idx}].jsonFile`);
        }*/
        const cssFile = "index.css"//process.env[`npm_package_dsccViz_components_${idx}_cssFile`];
        // Require either jsFile or tsFile
        const jsFile = "index.js"//process.env[`npm_package_dsccViz_components_${idx}_jsFile`];
        const tsFile = process.env[`npm_package_dsccViz_components_${idx}_tsFile`];
        if (jsFile === undefined && tsFile === undefined) {
            throw util_1.invalidVizConfig(`components[${idx}].jsFile`);
        }
        components.push({
            jsonFile,
            cssFile,
            jsFile,
            tsFile,
        });
    }

The problem was with process.env. It's not finding the virtual environment variable npm_package_dsccViz_components_${idx}_jsonFile