ベスパリブ

プログラミングを主とした日記・備忘録です

Error: Cannot find module 'babel-core'エラーの修正で困った

以下のようなエラーメッセージが表示されてくまった(´・_・`)

$ npm run build-test

> solve-later-again@1.0.0 build-test C:\Users\USER\workspace\solve-later-again\solve-later-again
> webpack-cli -w --mode=development


webpack is watching the files…

Hash: b5aa167f0XXXXXXf2170
Version: webpack 4.41.5
Time: 59ms
Built at: 2020-01-07 6:57:02 AM
     Asset      Size  Chunks             Chunk Names
content.js  4.77 KiB    main  [emitted]  main
Entrypoint main = content.js
[./src/content.js] 3.32 KiB {main} [not cacheable] [built] [failed] [1 error]

ERROR in ./src/content.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'babel-core'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (C:\Users\USER\workspace\solve-later-again\solve-later-again\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
    at Object.<anonymous> (C:\Users\USER\workspace\solve-later-again\solve-later-again\node_modules\babel-loader\lib\index.js:3:13)
    at Module._compile (C:\Users\USER\workspace\solve-later-again\solve-later-again\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (C:\Users\USER\workspace\solve-later-again\solve-later-again\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
    at loadLoader (C:\Users\USER\workspace\solve-later-again\solve-later-again\node_modules\loader-runner\lib\loadLoader.js:18:17)
    at iteratePitchingLoaders (C:\Users\USER\workspace\solve-later-again\solve-later-again\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
    at runLoaders (C:\Users\USER\workspace\solve-later-again\solve-later-again\node_modules\loader-runner\lib\LoaderRunner.js:365:2)
    at NormalModule.doBuild (C:\Users\USER\workspace\solve-later-again\solve-later-again\node_modules\webpack\lib\NormalModule.js:295:3)
    at NormalModule.build (C:\Users\USER\workspace\solve-later-again\solve-later-again\node_modules\webpack\lib\NormalModule.js:446:15)
    at Compilation.buildModule (C:\Users\USER\workspace\solve-later-again\solve-later-again\node_modules\webpack\lib\Compilation.js:739:10)
    at moduleFactory.create (C:\Users\USER\workspace\solve-later-again\solve-later-again\node_modules\webpack\lib\Compilation.js:1111:12)
    at factory (C:\Users\USER\workspace\solve-later-again\solve-later-again\node_modules\webpack\lib\NormalModuleFactory.js:409:6)
    at hooks.afterResolve.callAsync (C:\Users\USER\workspace\solve-later-again\solve-later-again\node_modules\webpack\lib\NormalModuleFactory.js:155:13)
    at AsyncSeriesWaterfallHook.eval [as callAsync] (eval at create (C:\Users\USER\workspace\solve-later-again\solve-later-again\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1) 
    at AsyncSeriesWaterfallHook.lazyCompileHook (C:\Users\USER\workspace\solve-later-again\solve-later-again\node_modules\tapable\lib\Hook.js:154:20)
    at resolver (C:\Users\USER\workspace\solve-later-again\solve-later-again\node_modules\webpack\lib\NormalModuleFactory.js:138:29)
    at process.nextTick (C:\Users\USER\workspace\solve-later-again\solve-later-again\node_modules\webpack\lib\NormalModuleFactory.js:346:9)
    at process._tickCallback (internal/process/next_tick.js:61:11)

エラーメッセージでググるCannot find module 'babel-core' · Issue #124 · babel/gulp-babel · GitHub というドンピシャな記事がヒットするのですが、この記事に書いてあるようにnpm install --save-dev @babel/core @babel/preset-envをしてもエラーは解消しませんでした(というか元々@babel/core と @babel/preset-env を使っててアップデートしたけどダメだった)。

しょうがないので、すべてのパッケージをアップデートしてみることにしました。

結論を言うと、babel-loaderをアップデートしたら直りました。

パッケージのアップデート方法

npmパッケージのアップデートは依存関係を調べながら更新できるnpm-check-updatesが便利らしい1ので、それを使います。

# npm-check-updatesをグローバルインストールする
$ npm install -g npm-check-updates
C:\Users\USER\AppData\Roaming\npm\npm-check-updates -> C:\Users\USER\AppData\Roaming\npm\node_modules\npm-check-updates\bin\npm-check-updates
C:\Users\USER\AppData\Roaming\npm\ncu -> C:\Users\USER\AppData\Roaming\npm\node_modules\npm-check-updates\bin\ncu
+ npm-check-updates@4.0.1
added 259 packages from 95 contributors in 7.414s

# npm-check-updatesの実行
$ ncu
Checking C:\Users\USER\workspace\solve-later-again\solve-later-again\package.json
[====================] 5/5 100%

 babel-loader  ^7.1.5  →  ^8.0.6

Run ncu -u to upgrade package.json

$ ncu -u
Upgrading C:\Users\USER\workspace\solve-later-again\solve-later-again\package.json
[====================] 5/5 100%

 babel-loader  ^7.1.5  →  ^8.0.6

Run npm install to install new versions.


$ npm install
npm WARN solve-later-again@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

removed 9 packages, updated 1 package and audited 6710 packages in 2.216s
found 0 vulnerabilities

このあとビルドしたら直りました(^-^≡^-^)

参考URL