「Cannot find module '@babel/preset-core'」というエラーが出る

概要

ココを参考にREACT勉強してたらエラーにぶち当たりました

エラー内容

ERROR in ./js/client.js
Module build failed (from ../node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/preset-core' from '/Users/ksilver/work/react-tutorial'
- If you want to resolve "@babel/core", use "module:@babel/core"
    at Function.module.exports [as sync] (/Users/ksilver/work/react-tutorial/node_modules/resolve/lib/sync.js:58:15)
    at resolveStandardizedName (/Users/ksilver/work/react-tutorial/node_modules/@babel/core/lib/config/files/plugins.js:101:31)
    at resolvePreset (/Users/ksilver/work/react-tutorial/node_modules/@babel/core/lib/config/files/plugins.js:58:10)
    at loadPreset (/Users/ksilver/work/react-tutorial/node_modules/@babel/core/lib/config/files/plugins.js:77:20)
    at createDescriptor (/Users/ksilver/work/react-tutorial/node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
    at items.map (/Users/ksilver/work/react-tutorial/node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
    at Array.map (<anonymous>)
    at createDescriptors (/Users/ksilver/work/react-tutorial/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
    at createPresetDescriptors (/Users/ksilver/work/react-tutorial/node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
    at passPerPreset (/Users/ksilver/work/react-tutorial/node_modules/@babel/core/lib/config/config-descriptors.js:58:96)
    at cachedFunction (/Users/ksilver/work/react-tutorial/node_modules/@babel/core/lib/config/caching.js:33:19)
    at presets.presets (/Users/ksilver/work/react-tutorial/node_modules/@babel/core/lib/config/config-descriptors.js:29:84)
    at mergeChainOpts (/Users/ksilver/work/react-tutorial/node_modules/@babel/core/lib/config/config-chain.js:320:26)
    at /Users/ksilver/work/react-tutorial/node_modules/@babel/core/lib/config/config-chain.js:283:7
    at buildRootChain (/Users/ksilver/work/react-tutorial/node_modules/@babel/core/lib/config/config-chain.js:68:29)
    at loadPrivatePartialConfig (/Users/ksilver/work/react-tutorial/node_modules/@babel/core/lib/config/partial.js:85:55)
    at Object.loadPartialConfig (/Users/ksilver/work/react-tutorial/node_modules/@babel/core/lib/config/partial.js:110:18)
    at Object.<anonymous> (/Users/ksilver/work/react-tutorial/node_modules/babel-loader/lib/index.js:140:26)
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/Users/ksilver/work/react-tutorial/node_modules/babel-loader/lib/index.js:3:103)
    at _next (/Users/ksilver/work/react-tutorial/node_modules/babel-loader/lib/index.js:5:194)
    at /Users/ksilver/work/react-tutorial/node_modules/babel-loader/lib/index.js:5:364
    at new Promise (<anonymous>)
    at Object.<anonymous> (/Users/ksilver/work/react-tutorial/node_modules/babel-loader/lib/index.js:5:97)
    at Object._loader (/Users/ksilver/work/react-tutorial/node_modules/babel-loader/lib/index.js:220:18)
    at Object.loader (/Users/ksilver/work/react-tutorial/node_modules/babel-loader/lib/index.js:56:18)
    at Object.<anonymous> (/Users/ksilver/work/react-tutorial/node_modules/babel-loader/lib/index.js:51:12)

バージョン

{
  "name": "react-tutorial",
  "version": "1.0.0",
  "description": "test",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/preset-env": "^7.4.3",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.1",
    "webpack-dev-server": "^3.3.1"
  }
}

原因

webpack.config.js が正しくない

修正前

var debug   = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path    = require('path');

module.exports = {
  context: path.join(__dirname, "src"),
  entry: "./js/client.js",
  module: {
    rules: [{
      test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        use: [{
          loader: 'babel-loader',
          options: {
            presets: ['@babel/core', '@babel/preset-env']
          }
        }]
      }]
    },
    output: {
      path: __dirname + "/src/",
      filename: "client.min.js"
    },
    plugins: debug ? [] : [
      new webpack.optimize.OccurrenceOrderPlugin(),
      new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
    ]
};

修正後

var debug   = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path    = require('path');

module.exports = {
  context: path.join(__dirname, "src"),
  entry: "./js/client.js",
  module: {
    rules: [{
      test: /\.jsx?$/,
      exclude: /(node_modules|bower_components)/,
      use: [{
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-react', '@babel/preset-env']
        }
      }]
    }]
  },
  output: {
    path: __dirname + "/src/",
    filename: "client.min.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ]
};

diff

 var debug   = process.env.NODE_ENV !== "production";
 var webpack = require('webpack');
 var path    = require('path');

 module.exports = {
   context: path.join(__dirname, "src"),
   entry: "./js/client.js",
   module: {
     rules: [{
       test: /\.jsx?$/,
       exclude: /(node_modules|bower_components)/,
       use: [{
         loader: 'babel-loader',
         options: {
-          presets: ['@babel/core', '@babel/preset-env']
+          presets: ['@babel/preset-react', '@babel/preset-env']
         }
       }]
     }]
   },
   output: {
     path: __dirname + "/src/",
     filename: "client.min.js"
   },
   plugins: debug ? [] : [
     new webpack.optimize.OccurrenceOrderPlugin(),
     new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
   ]
 };

考察

多分バージョン依存