webpack build freezes at 70% when I save a file in watch mode #13482

lalogrosz · 2020-12-18T17:11:36Z

Describe the bug
When I run npm run storybook it runs ok, but when I save a file, it stucks and I have to kill the process and re-run again

console output

webpack building...
70% building 2277/2591 modules 314 active ...e-loader/dist/index.js??ref--11!/var/www/sd/Service-Desk-Main/frontend/src/customer_portal/pages/HomePage/Categories/CardCategory.tsx✖ ｢wdm｣: ModuleBuildError: Module build failed (from ./node_modules/@storybook/source-loader/dist/index.js):
TypeError: string.toLowerCase is not a function
    at sanitize (/var/www/sd/Service-Desk-Main/frontend/node_modules/@storybook/csf/dist/index.js:27:17)
    at handleADD (/var/www/sd/Service-Desk-Main/frontend/node_modules/@storybook/source-loader/dist/abstract-syntax-tree/parse-helpers.js:173:15)
    at Controller.enter (/var/www/sd/Service-Desk-Main/frontend/node_modules/@storybook/source-loader/dist/abstract-syntax-tree/traverse-helpers.js:138:54)
    at Controller.__execute (/var/www/sd/Service-Desk-Main/frontend/node_modules/estraverse/estraverse.js:330:31)
    at Controller.traverse (/var/www/sd/Service-Desk-Main/frontend/node_modules/estraverse/estraverse.js:434:28)
    at Object.traverse (/var/www/sd/Service-Desk-Main/frontend/node_modules/estraverse/estraverse.js:646:27)
    at findAddsMap (/var/www/sd/Service-Desk-Main/frontend/node_modules/@storybook/source-loader/dist/abstract-syntax-tree/traverse-helpers.js:132:14)
    at generateAddsMap (/var/www/sd/Service-Desk-Main/frontend/node_modules/@storybook/source-loader/dist/abstract-syntax-tree/generate-helpers.js:203:43)
    at generateStoriesLocationsMap (/var/www/sd/Service-Desk-Main/frontend/node_modules/@storybook/source-loader/dist/abstract-syntax-tree/generate-helpers.js:207:22)
    at inject (/var/www/sd/Service-Desk-Main/frontend/node_modules/@storybook/source-loader/dist/abstract-syntax-tree/inject-decorator.js:65:66)
    at readAsObject (/var/www/sd/Service-Desk-Main/frontend/node_modules/@storybook/source-loader/dist/dependencies-lookup/readAsObject.js:26:48)
    at readStory (/var/www/sd/Service-Desk-Main/frontend/node_modules/@storybook/source-loader/dist/dependencies-lookup/readAsObject.js:42:10)
    at Object._callee$ (/var/www/sd/Service-Desk-Main/frontend/node_modules/@storybook/source-loader/dist/build.js:47:48)
    at tryCatch (/var/www/sd/Service-Desk-Main/frontend/node_modules/regenerator-runtime/runtime.js:63:40)
    at Generator.invoke [as _invoke] (/var/www/sd/Service-Desk-Main/frontend/node_modules/regenerator-runtime/runtime.js:293:22)
    at Generator.next (/var/www/sd/Service-Desk-Main/frontend/node_modules/regenerator-runtime/runtime.js:118:21)
    at runLoaders (/var/www/sd/Service-Desk-Main/frontend/node_modules/webpack/lib/NormalModule.js:316:20)
    at /var/www/sd/Service-Desk-Main/frontend/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /var/www/sd/Service-Desk-Main/frontend/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/var/www/sd/Service-Desk-Main/frontend/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object._callee$ (/var/www/sd/Service-Desk-Main/frontend/node_modules/@storybook/source-loader/dist/build.js:102:13)
    at tryCatch (/var/www/sd/Service-Desk-Main/frontend/node_modules/regenerator-runtime/runtime.js:63:40)
    at Generator.invoke [as _invoke] (/var/www/sd/Service-Desk-Main/frontend/node_modules/regenerator-runtime/runtime.js:293:22)
    at Generator.next (/var/www/sd/Service-Desk-Main/frontend/node_modules/regenerator-runtime/runtime.js:118:21)
    at asyncGeneratorStep (/var/www/sd/Service-Desk-Main/frontend/node_modules/@storybook/source-loader/dist/build.js:26:103)
    at _next (/var/www/sd/Service-Desk-Main/frontend/node_modules/@storybook/source-loader/dist/build.js:28:194)
    at /var/www/sd/Service-Desk-Main/frontend/node_modules/@storybook/source-loader/dist/build.js:28:364
    at new Promise (<anonymous>)
    at Object.<anonymous> (/var/www/sd/Service-Desk-Main/frontend/node_modules/@storybook/source-loader/dist/build.js:28:97)
    at Object.transform (/var/www/sd/Service-Desk-Main/frontend/node_modules/@storybook/source-loader/dist/build.js:31:21)
    at LOADER_EXECUTION (/var/www/sd/Service-Desk-Main/frontend/node_modules/loader-runner/lib/LoaderRunner.js:119:14)
    at runSyncOrAsync (/var/www/sd/Service-Desk-Main/frontend/node_modules/loader-runner/lib/LoaderRunner.js:120:4)
70% building 2591/2591 modules 0 active

package.json

{
  "name": "frontend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --config=webpack.config.js --env.development=true",
    "build": "webpack --config=webpack.config.js --env.production=true",
    "start": "webpack --watch --config=webpack.config.js --env.development=true",
    "storybook": "start-storybook -s ../public -p 4000"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.10.5",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/polyfill": "^7.10.4",
    "@babel/preset-env": "^7.10.4",
    "@babel/preset-react": "^7.10.4",
    "@babel/preset-typescript": "^7.10.4",
    "@storybook/addon-actions": "^6.1.11",
    "@storybook/addon-controls": "^6.1.11",
    "@storybook/addon-decorator": "^6.1.11",
    "@storybook/addon-docs": "^6.1.11",
    "@storybook/addon-info": "^5.3.21",
    "@storybook/addon-storysource": "^6.1.11",
    "@storybook/preset-typescript": "^3.0.0",
    "@storybook/react": "^6.1.11",
    "@types/jquery": "^3.5.0",
    "@types/lodash": "^4.14.158",
    "@types/material-ui": "^0.21.7",
    "@types/react": "^16.9.43",
    "@types/react-dom": "^16.9.5",
    "copy-webpack-plugin": "5.1.1",
    "css-loader": "^4.0.0",
    "fork-ts-checker-webpack-plugin": "^5.0.14",
    "react-docgen-typescript-loader": "^3.7.2",
    "style-loader": "^1.1.3",
    "ts-loader": "^8.0.2",
    "tsconfig-paths-webpack-plugin": "^3.3.0",
    "tslint": "^6.0.0",
    "tslint-config-airbnb": "^5.11.2",
    "tslint-react": "^5.0.0",
    "webpack": "^4.44.0",
    "webpack-async-chunk-names-plugin": "^0.1.1",
    "webpack-cli": "^3.3.12",
    "webpack-merge": "4.2.2"
  },
  "dependencies": {
    "@material-ui/core": "^4.11.0",
    "@sentry/browser": "^5.20.1",
    "arrow-keys-react": "1.0.6",
    "axios": "^0.19.2",
    "babel-loader": "^8.1.0",
    "babel-runtime": "^6.26.0",
    "browserlist": "^1.0.1",
    "classnames": "2.2.6",
    "css-element-queries": "^1.2.3",
    "easy-peasy": "^3.3.1",
    "es6-promise": "^4.2.8",
    "js-base64": "^2.6.4",
    "js-cookie": "^2.2.1",
    "moment": "^2.27.0",
    "moment-timezone": "^0.5.27",
    "node-sass": "^4.13.1",
    "postcss-flexbugs-fixes": "^4.2.1",
    "postcss-loader": "3.0.0",
    "prop-types": "^15.7.2",
    "qs": "^6.9.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-drag-listview": "^0.1.7",
    "react-infinite-scroller": "1.2.4",
    "react-measure": "2.3.0",
    "react-moment": "^0.9.7",
    "react-onclickoutside": "^6.9.0",
    "react-rating": "^2.0.4",
    "react-scrollbar": "0.5.6",
    "react-simple-dropdown": "3.2.3",
    "react-with-separator": "^1.2.0",
    "sass-loader": "^9.0.2",
    "typescript": "^3.9.7",
    "whatwg-fetch": "^3.2.0",
    "withinviewport": "^2.1.2"
  }
}

.storybook/main.js

const path = require("path");
const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");

module.exports = {
  stories: ["../src/**/*.stories.tsx"],
  webpackFinal: async (config) => {
    config.resolve.plugins = [
      new TsconfigPathsPlugin({
        configFile: path.resolve(__dirname, '../tsconfig.json'),
      }),
    ];
    config.module.rules.push({
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: {
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env", "@babel/preset-react"],
        },
      },
    });
    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      use: [
        {
          loader: require.resolve("ts-loader"),
        },
        {
          loader: require.resolve("react-docgen-typescript-loader"),
        },
      ],
    });
    config.module.rules.push({
      test: /\.scss$/,
      use: ["style-loader", "css-loader", "sass-loader"],
    });
    config.resolve.extensions.push(".ts", ".tsx", ".js", ".jsx");
    return config;
  },
  addons: [
    "@storybook/addon-actions",
    "@storybook/addon-storysource",
    "@storybook/addon-decorator",
    "@storybook/addon-docs",
    "@storybook/addon-controls",
  ],
};

System

Environment Info:

  System:
    OS: Linux 5.0 Ubuntu 19.04 (Disco Dingo)
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 10.16.3 - ~/.nvm/versions/node/v10.16.3/bin/node
    Yarn: 1.22.4 - ~/.nvm/versions/node/v10.16.3/bin/yarn
    npm: 6.14.6 - ~/.nvm/versions/node/v10.16.3/bin/npm
  Browsers:
    Chrome: 87.0.4280.88
    Firefox: 72.0.1
  npmPackages:
    @storybook/addon-actions: ^6.1.11 => 6.1.11 
    @storybook/addon-controls: ^6.1.11 => 6.1.11 
    @storybook/addon-decorator: ^6.1.11 => 6.1.11 
    @storybook/addon-docs: ^6.1.11 => 6.1.11 
    @storybook/addon-info: ^5.3.21 => 5.3.21 
    @storybook/addon-storysource: ^6.1.11 => 6.1.11 
    @storybook/preset-typescript: ^3.0.0 => 3.0.0 
    @storybook/react: ^6.1.11 => 6.1.11

Additional context
The problem is not only in my computer. All developers experiment the same behavior

The text was updated successfully, but these errors were encountered:

shilman · 2020-12-20T10:49:25Z

Can you try the following, in the following order, and let me know which step fixes it (if any):

removing addon-info & reinstalling. info is based on 5.x and could be causing problems.
removing addon-storysource & re-running.
removing addon-docs & re-running.

lalogrosz · 2020-12-21T01:46:37Z

Can you try the following, in the following order, and let me know which step fixes it (if any):
1. removing addon-info & reinstalling. info is based on 5.x and could be causing problems.

2. removing addon-storysource & re-running.

3. removing addon-docs & re-running.

Thanks! removing storysource and docs It works. But it needs a fix I guess. Storysource is not very important to me, but docs it does. Anyway, this is a big step to continue developing fast.

shilman · 2020-12-21T02:12:18Z

@lalogrosz so to clarify you needed to perform all three steps to get it working?

lalogrosz · 2020-12-21T02:18:07Z

@lalogrosz so to clarify you needed to perform all three steps to get it working?

That will be the best approach. I have more info about the bug.

Debugging source-loader/dist/abstract-syntax-tree/parse-helpers.js:174:15) I found this value in addArgs:

[{ 
    type: 'Literal',
    value: 1,
    raw: '1',
    range: [ 792, 793 ],
    loc: { start: [Object], end: [Object] } 
}, { 
    type: 'Literal',
    raw: '\'hours\'',
    value: 'hours',
    range: [ 795, 802 ],
    loc: { start: [Object], end: [Object] } } 
]

This is unusal, because these are params in a moment add function. The problem is the number value trying to call toLowerCase function in @storybook/csf/dist/index.js:L27. I tried to cast to string but I get the typescript error: TS1351: An identifier or keyword cannot immediately follow a numeric literal, obviously. I don't know how to make a fix to this because I don't understand the main problem.

kaidjohnson · 2021-01-04T18:46:36Z

In your .storybook/main.js, you're overriding the resolve.plugins entry completely:

    config.resolve.plugins = [
      new TsconfigPathsPlugin({
        configFile: path.resolve(__dirname, '../tsconfig.json'),
      }),
    ];

Try changing this override to be additive as you do with other overrides:

    config.resolve.plugins.push(new TsconfigPathsPlugin({
      configFile: path.resolve(__dirname, '../tsconfig.json'),
    }));

lalogrosz · 2021-01-18T14:58:17Z

@kaidjohnson That didn't resolve the issue. The error is still when import the docs plugin.
Thanks anyway

joycemwang · 2021-04-14T23:36:53Z

@lalogrosz did you manage to resolve the issue. i'm facing the same exact problem

lalogrosz · 2021-04-15T01:11:38Z

@lalogrosz did you manage to resolve the issue. i'm facing the same exact problem

No, just removing storysource and docs is working for me

BBlackwo · 2021-06-18T07:07:59Z

I had the same issue. As a workaround I had to replace all instances of moment.add() with something else.

For example instead of moment().add(1, 'years').year() I did moment().year() + 1.

kibaek-kimm · 2022-01-14T08:41:13Z

I had the same issue. As a workaround I had to replace all instances of moment.add() with something else.

For example instead of moment().add(1, 'years').year() I did moment().year() + 1.

@BBlackwo
Same as me. Below link work for me.
#12208 (comment)
This

Seems like a workaround is to assign the number to a variable ahead of time, e.g.:
const days = 10
dateString = moment().add(days, "days").format()

shilman added needs reproduction performance issue question / support labels Dec 20, 2020

ndelangen closed this as completed Jan 17, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

webpack build freezes at 70% when I save a file in watch mode #13482

webpack build freezes at 70% when I save a file in watch mode #13482

lalogrosz commented Dec 18, 2020 •

edited

Loading

shilman commented Dec 20, 2020

lalogrosz commented Dec 21, 2020

shilman commented Dec 21, 2020

lalogrosz commented Dec 21, 2020

kaidjohnson commented Jan 4, 2021

lalogrosz commented Jan 18, 2021

joycemwang commented Apr 14, 2021

lalogrosz commented Apr 15, 2021

BBlackwo commented Jun 18, 2021 •

edited

Loading

kibaek-kimm commented Jan 14, 2022 •

edited

Loading

webpack build freezes at 70% when I save a file in watch mode #13482

webpack build freezes at 70% when I save a file in watch mode #13482

Comments

lalogrosz commented Dec 18, 2020 • edited Loading

shilman commented Dec 20, 2020

lalogrosz commented Dec 21, 2020

shilman commented Dec 21, 2020

lalogrosz commented Dec 21, 2020

kaidjohnson commented Jan 4, 2021

lalogrosz commented Jan 18, 2021

joycemwang commented Apr 14, 2021

lalogrosz commented Apr 15, 2021

BBlackwo commented Jun 18, 2021 • edited Loading

kibaek-kimm commented Jan 14, 2022 • edited Loading

lalogrosz commented Dec 18, 2020 •

edited

Loading

BBlackwo commented Jun 18, 2021 •

edited

Loading

kibaek-kimm commented Jan 14, 2022 •

edited

Loading