I have a React project using Webpack and Babel. When I created it on an office computer, the Webpack ran fine. When I cloned the project onto my personal computer, it gave the following error:
ERROR in ./react_minesweeper.jsx
Module build failed: Error: Couldn't find preset "es2015" relative to directory "/Users/louisstephancruz/Desktop"
at /Users/louisstephancruz/Desktop/w6d5/minesweeper/node_modules/babel-core/lib/transformation/file/options/option-manager.js:298:19
at Array.map (native)
at OptionManager.resolvePresets (/Users/louisstephancruz/Desktop/w6d5/minesweeper/node_modules/babel-core/lib/transformation/file/options/option-manager.js:269:20)
Here's my webpack.config.js
:
module.exports = {
entry: './react_minesweeper.jsx',
output: {
path: './',
filename: 'bundle.js',
},
module: {
loaders: [
{
test: [/\.jsx?$/, /\.js?$/],
exclude: /(node_modules)/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
},
devtool: 'source-map',
resolve: {
extensions: ['', '.js', '.jsx' ]
}
};
Here's my package.json
:
{
"name": "minesweeper",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --inline"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel": "^6.5.2",
"babel-core": "^6.17.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.16.0",
"babel-preset-react": "^6.16.0",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.16.2"
},
"dependencies": {
"react": "^15.3.2",
"react-dom": "^15.3.2"
}
}
My version of node is: v5.6.0 My version of npm is: 3.6.0
npm i
or npm install
should install all the packages in your package.json dependencies and dev dependencies (so long as your NODE_ENV
environment variable does not equal production
).
To check if you have a particular package installed you may do:
npm ls babel-preset-es2015
If for some reason your NODE_ENV
is production
and you would like to install dev dependencies you can use:
npm install --only=dev
Conversely, the following may be used on production machines that are dealing with already built code and do not need access to any development dependencies:
npm install --only=prod
I'd recommend creating a .babelrc
in the root of your repo with the following content:
{ "presets": [ "es2015", "react" ] }
For the webpack config you may want to specify some other options:
{ context: __dirname
, resolve: { root: __dirname, extensions: [ '.js', '.jsx', '.json' ] }
}
in addition to the rest of your configuration, this tells webpack where the root directory of the bundling should take place from and what file extensions to treat as modules (which extensions you can omit in require
/ import
statements).
I'd recommend checking out webpack's resolve.extensions for more information on that bit.
npm install babel-preset-es2015
does that help?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With