Module build failed: error: couldn't find preset "es2015" relative to directory

Question

Problem :

I have the React project using the Webpack and Babel. When I created it on the office computer, my Webpack ran fine. But when I cloned my project onto the personal computer, it gave me below error :

ERROR in ./react_minesweeper.jsx
Module build failed: Error: Couldn't find preset "es2015" relative to directory "/Users/alecxe/Desktop"at /alecxe/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/alecxe/Desktop/w6d5/minesweeper/node_modules/babel-core/lib/transformation/file/options/option-manager.js:269:20)

 

Answer 1

1.  Command npm i or npm install :

You should install all your packages in the package.json dependencies and the dev dependencies

2.  To check if you have the particular package installed :

You can use the below command to check particular package

npm ls babel-preset-es2015

3.  If for some of the reason the NODE_ENV is production and you want to install dev dependencies then you can use:

npm install --only=dev

4.  The below command can be used on the production machines that are dealing with the already built code and do not need the access to any of the development dependencies:

npm install --only=prod

5.  I want to recommend creating the .babelrc in your root of the repo with a below content:

{"presets": [ "es2015", "react" ] }

6.  For your webpack config you must want to specify some of the other options:

{ context: __dirname, resolve: { root: __dirname, extensions: [ '.js', '.jsx', '.json' ] }}

This will resolve your issue.

Answer 2

Try this:

gulp.task('babelify', () => {
  gulp.src([`${global.config.source}/**/*.js`,
            `!${global.config.source}/js/3rd/**/*`,
            `!${global.config.source}/libs/**/*`])
    .pipe(babel({ presets: ['es2015'] }))
    .pipe(gulp.dest(dist('js')));
});