Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:10 (3 by maintainers)

Top GitHub Comments

1reaction

kibaek-kimmcommented, Jan 14, 2022

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. https://github.com/storybookjs/storybook/issues/12208#issuecomment-697044557 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()

1reaction

lalogroszcommented, Dec 21, 2020

@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.

Top Results From Across the Web

Storybook webpack build freezes at 70% when I save a file in ...

Storybook webpack build freezes at 70% when I save a file in watch mode ... When I run npm run storybook it runs...

Build Performance - webpack

This guide contains some useful tips for improving build/compilation performance. ... The built-in watch mode will keep track of timestamps and passes this ......

Webpack fails to watch and compile files (solved) - sage

Webpack fails to watch and compile files (solved) · Remove your node_modules folder (create a backup first!) and run npm install . ·...

This will make you more efficient at debugging Webpack ...

the file toinspect.txt is not only used in the plugin but is also required by a bunch of JS files in the bundle....

Node.js v19.3.0 Documentation

Building ; Linking to libraries included with Node.js ... Save the file, go back to the terminal window, and enter the following command:...