21

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

Louis Cruz
  • 1,703
  • 2
  • 15
  • 20
  • In case anyone asks: my personal computer is running El Capitan. (I believe the office computer is as well.) – Louis Cruz Oct 22 '16 at 05:15
  • 4
    Given that the error references `/Users/louisstephancruz/Desktop`, do you have a `/Users/louisstephancruz/Desktop/.babelrc` file in your home Desktop? If so, it seems like that may be interfering with your project since that would expect `node_modules` to be in `Desktop`, not in `Desktop/w6d5/minesweeper/`. If you delete that `.babelrc` things should work. – loganfsmyth Oct 22 '16 at 05:41
  • thanks @loganfsmyth I got the same error because my .babelrc was in the parent directory by mistake – Marc Stober Oct 25 '16 at 11:56

5 Answers5

31

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.

cchamberlain
  • 17,444
  • 7
  • 59
  • 72
  • I have already installed the packages. I've run npm install. I've also removed the node modules directory and reinstalled. – Louis Cruz Oct 22 '16 at 05:27
  • 1
    What is your version of node and npm? `node --version`, `npm -v`? – cchamberlain Oct 22 '16 at 05:28
  • My version of node is: v5.6.0 My version of npm is: 3.6.0 – Louis Cruz Oct 22 '16 at 05:29
  • Hold on you might have the answer here... Just created the .babelrc and now I have a new error: `Module not found: Error: Cannot resolve 'file' or 'directory' ./components/game in /Users/louisstephancruz/Desktop/w6d5/minesweeper`. Going to debug real quick – Louis Cruz Oct 22 '16 at 05:35
  • I am in fact in the correct directory (w6d5/minesweeper), but the new error still persists – Louis Cruz Oct 22 '16 at 05:37
  • I think that would mean you have a file using a import / require `'./components/game'` that does not exist at that relative path. Could also be a case sensitivity issue. – cchamberlain Oct 22 '16 at 05:37
  • 2
    @LouisCruz What kind of file is it? You may need to resolve it if you don't include the extension – Andrew Li Oct 22 '16 at 05:43
  • When I changed the import of `./components/game` to `./components/game.jsx` the error goes away. Now I have a new question: why is it that I have to include the '.jsx' ? It works fine on the other computer. If you'd like I can open a new question for you to answer. Sincerely want to know! – Louis Cruz Oct 22 '16 at 05:44
  • 1
    See last edit about resolve extensions in webpack, that should do it. – cchamberlain Oct 22 '16 at 05:45
  • 1
    Dang that fixes the extension issue too! @cchamberlain, thank you! – Louis Cruz Oct 22 '16 at 05:47
  • 1
    npm ls babel-preset-es2015 is empty , so npm install babel-preset-es2015 --save-dev is solved my problem ~ – user918888 Apr 25 '17 at 10:16
29
npm install babel-preset-es2015

does that help?

haboutnnah
  • 1,118
  • 11
  • 19
  • Yes, I did. Just because it's in your package.json, doesn't mean you have it installed. Especially as it works on one computer, and not the other. – haboutnnah Oct 22 '16 at 05:19
  • You wouldn't need the `--save-dev` flag, it's already in the package.json. – haboutnnah Oct 22 '16 at 05:21
  • Just in case my understanding of npm is flawed, I tried installing yet again with both of those methods and neither worked. Thanks for the try though! – Louis Cruz Oct 22 '16 at 05:22
  • Just confirming, you are in the project directory, correct? Also, did you try `npm install`, which should install all dependencies listed. – haboutnnah Oct 22 '16 at 05:24
  • Yes, I am in the correct directory. I've checked that many, many times just for a sanity check. – Louis Cruz Oct 22 '16 at 05:24
  • 1
    Just to verify, could you run a `npm ls`? Does it show that all dev dependencies are installed? – haboutnnah Oct 22 '16 at 05:26
  • Yes, the dev dependencies are indeed installed. Just learned about the `npm ls` method, thanks! – Louis Cruz Oct 22 '16 at 05:30
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/126379/discussion-between-manmeet-gill-and-louis-cruz). – haboutnnah Oct 22 '16 at 05:31
9

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

Ihor Khomiak
  • 1,151
  • 11
  • 17
  • 1
    why is it that 90% of the places i look say to ADD a .babelrc file and you seem to be saying to remove it?? what is your reasoning for removing it? – Alex Bollbach Aug 14 '17 at 12:58
  • 1
    I think the point here is that Alex had a .babelrc in their home directory (not the project directory) and it was conflicting with the project build settings. At least that was the case for me. – Dylan Aug 24 '17 at 00:04
  • Same, I had a hidden `.babelrc` in the parent directory and it was blowing up for me too... – kevlarr Sep 12 '17 at 15:15
0

For me, I had to install the package globally.

npm install babel-preset-es2015 --save -g

Matthew Spencer
  • 781
  • 1
  • 8
  • 11
-1
npm install babel-preset-es2015 babel-preset-stage-2 --save

It's worked for me.

Shakhawat Hossain
  • 34
  • 5