TypeError: dependency.getCondition is not a function

[vitorcamachoo]

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

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

[sortegam]

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.

[dobrynin]

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

[marduzca]

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

[dobrynin]

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

[Nonsmokers]

In my case it was necessary to specify the service-worker file extension

[marduzca]

@Nonsmokers where did you specify it exactly?

[marduzca]

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!

[Viijay-Kr]

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

[hoomanaskari]

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"

[akenios]

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