Couldn't find preset “es2015” relative to directory for new project

Question

I tried all options listed here and other sites but none seem to work.

I was able to install webpack reactjs and other components correctly for my 1st test application (MyApp).

For my next application project, I wanted to leverage all npm-modules from 1st app so that I don't have to download all modules again and keep them centrally.

However, I keep getting above error about missing "es2015". webpack under my 1st app project does not report this problem. The strange thing is even if I change preset from es2015 to say XXes2015, I still get the same message.

My webpack.config.js:

var path = require('path');

var isDev=true;
const cssModulesNames = `${isDev ? '[path][name]__[local]__' : ''}[hash:base64:5]`;


var config = {

    entry:  path.resolve(__dirname, 'js\\main.js'),
    output: {
        path: path.resolve(__dirname, '.'),
        filename: '.\\bundle.js'
    },

    resolveLoader: {

         modulesDirectories:  [ '../../../../Documents/API/react/examples/MyApp/node_modules'   ]
    },
    module: {
        loaders: [{
            test: /\.jsx?$/,
            loader: 'babel',
            query:
            {
                presets:   [ 'es2015', 'react',"stage-0"]

            }
        }]
       }

       };

    module.exports = config;

My package.jason:

  {
     "name": "App1",
     "version": "1.13.1",
     "description": "",
     "main": ".",
     "dependencies": {
    "babel-core": "latest",
       "babel-loader": "latest",
       "babel-preset-es2015": "latest",
       "babel-preset-react": "latest",
       "babel-preset-stage-0": "latest"
     },
     "devDependencies": {},
     "scripts": {
       "test": "jest --verbose"
     },
     "jest": {
           "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
           "unmockedModulePathPatterns": [
               "<rootDir>/node_modules/react",
               "<rootDir>/node_modules/react-dom",
               "<rootDir>/node_modules/react-addons-test-utils",
               "<rootDir>/node_modules/fbjs"
           ]
       },
     "author": "XX",
     "license": "ISC"
   }

My .bablrc :

{     "presets": ["es2015", "stage-0", "react"]   }

If I change entry es2015 to say esXX2015 in webpack.config.js or .babelrc, it gives same error. I expected it to look for different preset.

Hope someone can throw more light on this and help me out !

Thanks.

Answer 1

make sure your filename is: .babelrc instead of .bablrc

you can try to add babel-loader on your webpack.config

change loader: 'babel' to loader: 'babel-loader'

Answer 2

Looks like you expect the resolveLoader.modulesDirectories config parameter to tell babel where to find presets. This parameter is used by webpack to find loaders (such as babel-loader), but not by babel.

Answer 3

There is a typo in your question. It should be .babelrc not .bablrc

The content of `.babelrc' should like below. The order is important .

stage-0 → ES2015 → JSX → ES5

{
  "presets": [
    "stage-0",
    "es2015",
    "react"
  ]
}

I suggest you to have presets either in .babelrc file or in webpack.config file to maintain single source of truth. So remove the query entry in your webpack.config and add a exclude entry to ignore js/jsx files from inside the node-modeuls folder (update it as below...)

loaders: [{
    test: /\.jsx?$/,
    exclude: /node-modules/,  
    loader: 'babel'
}]

Answer 4

I finally managed to solve the issue by creating node-modules symbolic link to previous projects node_module directory. While this achieved what I wanted, I am bit not happy that various settings in webpack.config.js that I tried could not achieve this. Hope someone comes with right settings, so that webpack behavior is much more clearer ( to me at least). Hope this helps someone else trying to solve similar problem...