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

回答1:

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.

回答2:

npm install babel-preset-es2015 

does that help?

回答3:

I resolved this issue when I removed .babelrc (hidden) file from "/Users/username" directory.

回答4:

For some strange reason, after computer restart, my project failed to compile even though nothing was changed.

When nothing of proposed solutions helped, simply removing es2015 from presets in webpack.config was successful.

I have no other explanation for this, but, for the time-being at least, it works fine.

My webpack.config now has this:

{     test: /\.(js|jsx)$/,     use: [{         loader: 'babel-loader',         options: {             babelrc: false,             presets: ['env', 'react']         }     }] } 

文章来源: Webpack + Babel: Couldn't find preset “es2015” relative to directory