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.

WebpackDevMiddleware TypeError

See original GitHub issue

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), <anonymous>:29:1) at eval (eval at create (C:*path*\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:47:1) at C:*path*\node_modules@storybook\core-server\node_modules\html-webpack-plugin\index.js:303:11 at runMicrotasks (<anonymous>) 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), <anonymous>:15:1) at eval (eval at create (C:*path*\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:31:1) at C:*path*\node_modules@storybook\core-server\node_modules\html-webpack-plugin\index.js:303:11 at runMicrotasks (<anonymous>) at processTicksAndRejections (internal/process/task_queues.js:93:5)**

System System: OS: Windows 10 10.0.19042 CPU: (4) x64 Intel® Core™ 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.

Issue Analytics

State:
Created 2 years ago
Reactions:1
Comments:13 (1 by maintainers)

Top GitHub Comments

1reaction

nflatley-zengenticommented, Sep 10, 2021

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

1reaction

newVincentFongcommented, Jun 8, 2021

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 😩

Top Results From Across the Web

webpack-dev-middleware - npm

A development middleware for webpack. Latest version: 6.0.1, last published: 25 days ago. Start using webpack-dev-middleware in your project ...

Cannot read property 'readFile' of undefined, No output files ...

webpack-dev-middleware uses memfs as its default outputFileSystem. WDM didn't expose the API so that you can NOT get the outputFileSystem from the instance ......

webpack/webpack - Gitter

the recent upgrade 3.7.1 of webpack-dev-middleware causes the following error. When I downgrade to 3.7.0 everything is fine: ✖ ｢wdm｣: TypeError: Cannot ...

Custom Webpack Config - Next.js

The webpack function is executed twice, once for the server and once for the client. This allows you to distinguish between client and...

Hot Module Replacement - webpack

tip. If you took the route of using webpack-dev-middleware instead of webpack-dev-server , please use the ...