Louis Cruz Louis Cruz - 1 month ago 84
React JSX Question

Webpack + Babel: Couldn't find preset "es2015" relative to directory

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

Answer

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


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.