Facing TypeError: Cannot read properties of undefined (reading 'tap')

[abhiseksubham]

Getting below error in my code when I install webpack5 :

TypeError: Cannot read properties of undefined (reading 'tap') at /Users/a0s0mwv/Documents/Work/Insights/ui-channel-perf/node_modules/@pmmmwh/react-refresh-webpack-plugin/lib/index.js:236:65 at SyncHook.eval [as call] (eval at create (/Users/a0s0mwv/Documents/Work/Insights/ui-channel-perf/node_modules/react-scripts/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:15:1) at SyncHook.lazyCompileHook (/Users/a0s0mwv/Documents/Work/Insights/ui-channel-perf/node_modules/react-scripts/node_modules/tapable/lib/Hook.js:154:20) at Compiler.newCompilation (/Users/a0s0mwv/Documents/Work/Insights/ui-channel-perf/node_modules/react-scripts/node_modules/webpack/lib/Compiler.js:631:26) at /Users/a0s0mwv/Documents/Work/Insights/ui-channel-perf/node_modules/react-scripts/node_modules/webpack/lib/Compiler.js:667:29 at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/a0s0mwv/Documents/Work/Insights/ui-channel-perf/node_modules/react-scripts/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1) at AsyncSeriesHook.lazyCompileHook (/Users/a0s0mwv/Documents/Work/Insights/ui-channel-perf/node_modules/react-scripts/node_modules/tapable/lib/Hook.js:154:20) at Compiler.compile (/Users/a0s0mwv/Documents/Work/Insights/ui-channel-perf/node_modules/react-scripts/node_modules/webpack/lib/Compiler.js:662:28) at /Users/a0s0mwv/Documents/Work/Insights/ui-channel-perf/node_modules/react-scripts/node_modules/webpack/lib/Watching.js:77:18 at _next0 (eval at create (/Users/a0s0mwv/Documents/Work/Insights/ui-channel-perf/node_modules/react-scripts/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:34:1)

Here is my package.json 👍

{ "name": "Sample_app", "version": "0.1.358", "dependencies": { "@amcharts/amcharts4": "^4.10.20", "@deck.gl/mesh-layers": "^8.6.8", "@emotion/react": "^11.7.1", "@material-ui/core": "^4.12.3", "@material-ui/icons": "^4.11.2", "@material-ui/lab": "^4.0.0-alpha.60", "@mui/icons-material": "^5.1.1", "@mui/material": "^5.1.1", "@mui/styled-engine-sc": "^5.1.0", "@mui/styles": "^5.1.1", "@reactour/tour": "^2.9.0", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.2.7", "@testing-library/user-event": "^12.1.10", "@wsp/map-gl": "^2.1.11", "@wsp/map-react": "^1.1.2", "axios": "^0.24.0", "classnames": "^2.3.1", "dayjs": "^1.10.7", "express": "^4.17.1", "ignore-styles": "^5.0.1", "jest-fetch-mock": "^3.0.3", "jsonwebtoken": "^8.5.1", "lodash": "^4.17.21", "lodash.debounce": "^4.0.8", "md5-file": "^5.0.0", "mui-datatables": "^4.0.0", "node": "^16.13.1", "react": "^17.0.2", "react-data-export": "^0.6.0", "react-dom": "^17.0.2", "react-redux": "^7.2.6", "react-router-dom": "5.2.0", "react-scripts": "4.0.3", "react-select": "^5.4.0", "redux": "^4.1.2", "redux-mock-store": "^1.5.4", "redux-saga": "^1.1.3", "styled-components": "^5.3.3", "web-vitals": "^1.0.1" }, "scripts": { "start:local": "react-app-rewired start", "start": "REACT_APP_ENV_HOST=$REACT_APP_ENV_HOST node --max-http-header-size 16384 build/server", "build": "REACT_APP_ENV_HOST=$REACT_APP_ENV_HOST react-app-rewired build && cp -R ./server/* ./build && npm run moveFiles", "test": "react-scripts test", "test:coverage": "react-scripts test --coverage --watchAll=false", "eject": "react-scripts eject", "moveFiles": "cd build && mkdir channelperformance && cp -r ./static ./channelperformance/static", "storybook": "start-storybook -p 6006 -s public", "build-storybook": "build-storybook -s public", "test:update": "react-scripts test -u" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ], "overrides": [ { "files": [ "**/*.stories.*" ], "rules": { "import/no-anonymous-default-export": "off" } } ] }, "jest": { "collectCoverageFrom": [ "src/**/*.{js,jsx}", "!/node_modules/", "!src/coverage/**", "!src/index.js", "!src/stories/**" ], "coveragePathIgnorePatterns": [ "/src/constants", "/src/routes", "/src/helper", "/src/reportWebVitals.js", "/src/components/Drilldown/DownloadMuiTable", "/src/components/Drilldown/ReactVirtualized", "/src/components/Drilldown/Common/ChannelBreakdown.js" ], "transformIgnorePatterns": [ "[/\\\\]node_modules[/\\\\](?!(@amcharts)\\/).+\\.js$" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "resolutions": { "babel-eslint": "^10.0.0" }, "devDependencies": { "@e2e-test-utils/ui-shield": "^3.0.3", "@e2e-test-utils/ui-shield-utilities": "^4.1.5-0", "@storybook/addon-actions": "^6.5.10", "@storybook/addon-essentials": "^6.5.10", "@storybook/addon-interactions": "^6.5.10", "@storybook/addon-links": "^6.5.10", "@storybook/builder-webpack4": "^6.5.10", "@storybook/manager-webpack4": "^6.5.10", "@storybook/node-logger": "^6.5.10", "@storybook/preset-create-react-app": "^3.2.0", "@storybook/react": "^6.5.10", "@storybook/testing-library": "^0.0.13", "@wojtekmaj/enzyme-adapter-react-17": "^0.6.6", "babel-jest-amcharts": "^0.0.2", "enzyme": "^3.11.0", "enzyme-to-json": "^3.4.4", "eslint": "^7.28.0", "prettier": "2.3.1", "react-app-rewired": "^2.2.1", "redux-devtools-extension": "^2.13.9" } }

[alexander-akait]

It means you have a plugin which used unknown hook, check your plugins on compatibility with webpack v5

[alexander-akait]

And please use github repo to report such problems, because it is unreadable

[platform-kit]

@alexander-akait

I am suddenly experiencing the "cannot read properties of undefined" error in my Nuxt project after years of no problems.

 FATAL  Cannot read properties of undefined (reading 'get')                                                                                                                                                                                                  17:56:44

  at /Users/user/htdocs/renderai-backup/node_modules/webpack/lib/DefinePlugin.js:354:38
  at SyncHook.eval [as call] (eval at create (node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:13:1)
  at SyncHook.lazyCompileHook (node_modules/tapable/lib/Hook.js:154:20)
  at Compiler.newCompilation (node_modules/webpack/lib/Compiler.js:631:26)
  at node_modules/webpack/lib/Compiler.js:667:29
  at AsyncSeriesHook.eval [as callAsync] (eval at create (node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
  at AsyncSeriesHook.lazyCompileHook (node_modules/tapable/lib/Hook.js:154:20)
  at Compiler.compile (node_modules/webpack/lib/Compiler.js:662:28)
  at node_modules/webpack/lib/Compiler.js:321:11
  at Compiler.readRecords (node_modules/webpack/lib/Compiler.js:529:11)
  at node_modules/webpack/lib/Compiler.js:318:10
  at AsyncSeriesHook.eval [as callAsync] (eval at create (node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
  at AsyncSeriesHook.lazyCompileHook (node_modules/tapable/lib/Hook.js:154:20)
  at node_modules/webpack/lib/Compiler.js:315:19
  at AsyncSeriesHook.eval [as callAsync] (eval at create (node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
  at AsyncSeriesHook.lazyCompileHook (node_modules/tapable/lib/Hook.js:154:20)

Any tips on how to debug this? Where to look? What to search my codebase for?

I have never touched webpack directly and have no idea how its internals work or what might be at play.

[alexander-akait]

@platform-kit Can you check what is Cannot read properties of undefined?

[platform-kit]

@alexander-akait This is happening in the context of a nuxt generate (nuxt v2) command. This is all the context that is provided. No reference to any lines from my own code.

[alexander-akait]

Sounds like bug on the nuxt side, can you run npm ls webpack?