Rogar
Reputation: 155
ERROR in ./src/client-app/index.js - Module build failed: Error: Cannot find module '@babel/core'
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:
"start": "webpack-dev-server --config webpack/config/dev.config.js --open",
I installed all this dependencies (package.json file) with npm install and Webpack starting to run, but it failed wit this error:
c:\test-dev3\name_app>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 [email protected]
npm info using [email protected]
npm verb run-script [ 'prestart', 'start', 'poststart' ]
npm info lifecycle [email protected]~prestart: [email protected]
npm info lifecycle [email protected]~start: [email protected]
> [email protected] start c:\test-dev3\name_app
> 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.<anonymous> (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.
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.
Also I installed other global dependencies:
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
package.json:
{
"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"
}
}
dev.config.js:
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
}
};
index.js:
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(<CMSApp />, 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);
}
};
}
Upvotes: 1
Views: 2276
Answers (2)
Karen Grigoryan
Reputation: 5432
- Remove all
dependenciesfrompackage.json, leave onlydevDependencies, since they are compile time dependencies needed purely for development purposes. - remove node_modules folder.
npm installagain.- Replace start script in
package.jsonwith"start": "webpack-dev-server --config webpack/config/dev.config.js --open", you don't need to executewebpack-dev-serverwithbabel-node, since you already instruct webpack to run babel for you.
P. S. you don't need globally installed npm packages as dependencies, the local ones are enough, since their version is tied to specific project. Global ones can be helpful though in cases when you need global project generators like yeoman or create-react-app.
Upvotes: 0
Aaqib
Reputation: 10360
One of the ways to solve this is to create a .babelrc file in the root directory where your webpack.config.js file is and add :
{
"presets": ["react", "es2015", "stage-0"]
}
As currently babel-preset-react , babel-preset-es2015 and babel-preset-stage-0 are already installed in your dev and project dependencies
Upvotes: 1
Related Questions
- Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js)
- Module build failed: Error: Cannot find module '@babel/core'
- Cannot find module 'babel-core' and "@babel-core" is installed
- Cannot find module '@babel/core'
- React build issue, ERROR in ./src/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js):
- webpack with babel showing error Module build failed (from ./node_modules/babel-loader/lib/index.js):
- ERROR in Cannot find module 'babel-core'. using react.js, webpack, and express server
- Cannot find module 'c:\test-dev3\test_name\webpack-dev-server'
- Webpack failed to compile
- Module build failed: ReferenceError: [BABEL]