create-react-app
create-react-app copied to clipboard
facebook
TypeError: dependency.getCondition is not a function
Describe the bug
Cannot build the application on the latest version (5.0.0)
Did you try recovering your dependencies?
Yes.
Which terms did you search for in User Guide?
N/A
Environment
Environment Info:
current version of create-react-app: 5.0.0
running from /home/.nvm/versions/node/v16.5.0/lib/node_modules/create-react-app
System:
OS: macOS 12.1
CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
Binaries:
Node: 16.5.0 - ~/.nvm/versions/node/v16.5.0/bin/node
Yarn: Not Found
npm: 7.19.1 - ~/.nvm/versions/node/v16.5.0/bin/npm
Browsers:
Chrome: 96.0.4664.110
Edge: Not Found
Firefox: Not Found
Safari: 15.2
npmPackages:
react: ^16.13.1 => 16.14.0
react-dom: ^16.13.1 => 16.14.0
react-scripts: 5.0.0 => 5.0.0
npmGlobalPackages:
create-react-app: 5.0.0
Steps to reproduce
- react-scripts start
Expected behavior
Should build the application with success.
Actual behavior
Creating an optimized production build...
(node:40391) [DEP_WEBPACK_COMPILATION_NORMAL_MODULE_LOADER_HOOK] DeprecationWarning: Compilation.hooks.normalModuleLoader was moved to NormalModule.getCompilationHooks(compilation).loader
(Use `node --trace-deprecation ...` to show where the warning was created)
<path>/node_modules/react-scripts/scripts/build.js:19
throw err;
^
TypeError: dependency.getCondition is not a function
at ModuleGraph.setResolvedModule (<path>/node_modules/react-scripts/node_modules/webpack/lib/ModuleGraph.js:196:15)
at <path>/node_modules/react-scripts/node_modules/webpack/lib/Compilation.js:1845:20
at <path>/node_modules/react-scripts/node_modules/webpack/lib/util/AsyncQueue.js:352:5
at Hook.eval [as callAsync] (eval at create (<path>/node_modules/react-scripts/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (<path>/node_modules/react-scripts/node_modules/tapable/lib/Hook.js:18:14)
at AsyncQueue._handleResult (<path>/node_modules/react-scripts/node_modules/webpack/lib/util/AsyncQueue.js:322:21)
at <path>/node_modules/react-scripts/node_modules/webpack/lib/util/AsyncQueue.js:305:11
at <path>/node_modules/react-scripts/node_modules/webpack/lib/Compilation.js:1299:4
at <path>/node_modules/react-scripts/node_modules/webpack/lib/Cache.js:85:6
at <path>/node_modules/react-scripts/node_modules/webpack/lib/Cache.js:39:11
Just if it helps. If I remove my service-worker.ts file then everything works as expected. (No matter the content inside service-worker.ts)
I needed it since we are using it in our webapp. Will keep investigating.
For me I had to explicitly add webpack@5 as a dependency. Storybook default hardcodes Webpack v4 and CRA allows v4 to be used as a dependency so it got hoisted (I'm using a lerna monorepo).
https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#wrong-webpack-version
I think CRA should enforce Webpack 5+.
@dobrynin How did you manage to install webpack 5 successfully? Whenever I try to I get an error:
TypeError: The 'compilation' argument must be an instance of Compilation
It seems like it is because now I have two webpack versions installed, probably 4 and 5, so I'm not overriding it. How did you deal with that?
@marduzca unfortunately I did not run into that issue so I don't have any insight. For me the issue was solved after explicitly listing webpack v5 in my package.json.
In my case it was necessary to specify the service-worker file extension
In case anyone is as clueless as I was until now, this might help you:
The problem is indeed that the storybook webpack version 4 differs from the default webpack 5 version from CRA 5.
There are a few different ways to fix this depending on your previous configuration, but one way to make it very painless is to use the storybook upgrade script that will notice the problem and will do the necessary fixes for you.
You only need to run:
npx sb@latest upgrade
Hope it helps someone!
@marduzca I tried your suggestion but still facing the same issue when running npm run start.
/react-scripts/scripts/start.js:19
throw err;
^
TypeError: The 'compilation' argument must be an instance of Compilation
at Function.getCompilationHooks (/Users/vijay.krishna/Documents/quantilope/survey-frontend/node_modules/webpack/lib/NormalModule.js:227:10)
at /Users/vijay.krishna/Documents/quantilope/survey-frontend/node_modules/webpack-manifest-plugin/dist/index.js:58:42
at _next40 (eval at create (/Users/vijay.krishna/Documents/quantilope/survey-frontend/node_modules/react-scripts/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:50:1)
at _next18 (eval at create (/Users/vijay.krishna/Documents/quantilope/survey-frontend/node_modules/react-scripts/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:97:1)
at Hook.eval [as call] (eval at create (/Users/vijay.krishna/Documents/quantilope/survey-frontend/node_modules/react-scripts/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:137:1)
at Hook.CALL_DELEGATE [as _call] (/Users/vijay.krishna/Documents/quantilope/survey-frontend/node_modules/react-scripts/node_modules/tapable/lib/Hook.js:14:14)
at Compiler.newCompilation (/Users/vijay.krishna/Documents/quantilope/survey-frontend/node_modules/react-scripts/node_modules/webpack/lib/Compiler.js:1122:26)
at /Users/vijay.krishna/Documents/quantilope/survey-frontend/node_modules/react-scripts/node_modules/webpack/lib/Compiler.js:1166:29
at Hook.eval [as callAsync] (eval at create (/Users/vijay.krishna/Documents/quantilope/survey-frontend/node_modules/react-scripts/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/vijay.krishna/Documents/quantilope/survey-frontend/node_modules/react-scripts/node_modules/tapable/lib/Hook.js:18:14)
Is anyone facing this issue or has face this issue and resolved it somehow?
what solved the issue for me was updating the webpack-cli in my devDependencies so basically:
-"webpack-cli": "3.3.8"
+"webpack-cli": "4.10.0"
Hi i'm using Azure pipeline to build a react app. I had the same issue and i confirm that adding "webpack": "^5.78.0" to the devDependencies resolved the issue. thanks to @dobrynin
