title: ERROR in ./src/client-app/index.js - Module build failed: Error: Cannot find module '@babel/core'
body: <p>I am trying to run an app written in React and Webpack and webpack-dev-server too. I'm using Windows. I'm using: Node v8.9.4 Npm v5.6.0 Webpack v3.11.0 Webpack-dev-server v2.9.1
  I am executing this command to start the app:</p>
  
  <pre><code>"start": "webpack-dev-server --config webpack/config/dev.config.js --open",
  </code></pre>
  
  <p>I installed all this dependencies (package.json file) with <code>npm install</code> and Webpack starting to run, but it failed wit this error:</p>
  
  <pre><code>c:\test-dev3\name_app&gt;npm run start
  npm info it worked if it ends with ok
  npm verb cli [ 'C:\\Program Files\\nodejs\\node.exe',
  npm verb cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
  npm verb cli   'run',
  npm verb cli   'start' ]
  npm info using npm@5.6.0
  npm info using node@v8.9.4
  npm verb run-script [ 'prestart', 'start', 'poststart' ]
  npm info lifecycle name_app@1.0.0~prestart: name_app@1.0.0
  npm info lifecycle name_app@1.0.0~start: name_app@1.0.0
  
  &gt; name_app@1.0.0 start c:\test-dev3\name_app
  &gt; webpack-dev-server --config webpack/config/dev.config.js --open
  
  Project is running at http://localhost:8080/
  webpack output is served from /assets
  Content not from webpack is served from ./dist
  404s will fallback to /index.html
  webpack: wait until bundle finished: /assets/bundle.js
  Hash: e5afd651a3e015181387
  Version: webpack 3.11.0
  Time: 1630ms
                          Asset       Size  Chunks                    Chunk Names
  images/login-background-8.jpg     140 kB          [emitted]
                      bundle.js     329 kB       0  [emitted]  [big]  main
  images/login-background-2.jpg     294 kB          [emitted]  [big]
  images/login-background-4.jpg     428 kB          [emitted]  [big]
  images/login-background-6.jpg     243 kB          [emitted]
                  bundle.js.map     390 kB       0  [emitted]         main
  images/login-background-3.jpg    1.41 MB          [emitted]  [big]
  images/login-background-5.jpg    1.41 MB          [emitted]  [big]
  images/login-background-7.jpg    1.71 MB          [emitted]  [big]
  images/login-background-1.jpg     2.6 MB          [emitted]  [big]
                  ../index.html  748 bytes          [emitted]
    [35] multi (webpack)-dev-server/client?http://localhost:8080 ./src/client-app/index.js 40 bytes {0} [built]
    [36] (webpack)-dev-server/client?http://localhost:8080 7.23 kB {0} [built]
    [37] ./node_modules/url/url.js 23.3 kB {0} [built]
    [39] ./node_modules/url/util.js 314 bytes {0} [built]
    [40] ./node_modules/querystring-es3/index.js 127 bytes {0} [built]
    [43] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
    [45] ./node_modules/loglevel/lib/loglevel.js 7.74 kB {0} [built]
    [46] (webpack)-dev-server/client/socket.js 1.04 kB {0} [built]
    [78] (webpack)-dev-server/client/overlay.js 3.73 kB {0} [built]
    [80] ./node_modules/html-entities/index.js 231 bytes {0} [built]
    [83] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
    [84] (webpack)/hot/log.js 1.04 kB {0} [optional] [built]
    [85] (webpack)/hot/emitter.js 77 bytes {0} [built]
    [86] ./node_modules/events/events.js 8.33 kB {0} [built]
    [87] ./src/client-app/index.js 1.13 kB {0} [built] [failed] [1 error]
      + 73 hidden modules
  
  ERROR in ./src/client-app/index.js
  Module build failed: Error: Cannot find module '@babel/core'
      at Function.Module._resolveFilename (module.js:538:15)
      at Function.Module._load (module.js:468:25)
      at Module.require (module.js:587:17)
      at require (internal/module.js:11:18)
      at Object.&lt;anonymous&gt; (c:\test-dev3\name_app\node_modules\babel-loader\lib\index.js:1:75)
      at Module._compile (module.js:643:30)
      at Object.Module._extensions..js (module.js:654:10)
      at Module.load (module.js:556:32)
      at tryModuleLoad (module.js:499:12)
      at Function.Module._load (module.js:491:3)
      at Module.require (module.js:587:17)
      at require (internal/module.js:11:18)
      at loadLoader (c:\test-dev3\name_app\node_modules\loader-runner\lib\loadLoader.js:13:17)
      at iteratePitchingLoaders (c:\test-dev3\name_app\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
      at runLoaders (c:\test-dev3\name_app\node_modules\loader-runner\lib\LoaderRunner.js:362:2)
      at NormalModule.doBuild (c:\test-dev3\name_app\node_modules\webpack\lib\NormalModule.js:182:3)
   @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/client-app/index.js
  Child html-webpack-plugin for "..\index.html":
       1 asset
         [0] ./node_modules/html-webpack-plugin/lib/loader.js!./index.html 1.1 kB {0} [built]
         [1] ./node_modules/html-webpack-plugin/node_modules/lodash/lodash.js 540 kB {0} [built]
         [2] (webpack)/buildin/global.js 509 bytes {0} [built]
         [3] (webpack)/buildin/module.js 517 bytes {0} [built]
  webpack: Failed to compile.
  </code></pre>
  
  <p>In all research, they said I just to installed and config the .babelrc file with the presets. I don't know if I need to do something more with Babel and where to start. The application I didn't make it. I just to try run the app. </p>
  
  <p>Also I installed other global dependencies: </p>
  
  <pre><code>npm install -g eslint
  
  npm install -g webpack
  
  npm install -g webpack-dev-server
  
  npm install -g babel
  
  npm install -g babel-core
  
  npm install -g babel-cli
  
  npm install -g babel-eslint
  
  npm install react react-dom
  
  npm install --save-dev webpack-dev-middleware webpack-hot-middleware
  </code></pre>
  
  <p>package.json:</p>
  
  <pre><code>        {
            "name": "name_app",
            "version": "1.0.0",
            "description": "",
            "main": "index.js",
            "scripts": {
              "test": "",
              "lint": "eslint src webpack --cache",
              "start": "babel-node webpack-dev-server --config webpack/config/dev.config.js --open",
            },
            "repository": {
              "type": "git",
              "url": ""
            },
            "author": "",
            "license": "",
            "bugs": {
              "url": ""
            },
            "homepage": "",
            "eslintIgnore": [
              "**/node_modules/**",
              "**/dist/**"
            ],
            "devDependencies": {
              "babel-cli": "^6.26.0",
              "babel-core": "^6.26.0",
              "babel-eslint": "^8.0.1",
              "babel-loader": "^8.0.0-beta.0",
              "babel-preset-es2015": "^6.24.1",
              "babel-preset-react": "^6.24.1",
              "babel-preset-stage-0": "^6.24.1",
              "copy-webpack-plugin": "^4.3.1",
              "css-loader": "^0.28.7",
              "eslint": "^4.7.2",
              "eslint-config-airbnb": "^15.1.0",
              "eslint-plugin-import": "^2.7.0",
              "eslint-plugin-jest": "^21.12.2",
              "eslint-plugin-jsx-a11y": "^5.1.1",
              "eslint-plugin-react": "^7.4.0",
              "extract-text-webpack-plugin": "^3.0.1",
              "file-loader": "^1.1.6",
              "html-webpack-harddisk-plugin": "^0.1.0",
              "html-webpack-plugin": "^2.30.1",
              "node-sass": "^4.5.3",
              "rimraf": "^2.6.2",
              "sass-loader": "^6.0.6",
              "style-loader": "^0.19.0",
              "uglifyjs-webpack-plugin": "^0.4.6",
              "url-loader": "^0.6.2",
              "webpack": "^3.11.0",
              "webpack-dev-server": "^2.9.1"
            },
            "dependencies": {
          "babel-cli": "^6.26.0",
          "babel-core": "^6.26.0",
          "babel-eslint": "^8.0.1",
          "babel-loader": "^8.0.0-beta.0",
          "babel-plugin-syntax-dynamic-import": "^6.18.0",
          "babel-preset-env": "^1.6.1",
          "babel-preset-es2015": "^6.24.1",
          "babel-preset-react": "^6.24.1",
          "babel-preset-stage-0": "^6.24.1",
          "copy-webpack-plugin": "^4.3.1",
          "css-loader": "^0.28.7",
          "eslint": "^4.7.2",
          "eslint-config-airbnb": "^15.1.0",
          "eslint-plugin-import": "^2.7.0",
          "eslint-plugin-jest": "^21.12.2",
          "eslint-plugin-jsx-a11y": "^5.1.1",
          "eslint-plugin-react": "^7.4.0",
          "extract-text-webpack-plugin": "^3.0.1",
          "file-loader": "^1.1.6",
          "html-webpack-harddisk-plugin": "^0.1.0",
          "html-webpack-plugin": "^2.30.1",
          "node-sass": "^4.5.3",
          "rimraf": "^2.6.2",
          "sass-loader": "^6.0.6",
          "style-loader": "^0.19.0",
          "uglifyjs-webpack-plugin": "^0.4.6",
          "url-loader": "^0.6.2",
          "webpack": "^3.11.0",
          "webpack-dev-server": "^2.9.1"      
          }
    }
  </code></pre>
  
  <p>dev.config.js:</p>
  
  <pre><code>var CopyWebpackPlugin = require('copy-webpack-plugin');
  var HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
  var HtmlWebpackPlugin = require('html-webpack-plugin');
  var path = require('path');
  var OutputFiles = require('../output-files');
  
  module.exports = {
    entry: OutputFiles.entryDev,
    output: {
      filename: OutputFiles.bundle,
      path: path.resolve(__dirname, OutputFiles.distPath),
      publicPath: OutputFiles.publicPath,
      libraryTarget: 'umd',
      library: ['FF', 'CMS']
    },
    module: {
      loaders: [
        { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
      ],
      rules: [
        {
          test: /\.js$/,
          loader: 'babel-loader',
          exclude: /node_modules/
        },
        {
          test: /\.css$/,
          exclude: /node_modules/,
          use: 'css-loader'
        },
        {
          test: /\.scss$/,
          exclude: /node_modules/,
          use: [
            { loader: 'style-loader' }, // creates style nodes from JS strings
            {
              loader: 'css-loader', // translates CSS into CommonJS
              query: {
                modules: true,
                sourceMap: true,
                importLoaders: 1,
                // localIdentName: '[local]__[hash:base64:5]',
                localIdentName: '[local]'
              }
            },
            {
              loader: 'sass-loader',
              options: {
                includePaths: ['src/styles'], // compiles Sass to CSS
                sourceMap: true
              }
            }
          ]
        },
        {
          test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
          loader: 'file-loader',
          options: {
            limit: 10000,
            name: 'assets/images/[name].[ext]'
          }
        }
      ]
    },
    plugins: [
     new CopyWebpackPlugin([{ from: 'static' }]),
      new HtmlWebpackPlugin({
        filename: '../index.html',
        template: 'index.html',
        inject: 'head',
        alwaysWriteToDisk: true
      }),
      new HtmlWebpackHarddiskPlugin()
    ],
    devtool: 'source-map',
    devServer: {
      contentBase: './dist',
      historyApiFallback: true
    }
  };
  </code></pre>
  
  <p>index.js:</p>
  
  <pre><code>import { render, unmountComponentAtNode } from 'react-dom';
  
  import EventEmitter from 'events';
  import React from 'react';
  import app from './cms-app';
  import { load as optionsLoad } from './options';
  
  export default function compose(options) {
    const emitter = new EventEmitter();
    const cmsOptions = optionsLoad(options);
  
    const container = document.querySelector(options.selector);
    console.log(container);
    const CMSApp = app(emitter, cmsOptions);
  
    return {
      render() {
        render(&lt;CMSApp /&gt;, container);
      },
      on(event, handler) {
        return emitter.on(event, handler);
      },
      off(event, handler) {
        return handler
          ? emitter.removeListener(event, handler)
          : emitter.removeAllListeners(event);
      },
      dispose() {
        emitter.removeAllListeners();
        return unmountComponentAtNode(container);
      }
    };
  }
  </code></pre>