WebpackDevMiddleware TypeError

[hupato-vomatec]

Describe the bug After installing and starting storybook in my projet with npm run storybook I get the following error: C:*path*>npm run storybook

clientapplication@1.0.0 storybook C:*path* start-storybook -p 6006

info @storybook/react v6.2.9 info info => Loading presets info => Loading 1 config file in "C:*path.storybook" info => Loading 7 other files in "C:*path.storybook" info => Using prebuilt manager info => Adding stories defined in "C:*path*.storybook\main.js" info => Using implicit CSS loaders info => Using default Webpack4 setup (node:11908) DeprecationWarning: Default PostCSS plugins are deprecated. When switching to '@storybook/addon-postcss', you will need to add your own plugins, such as 'postcss-flexbugs-fixes' and 'autoprefixer'.

See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-default-postcss-plugins for details. (Use node --trace-deprecation ... to show where the warning was created) 10% building modules 6/10 modules 4 active …n.storybook\generated-stories-entry.jsi ｢wdm｣: wait until bundle finished: 95% emitting WebpackDevMiddleware× ｢wdm｣: TypeError: Cannot read property 'tapAsync' of undefined at C:*path\node_modules\@storybook\core-server\node_modules\webpack-dev-middleware\lib\fs.js:22:37 at _next0 (eval at create (C:*path\node_modules\tapable\lib\HookCodeFactory.js:33:10), :29:1) at eval (eval at create (C:*path\node_modules\tapable\lib\HookCodeFactory.js:33:10), :47:1) at C:*path\node_modules\@storybook\core-server\node_modules\html-webpack-plugin\index.js:303:11 at runMicrotasks () at processTicksAndRejections (internal/process/task_queues.js:93:5) × ｢wdm｣: TypeError: Cannot read property 'tapAsync' of undefined at C:*path\node_modules\@storybook\core-server\node_modules\webpack-dev-middleware\lib\fs.js:22:37 at _next0 (eval at create (C:*path\node_modules\tapable\lib\HookCodeFactory.js:33:10), :15:1) at eval (eval at create (C:*path\node_modules\tapable\lib\HookCodeFactory.js:33:10), :31:1) at C:*path\node_modules\@storybook\core-server\node_modules\html-webpack-plugin\index.js:303:11 at runMicrotasks () at processTicksAndRejections (internal/process/task_queues.js:93:5)

System System: OS: Windows 10 10.0.19042 CPU: (4) x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz Binaries: Node: 14.15.4 - C:\Program Files\nodejs\node.EXE npm: 6.14.10 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: 91.0.4472.77 Edge: Spartan (44.19041.964.0), Chromium (91.0.864.41) npmPackages: @storybook/addon-actions: ^6.2.9 => 6.2.9 @storybook/addon-essentials: ^6.2.9 => 6.2.9 @storybook/addon-links: ^6.2.9 => 6.2.9 @storybook/builder-webpack4: ^6.3.0-beta.14 => 6.3.0-beta.14 @storybook/core-server: ^6.2.9 => 6.2.9 @storybook/react: ^6.2.9 => 6.2.9

Additional context package.json:

"devDependencies": {
    "@babel/core": "^7.14.3",
    "@storybook/addon-actions": "^6.2.9",
    "@storybook/addon-essentials": "^6.2.9",
    "@storybook/addon-links": "^6.2.9",
    "@storybook/react": "^6.2.9",
    "@types/cordova": "0.0.34",
    "@types/enzyme": "^3.10.4",
    "@types/enzyme-adapter-react-16": "^1.0.5",
    "@types/jest": "^24.9.0",
    "@types/lodash": "^4.14.138",
    "@types/pouchdb": "^6.4.0",
    "@types/react": "^16.9.2",
    "@types/react-bootstrap-typeahead": "^3.4.7",
    "@types/react-dom": "^16.9.0",
    "@types/react-test-renderer": "^16.9.2",
    "@types/recharts": "^1.8.10",
    "@types/semver": "^7.1.0",
    "@types/uuid": "^8.3.0",
    "autobind-decorator": "^2.4.0",
    "babel-eslint": "^10.0.2",
    "babel-jest": "^24.9.0",
    "babel-loader": "^7.1.4",
    "babel-plugin-nameof-js": "0.0.2",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2017": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "clean-webpack-plugin": "^0.1.19",
    "colors": "^1.3.3",
    "copy-webpack-plugin": "^4.5.1",
    "css-loader": "^3.5.3",
    "dotenv-webpack": "^7.0.3",
    "enzyme": "^3.8.0",
    "enzyme-adapter-react-16": "^1.7.1",
    "eslint": "^5.5.0",
    "eslint-loader": "^2.1.0",
    "eslint-plugin-react": "^7.11.1",
    "file-loader": "^1.1.11",
    "fs-extra": "^8.1.0",
    "glob": "^7.1.2",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "husky": "^3.1.0",
    "i18n-validation": "git+http://bitbucket:7990/scm/rw/i18n-validation.git#master",
    "ifdef-loader": "^2.1.4",
    "jest": "^23.6.0",
    "jest-canvas-mock": "^2.1.0",
    "jest-enzyme": "^7.0.1",
    "jest-fetch-mock": "^2.1.2",
    "json-loader": "^0.5.7",
    "less": "^3.11.1",
    "less-loader": "^4.1.0",
    "mini-css-extract-plugin": "^0.9.0",
    "mock-xmlhttprequest": "^3.2.1",
    "moment-locales-webpack-plugin": "^1.0.7",
    "raw-loader": "^4.0.1",
    "react-test-renderer": "^16.7.0",
    "style-loader": "^1.2.1",
    "ts-auto-mock": "^2.7.0",
    "ts-jest": "^23.10.4",
    "ts-loader": "^6.0.4",
    "ts-nameof": "^3.2.0",
    "ts-transformer-keys": "git+https://github.com/wassy92x/ts-transformer-keys.git",
    "tslint": "^5.20.1",
    "tslint-consistent-codestyle": "^1.16.0",
    "tslint-eslint-rules": "^5.4.0",
    "tslint-react": "^4.1.0",
    "tslint-webpack-plugin": "^2.1.0",
    "ttypescript": "^1.5.10",
    "typescript": "^4.1.3",
    "uuid": "^8.3.0",
    "webpack": "4.8.3",
    "webpack-cli": "2.1.3",
    "webpack-dev-middleware": "^5.0.0",
    "webpack-dev-server": "3.1.4",
    "webpack-merge": "^4.1.2",
    "webpack-shell-plugin": "^0.5.0"
  },
  "dependencies": {
    "-": "0.0.1",
    "@storybook/builder-webpack4": "^6.3.0-beta.14",
    "@storybook/core-server": "^6.2.9",
    "D": "^1.0.0",
    "async-mutex": "^0.1.3",
    "baobab": "^2.5.2",
    "baobab-react": "^3.0.0",
    "body-scroll-lock": "^2.6.1",
    "datatables.net-dt": "^1.10.19",
    "eventemitter3": "^3.1.0",
    "faker": "^4.1.0",
    "imports-loader": "^0.8.0",
    "ipaddr.js": "^1.7.0",
    "jquery": "^3.3.1",
    "jquery-datatables-checkboxes": "^1.2.11",
    "jquery-touch-events": "^1.0.7",
    "leaflet": "^1.3.1",
    "leaflet.locatecontrol": "^0.62.0",
    "leaflet.markercluster": "^1.3.0",
    "lodash": "^4.17.10",
    "mapbox-gl": "^0.52.0-beta.1",
    "mapbox-gl-leaflet": "0.0.3",
    "mobx": "^5.13.0",
    "mobx-react": "^6.1.3",
    "mobx-utils": "^5.4.1",
    "moment": "^2.22.1",
    "pouchdb": "^7.0.0",
    "pouchdb-debug": "^7.1.1",
    "pouchdb-find": "^7.0.0",
    "prop-types": "^15.6.2",
    "react": "^16.8.0",
    "react-bootstrap-typeahead": "^4.2.3",
    "react-dom": "^16.5.2",
    "react-html5-camera-photo": "1.5.2",
    "react-leaflet": "^2.0.1",
    "recharts": "^1.8.5",
    "reflect-metadata": "^0.1.13",
    "resize-observer-polyfill": "^1.5.1",
    "rivets": "^0.9.6",
    "semver": "^7.1.3"
  }

.storybook main.js:

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ]
}

Can someone please help me solve this problem? Many thanks in advance.

[newVincentFong]

Got the exact same error right here 🙋‍♂️ Despite the fact that mine is a Vue project Seems to me a dependency problem Love to use storybook, but this webpack-toolchain nightmare is just killing me 😩

[foxxycodes]

I fixed those errors by removing all of the storybook-packages and did a npx sb init --force. If its still not working, remove the package-lock.json and your node-modules-folder. Re-install everything with npm i.

[hupato-vomatec]

I fixed those errors by removing all of the storybook-packages and did a npx sb init --force. If its still not working, remove the package-lock.json and your node-modules-folder. Re-install everything with npm i.

I tried it but still same error :/

[TangJian-Eddie]

same problem

[shilman]

Do any of you a have a reproduction repo you can share? If not, can you create one? See how to create a repro. We prioritize issues with reproductions over those without. Thank you! 🙏

[nflatley-zengenti]

I had this error today after upgrading SB using the npx sb upgrade command so we could use React 17

Updating my webpack@4 version fixed this issue for me, I was on 4.33.0 previously and just installed the latest v4

[sophyphreak]

I have this problem too. I'll see if I can replicate the error.

[sophyphreak]

I replicated the error in a repo, @shilman. To see the error, clone, run npm i, then run npm run storybook. You should then see the error. https://github.com/sophyphreak/react-boilerplate-storybook-tapAsync-error

[sophyphreak]

I fixed those errors by removing all of the storybook-packages and did a npx sb init --force. If its still not working, remove the package-lock.json and your node-modules-folder. Re-install everything with npm i.

Same as @hupato-vomatec. After doing this, I still get the same error.

[wangdaxiaoda]

I had this error today after upgrading SB using the npx sb upgrade command so we could use React 17

Updating my webpack@4 version fixed this issue for me, I was on 4.33.0 previously and just installed the latest v4

I upgrade my webpack to 4.46.0, then this error is fixed. thks

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[gustavo-cardoso-deal]

Same problem here... I tried @foxxycodes @sophyphreak

same problem

me too

[gustavo-cardoso-deal]

Anyone got a solution?

[TannerJuby1]

Still experiencing this same issue.