One CLI for webpack must be installed error on app build using create-react-app. #89

Satsh24 · 2020-04-01T16:45:33Z

Description

When I tried to Install ExifReader using npm install exifreader it kept asking me fop webpack CLI and eventually failed as said Yes to install.

How to reproduce

npm install exifreader

> exifreader@3.4.0 postinstall /Users/Workspace/test/node_modules/exifreader
> npm run build


> exifreader@3.4.0 build /Users/Workspace/test/node_modules/exifreader
> webpack

One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
 - webpack-cli (https://github.com/webpack/webpack-cli)
   The original webpack full-featured CLI.
We will use "npm" to install the CLI via "npm install -D".
Do you want to install 'webpack-cli' (yes/no): yes
Installing 'webpack-cli' (running 'npm install -D webpack-cli')...
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN webpack-cli@3.3.11 requires a peer of webpack@4.x.x but none is installed. You must install peer dependencies yourself.

+ webpack-cli@3.3.11
added 204 packages from 129 contributors in 25.605s

1 package is looking for funding
  run `npm fund` for details

Error: Cannot find module 'webpack-cli'
Require stack:
-/Users/Workspace/testnode_modules/webpack/bin/webpack.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:981:15)
    at Function.Module._load (internal/modules/cjs/loader.js:863:27)
    at Module.require (internal/modules/cjs/loader.js:1043:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at /Users/Workspace/test/node_modules/webpack/bin/webpack.js:143:5
    at processTicksAndRejections (internal/process/task_queues.js:97:5) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/Workspace/test/webpack/bin/webpack.js'
  ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! exifreader@3.4.0 build: `webpack`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the exifreader@3.4.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

As my project was built with Create-Reat-App, why do I need to install webpack again?? I never have seen this kind of issue with any other libraries. Am I missing anything here?

The text was updated successfully, but these errors were encountered:

mattiasw · 2020-04-01T17:28:47Z

I'm really sorry for this, I was too quick to push a new feature. I have now reverted that broken release so if you try again now with version 3.5.0 the install should work fine. I will make adjustments to make sure it doesn't happen again. Big thanks for reporting this!

Satsh24 · 2020-04-01T18:31:54Z

Thank you so much for the quick turn around ❤️. Will try to install it again now.

OliverJAsh · 2020-11-20T17:22:24Z

I'm also running into this on the latest version.

Reduced test case:

Clone https://github.com/OliverJAsh/exifreader-webpack-error
Run yarn

Note: it works the second time you run yarn.

$ yarn
yarn install v1.19.1
warning package.json: No license field
info No lockfile found.
warning No license field
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
error /Users/oliverash/Development/exifreader-webpack-error/node_modules/exifreader: Command failed.
Exit code: 1
Command: node bin/build.js --only-with-config
Arguments:
Directory: /Users/oliverash/Development/exifreader-webpack-error/node_modules/exifreader
Output:
Installing ExifReader custom build dependencies...

> fsevents@1.2.13 install /Users/oliverash/Development/exifreader-webpack-error/node_modules/exifreader/node_modules/watchpack-chokidar2/node_modules/fsevents
> node install.js

  SOLINK_MODULE(target) Release/.node
  CXX(target) Release/obj.target/fse/fsevents.o
  SOLINK_MODULE(target) Release/fse.node
+ webpack@4.44.2
+ cross-env@5.2.1
+ babel-loader@8.2.1
+ @babel/preset-env@7.12.1
+ @babel/register@7.12.1
+ webpack-cli@3.3.12
+ string-replace-loader@2.3.0
+ @babel/core@7.12.3
added 546 packages from 268 contributors and audited 546 packages in 16.176s
found 0 vulnerabilities

Done.
/Users/oliverash/Development/exifreader-webpack-error/node_modules/exifreader/node_modules/webpack-cli/bin/cli.js:93
				throw err;
				^

Error: Cannot find module 'terser-webpack-plugin'
Require stack:
- /Users/oliverash/Development/exifreader-webpack-error/node_modules/exifreader/webpack.config.js
- /Users/oliverash/Development/exifreader-webpack-error/node_modules/exifreader/node_modules/webpack-cli/bin/utils/convert-argv.js
- /Users/oliverash/Development/exifreader-webpack-error/node_modules/exifreader/node_modules/webpack-cli/bin/cli.js
- /Users/oliverash/Development/exifreader-webpack-error/node_modules/exifreader/node_modules/webpack/bin/webpack.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:713:15)
    at Function.Module._load (internal/modules/cjs/loader.js:618:27)
    at Module.require (internal/modules/cjs/loader.js:771:19)
    at require (/Users/oliverash/Development/exifreader-webpack-error/node_modules/exifreader/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (/Users/oliverash/Development/exifreader-webpack-error/node_modules/exifreader/webpack.config.js:8:22)
    at Module._compile (/Users/oliverash/Development/exifreader-webpack-error/node_modules/exifreader/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:879:10)
    at Module.load (internal/modules/cjs/loader.js:731:32)
    at Function.Module._load (internal/modules/cjs/loader.js:644:12)
    at Module.require (internal/modules/cjs/loader.js:771:19)
    at require (/Users/oliverash/Development/exifreader-webpack-error/node_modules/exifreader/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at WEBPACK_OPTIONS (/Users/oliverash/Development/exifreader-webpack-error/node_modules/exifreader/node_modules/webpack-cli/bin/utils/convert-argv.js:114:13)
    at requireConfig (/Users/oliverash/Development/exifreader-webpack-error/node_modules/exifreader/node_modules/webpack-cli/bin/utils/convert-argv.js:116:6)
    at /Users/oliverash/Development/exifreader-webpack-error/node_modules/exifreader/node_modules/webpack-cli/bin/utils/convert-argv.js:123:17
    at Array.forEach (<anonymous>)
    at module.exports (/Users/oliverash/Development/exifreader-webpack-error/node_modules/exifreader/node_modules/webpack-cli/bin/utils/convert-argv.js:121:15)
    at /Users/oliverash/Development/exifreader-webpack-error/node_modules/exifreader/node_modules/webpack-cli/bin/cli.js:71:45
    at Object.parse (/Users/oliverash/Development/exifreader-webpack-error/node_modules/exifreader/node_modules/yargs/yargs.js:576:18)
    at /Users/oliverash/Development/exifreader-webpack-error/node_modules/exifreader/node_modules/webpack-cli/bin/cli.js:49:8
    at Object.<anonymous> (/Users/oliverash/Development/exifreader-webpack-error/node_modules/exifreader/node_modules/webpack-cli/bin/cli.js:366:3)
    at Module._compile (internal/modules/cjs/loader.js:868:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:879:10)
    at Module.load (internal/modules/cjs/loader.js:731:32)
    at Function.Module._load (internal/modules/cjs/loader.js:644:12)
    at Module.require (internal/modules/cjs/loader.js:771:19)
    at require (internal/modules/cjs/helpers.js:68:18)
    at Object.<anonymous> (/Users/oliverash/Development/exifreader-webpack-error/node_modules/exifreader/node_modules/webpack/bin/webpack.js:156:2)
    at Module._compile (internal/modules/cjs/loader.js:868:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:879:10)
    at Module.load (internal/modules/cjs/loader.js:731:32) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/oliverash/Development/exifreader-webpack-error/node_modules/exifreader/webpack.config.js',
    '/Users/oliverash/Development/exifreader-webpack-error/node_modules/exifreader/node_modules/webpack-cli/bin/utils/convert-argv.js',
    '/Users/oliverash/Development/exifreader-webpack-error/node_modules/exifreader/node_modules/webpack-cli/bin/cli.js',
    '/Users/oliverash/Development/exifreader-webpack-error/node_modules/exifreader/node_modules/webpack/bin/webpack.js'
  ]
}
child_process.js:660
    throw err;
    ^

Error: Command failed: webpack
    at checkExecSyncError (child_process.js:621:11)
    at execSync (child_process.js:657:15)
    at Object.<anonymous> (/Users/oliverash/Development/exifreader-webpack-error/node_modules/exifreader/bin/build.js:12:5)
    at Module._compile (internal/modules/cjs/loader.js:868:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:879:10)
    at Module.load (internal/modules/cjs/loader.js:731:32)
    at Function.Module._load (internal/modules/cjs/loader.js:644:12)
    at Function.Module.runMain (internal/modules/cjs/loader.js:931:10)
    at internal/main/run_main_module.js:17:11 {
  status: 1,
  signal: null,
  output: [ null, null, null ],
  pid: 60503,
  stdout: null,
  stderr: null
}
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

mattiasw · 2020-11-20T23:00:40Z

The CI tests should catch this but apparently they don't. :-( I have a solution for the error but haven't managed yet to adjust the CI build to fail when this happens. Will continue looking tomorrow!

GitHub Actions does not by default fail builds in PowerShell when a command fails. Another bug was that the custom build has to run in its own directory that is not a sub directory of ExifReader for it to expose all errors. Then fix the error that appears: a missing dependency for terser-webpack-plugin. #89

mattiasw · 2020-11-21T10:31:06Z

This should be fixed in 3.12.4. Fun fact: PowerShell GitHub Actions do not fail the build by default.

OliverJAsh · 2020-11-21T10:45:42Z

After upgrading I can't reproduce this problem locally anymore (on Mac), but unfortunately I am still running into problems in my Travis build. Do you have any ideas why that might be?

The error here is slightly different:

$ yarn install --production=false
yarn install v1.10.1
[1/5] Validating package.json...
[2/5] Resolving packages...
[3/5] Fetching packages...
info fsevents@2.1.3: The platform "linux" is incompatible with this module.
info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.9: The platform "linux" is incompatible with this module.
info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
[4/5] Linking dependencies...
warning " > io-ts-types@0.5.7" has unmet peer dependency "newtype-ts@^0.3.2".
warning " > @pmmmwh/react-refresh-webpack-plugin@0.4.1" has unmet peer dependency "sockjs-client@^1.4.0".
warning " > @pmmmwh/react-refresh-webpack-plugin@0.4.1" has unmet peer dependency "type-fest@^0.13.1".
warning " > @pmmmwh/react-refresh-webpack-plugin@0.4.1" has unmet peer dependency "webpack-hot-middleware@2.x".
warning " > @pmmmwh/react-refresh-webpack-plugin@0.4.1" has unmet peer dependency "webpack-plugin-serve@0.x || 1.x".
warning " > eslint-plugin-import@2.19.1" has incorrect peer dependency "eslint@2.x - 6.x".
warning "pm2 > @pm2/agent > ws@7.2.5" has unmet peer dependency "bufferutil@^4.0.1".
warning "pm2 > @pm2/agent > ws@7.2.5" has unmet peer dependency "utf-8-validate@^5.0.2".
warning "pm2 > @pm2/js-api > ws@7.3.0" has unmet peer dependency "bufferutil@^4.0.1".
warning "pm2 > @pm2/js-api > ws@7.3.0" has unmet peer dependency "utf-8-validate@^5.0.2".
warning " > react-mapbox-gl@4.8.2" has incorrect peer dependency "mapbox-gl@^1.6.0".
warning " > react-mapbox-gl@4.8.2" has unmet peer dependency "prop-types@^15.6.2".
warning " > schema-dts@0.6.0" has incorrect peer dependency "typescript@^3.4.0".
warning " > cypress-file-upload@3.5.3" has incorrect peer dependency "cypress@^3.0.0".
warning " > eslint-plugin-jsx-a11y@6.2.3" has incorrect peer dependency "eslint@^3 || ^4 || ^5 || ^6".
warning " > eslint-plugin-react@7.16.0" has incorrect peer dependency "eslint@^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0".
warning " > eslint-plugin-react-hooks@1.6.0" has incorrect peer dependency "eslint@^3.0.0 || ^4.0.0 || ^5.0.0".
warning " > shrink-ray-current@4.1.2" has unmet peer dependency "iltorb@^2.0.0".
warning " > shrink-ray-current@4.1.2" has unmet peer dependency "node-zopfli-es@^1.0.3".
[5/5] Building fresh packages...
error /home/travis/build/unsplash/unsplash-web/node_modules/exifreader: Command failed.
Exit code: 1
Command: node bin/build.js --only-with-config
Arguments: 
Directory: /home/travis/build/unsplash/unsplash-web/node_modules/exifreader
Output:
Installing ExifReader custom build dependencies...
audited 569 packages in 21.2s
found 0 vulnerabilities
Done.
/bin/sh: 1: webpack: not found
child_process.js:660
    throw err;
    ^
Error: Command failed: webpack
    at checkExecSyncError (child_process.js:621:11)
    at execSync (child_process.js:657:15)
    at Object.<anonymous> (/home/travis/build/unsplash/unsplash-web/node_modules/exifreader/bin/build.js:12:5)
    at Module._compile (internal/modules/cjs/loader.js:868:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:879:10)
    at Module.load (internal/modules/cjs/loader.js:731:32)
    at Function

mattiasw · 2020-11-21T12:08:46Z

It can't find webpack which is weird... Or at least it wasn't meant to be like that. My first guess was that your server does not have webpack globally installed while mine does. But on my local laptop I actually don't have webpack installed globally and this still works there. So I'm not sure what's happening here... I will try some things.

mattiasw · 2020-11-21T12:45:10Z

If possible, could you try this branch out? It uses npx webpack instead of just webpack which seems much more logical. I'm not sure how it could have worked at all without that. :-) It shouldn't have if webpack was not globally installed.
#133

OliverJAsh · 2020-11-21T13:53:24Z

I'm not sure how it could have worked at all without that. :-) It shouldn't have if webpack was not globally installed.

It looks like we run npm install webpack if isDependenciesInstalled is false—so we shouldn't need to use npx?

        if (!isDependenciesInstalled()) {
            console.log('Installing ExifReader custom build dependencies...'); // eslint-disable-line no-console
            execSync('npm install --loglevel=error --no-optional --no-package-lock --no-save @babel/core @babel/preset-env @babel/register babel-loader cross-env string-replace-loader webpack webpack-cli terser-webpack-plugin', {stdio: 'inherit'});
            console.log('Done.'); // eslint-disable-line no-console
        }

If we do switch to using npx, how will these other dependencies get installed?

(Side note: we should probably lock the version of webpack so it doesn't break all of a sudden if there's a breaking change in webpack.)

After playing around a bit more, I managed to reproduce it locally on my Mac by running yarn install --production inside of the reduced test case repo I shared earlier. (Note this repo now includes the upgraded version of this package.)

$ trash node_modules yarn.lock && yarn cache clean
yarn cache v1.19.1
warning package.json: No license field
success Cleared cache.
✨  Done in 0.06s.

$ yarn install --production
yarn install v1.19.1
warning package.json: No license field
info No lockfile found.
warning No license field
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
error /Users/oliverash/Development/exifreader-webpack-error/node_modules/exifreader: Command failed.
Exit code: 1
Command: node bin/build.js --only-with-config
Arguments:
Directory: /Users/oliverash/Development/exifreader-webpack-error/node_modules/exifreader
Output:
Installing ExifReader custom build dependencies...
audited 572 packages in 10.477s
found 0 vulnerabilities

Done.
/bin/sh: webpack: command not found
child_process.js:660
    throw err;
    ^

Error: Command failed: webpack
    at checkExecSyncError (child_process.js:621:11)
    at execSync (child_process.js:657:15)
    at Object.<anonymous> (/Users/oliverash/Development/exifreader-webpack-error/node_modules/exifreader/bin/build.js:12:5)
    at Module._compile (internal/modules/cjs/loader.js:868:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:879:10)
    at Module.load (internal/modules/cjs/loader.js:731:32)
    at Function.Module._load (internal/modules/cjs/loader.js:644:12)
    at Function.Module.runMain (internal/modules/cjs/loader.js:931:10)
    at internal/main/run_main_module.js:17:11 {
  status: 127,
  signal: null,
  output: [ null, null, null ],
  pid: 29025,
  stdout: null,
  stderr: null
}
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

I think webpack is installed but it doesn't exist on the PATH. We can fix this by making the following change:

-    execSync('webpack', {stdio: 'inherit'});
+    execSync('./node_modules/.bin/webpack', {stdio: 'inherit'});

I tested this by making the change and then running:

cd node_modules/exifreader
node bin/build.js --only-with-config

mattiasw · 2020-11-21T15:18:57Z

To be honest I was not completely aware about how much npx actually does. Let's skip that. I could not get execSync('./node_modules/.bin/webpack', {stdio: 'inherit'}); to work either though. But I have a new idea. Apparently the --production is passed down. That is why the dependencies are not getting installed, they are dev dependencies. This seems to solve that (the important addition being --production=false). I think the only effect will be that dev dependencies are not ignored during the custom build.

https://github.com/mattiasw/ExifReader/pull/133/files#diff-983cdf348a40e3b9474612a84d8f52af0be59dae4f97e2e068dbd46d243de054R19

I also locked the versions, that was a good point, thanks!

OliverJAsh · 2020-11-21T18:53:28Z

I could not get execSync('./node_modules/.bin/webpack', {stdio: 'inherit'}); to work either though.

Oh weird. You were able to reproduce the problem using my steps above, but then after you made the change the problem still occurred? I'm really surprised.

To be clear, this is how I tested the fix, in the reduced test case repo I shared:

First, reproduce the problem by running rm -rf node_modules && yarn install --production
Open node_modules/exifreader/bin/build.js and make the change
Run cd node_modules/exifreader && node bin/build.js --only-with-config to re-run the postinstall script

But I have a new idea. Apparently the --production is passed down. That is why the dependencies are not getting installed, they are dev dependencies. This seems to solve that (the important addition being --production=false). I think the only effect will be that dev dependencies are not ignored during the custom build.

Hmm, I don't think this is going to fix the issue. The issue isn't that the dependencies are not being installed—they are being installed as I can see they are there in node_modules/exifreader/node_modules. (They are not installed when I run yarn but rather when the postinstall script manually invokes npm install.) Rather, the issue is that webpack does not exist on the PATH—we have to invoke it explicitly from ./node_modules/.bin.

mattiasw · 2020-11-21T22:05:05Z

This took a while, but I think I understand now. At least part of it. But first, yes, I could reproduce the error locally from your repo. Not sure why I had a problem with the ./node_modules/.bin/webpack though, should've worked.

Anyway, I know why just a single webpack actually works and why it didn't for you. When running the script using npm ... the node_modules/.bin directory is added to the PATH. And that does not happen if you just run e.g. node bin/build.js. One thing I still can't figure out though is that I really do have to add the --production=false for it to work, and I agree, it doesn't really make sense in my limited knowledge.

A sidenote which also highlights a difference in testing. The way I test this is by running npm pack in my ExifReader repo folder. This creates a .tgz file which will work as a real npm package. Then in the package.json in your repo I put "exifreader": "/path/to/ExifReader/exifreader-3.12.4.tgz". That way it can be tested in full without actually publishing the package. Without the fix I always get that webpack is missing, with the fix it always goes through.

Still don't trust it fully though but I have published a new version (3.12.5) (can't get any worse) so please try it out once more. Since I realized the PATH was updated when running with npm ... I think this could work.

OliverJAsh · 2020-11-22T16:45:43Z

3.12.5 fixes the issue! Great work. Thanks so much.

mattiasw · 2020-11-22T19:15:27Z

Great news! Big thanks for helping out with this. I would neither have realized nor managed otherwise.

Satsh24 mentioned this issue Apr 1, 2020

It would be nice if Exif takes into account GPSLatitudeRef and GPSLongitudeRef and returns the sign adjusted Lat, Long values #75

Closed

mattiasw closed this as completed Apr 1, 2020

mattiasw reopened this Nov 20, 2020

mattiasw closed this as completed Nov 21, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

One CLI for webpack must be installed error on app build using create-react-app. #89

One CLI for webpack must be installed error on app build using create-react-app. #89

Satsh24 commented Apr 1, 2020 •

edited

Loading

mattiasw commented Apr 1, 2020

Satsh24 commented Apr 1, 2020

OliverJAsh commented Nov 20, 2020

mattiasw commented Nov 20, 2020

mattiasw commented Nov 21, 2020 •

edited

Loading

OliverJAsh commented Nov 21, 2020

mattiasw commented Nov 21, 2020

mattiasw commented Nov 21, 2020

OliverJAsh commented Nov 21, 2020 •

edited

Loading

mattiasw commented Nov 21, 2020

OliverJAsh commented Nov 21, 2020 •

edited

Loading

mattiasw commented Nov 21, 2020

OliverJAsh commented Nov 22, 2020

mattiasw commented Nov 22, 2020

One CLI for webpack must be installed error on app build using create-react-app. #89

One CLI for webpack must be installed error on app build using create-react-app. #89

Comments

Satsh24 commented Apr 1, 2020 • edited Loading

Description

mattiasw commented Apr 1, 2020

Satsh24 commented Apr 1, 2020

OliverJAsh commented Nov 20, 2020

mattiasw commented Nov 20, 2020

mattiasw commented Nov 21, 2020 • edited Loading

OliverJAsh commented Nov 21, 2020

mattiasw commented Nov 21, 2020

mattiasw commented Nov 21, 2020

OliverJAsh commented Nov 21, 2020 • edited Loading

mattiasw commented Nov 21, 2020

OliverJAsh commented Nov 21, 2020 • edited Loading

mattiasw commented Nov 21, 2020

OliverJAsh commented Nov 22, 2020

mattiasw commented Nov 22, 2020

Satsh24 commented Apr 1, 2020 •

edited

Loading

mattiasw commented Nov 21, 2020 •

edited

Loading

OliverJAsh commented Nov 21, 2020 •

edited

Loading

OliverJAsh commented Nov 21, 2020 •

edited

Loading