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

Question

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 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.