Webpack2 couldn't find preset es2015 or react

Question

I have a folder with my modules and my webpack.config in my project.

My webpack.config:

entry: {

    hmr: [
        'webpack-dev-server/client?http://localhost:8080',
        'webpack/hot/only-dev-server'
        // 'webpack/hot/dev-server'
    ],
    app: PATHS.app + '/desktop.js',
    style: PATHS.style

    },
    output: {
        path: PATHS.build,
        publicPath: '/',
        filename: '[name].js',
        sourceMapFilename: '[file].map',
        devtoolModuleFilenameTemplate: 'webpack:///[resource-path]?[loaders]'
    },

    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: '/node_modules/',
                use: 'eslint-loader',
                enforce: 'pre',
                include: PATHS.app
            },
            {
                test: /\.(js|jsx)$/, 
                exclude: /node_modules/, 
                loader: 'babel-loader',
                options: {
                    presets: ['es2015', 'react' ],
                    cacheDirectory: true 
                }
            },
            {
                test: /\.json$/, 
                loader: "json-loader"
            },
            {
                test: /\.hbs/, 
                loader: "handlebars-template-loader"
            }
        ]
    }, 
    resolve: {
        modules: [
            "node_modules",
            path.resolve(__dirname, "node_modules"),
            path.resolve(__dirname, "../../../../../myModules/"),
        ],
        alias: {
            'react': 'preact-compat',
            'react-dom': 'preact-compat'
        },
        extensions: [".js", ".json", ".jsx", ".css", ".scss", ".hbs"],
    },

My package.json:

{
  "name": "ETU_ETU",
  "version": "1.0.0",
  "scripts": {
     "start": "nodemon --watch webpack.config.js --exec \"webpack-dev-server --env development\"",
     "build": "webpack --env production",
     "stats": "webpack --env production --profile --json > stats.json",
    "test:lint": "eslint . --ext .js --ext .jsx || true"
  },
  "devDependencies": {
    "babel-core": "^6.21.0",
    "babel-eslint": "^7.1.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-module-resolver": "^2.4.0",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-0": "^6.16.0",
    "clean-webpack-plugin": "^0.1.14",
    "compression-webpack-plugin": "^0.3.2",
    "css-loader": "^0.26.1",
    "eslint": "^3.12.2",
    "eslint-loader": "^1.6.1",
    "eslint-plugin-react": "^6.8.0",
    "extract-text-webpack-plugin": "^2.0.0-beta.4",
    "friendly-errors-webpack-plugin": "^1.1.2",
    "handlebars-loader": "^1.4.0",
    "handlebars-template-loader": "^0.7.0",
    "html-loader": "^0.4.4",
    "html-webpack-plugin": "^2.24.1",
    "json-loader": "^0.5.4",
    "node-sass": "^4.1.0",
    "npm-install-webpack-plugin": "^4.0.4",
    "purifycss-webpack-plugin": "^2.0.3",
    "required-loader": "^1.1.11",
    "sass-loader": "^4.1.0",
    "style-loader": "^0.13.1",
    "svg-sprite-loader": "^0.1.2",
    "webpack": "^2.2.0-rc.1",
    "webpack-dev-server": "^2.2.0-rc.0",
    "webpack-merge": "^1.1.2",
    "webpack-notifier": "^1.5.0"
  },
  "dependencies": {
    "domready": "^1.0.8",
    "handlebars": "^4.0.6",
    "lodash": "^4.17.2"
  }
}

And in my module, my package.json:

{
  "name": "myModule1",
  "version": "2.0.0",
  "description": "",
  "main": "src/index.js",
  "devDependencies": {
    "cz-conventional-changelog": "^1.2.0"
  },
  "config": {
    "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"
    }
  }
}

In my desktop.js, when I import myModule1. I have this error: Module build failed: Error: Couldn't find preset "es2015" relative to directory "/space/www/myModules/myModule1/src"

If I remove es2015 preset, I have the same problem with react.

So, I don't understand, because, I use resolve.module.

Do you have a solution?

Thanks,

Can you set up a standalone project so I can have a look? It might be neater to maintain Babel configuration through `.babelrc` and that alone could fix it. — Juho Vepsäläinen, Jan 09 '17 at 16:02
@JuhoVepsäläinen, Yes I created an example here: [https://github.com/Tsouef/webpack-sample](https://github.com/Tsouef/webpack-sample) You have a website, and a different folder with npm module. If i put my preset in .babelrc, es2015 is working but after I have an error unexpected token with react. — Thibault Souëf, Jan 14 '17 at 17:51
I found a potential fix although this isn't very cool. It started working after I moved `.babelrc` to the project root (I had to install Babel presets there too). Another way to achieve the same is to `require.resolve('babel-preset-react')` each preset over using a string. This is problematic for ES2015 since it resolves to a path and you need to customize it. I hope either works for you. — Juho Vepsäläinen, Jan 14 '17 at 18:45
Yeah, It's working. But I don't understand why I need to add presets in the project root of my Modules. I have already node_modules in my workflow .And I use resolveLoader for that.. — Thibault Souëf, Jan 15 '17 at 01:08
It feels like something Babel/babel-loader related. It could be a bug in either even. Pretty strange. I guess Babel resolution breaks apart otherwise (not designed to work this way). — Juho Vepsäläinen, Jan 15 '17 at 04:03

Webpack2 couldn't find preset es2015 or react

0 Answers0