Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.0k views
in Technique[技术] by (71.8m points)

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...