babel / babel/babel-loader

Module build failed

Open
#809 5 comments 0 reactions 0 assignees View on GitHub
invalid
Dominant language
JavaScript
Stars
4.8k
Forks
456
Avg merge
9h 19m
Merged PRs (30d)
2

Description

I've uninstalled all the babel packages and install the new ones using this command:
```
npm install -D babel-loader @babel/core @babel/preset-env
```

And i'm still getting compilation errors.
```
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: .plugins[3][2] must be a string, or undefined
at assertPluginItem (C:\_TFS\EP\ConnectorV2\Dev\Connector.UI\node_modules\@babel\core\lib\config\validation\option-assertions.js:252:15)
at arr.forEach (C:\_TFS\EP\ConnectorV2\Dev\Connector.UI\node_modules\@babel\core\lib\config\validation\option-assertions.js:222:30)
at Array.forEach ()
at assertPluginList (C:\_TFS\EP\ConnectorV2\Dev\Connector.UI\node_modules\@babel\core\lib\config\validation\option-assertions.js:222:9)
at Object.keys.forEach.key (C:\_TFS\EP\ConnectorV2\Dev\Connector.UI\node_modules\@babel\core\lib\config\validation\options.js:107:5)
at Array.forEach ()
at validateNested (C:\_TFS\EP\ConnectorV2\Dev\Connector.UI\node_modules\@babel\core\lib\config\validation\options.js:83:21)
at validate (C:\_TFS\EP\ConnectorV2\Dev\Connector.UI\node_modules\@babel\core\lib\config\validation\options.js:74:10)
at file (C:\_TFS\EP\ConnectorV2\Dev\Connector.UI\node_modules\@babel\core\lib\config\config-chain.js:174:34)
at cachedFunction (C:\_TFS\EP\ConnectorV2\Dev\Connector.UI\node_modules\@babel\core\lib\config\caching.js:33:19)
@ multi react-hot-loader/patch ./src/index.js main[1]
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
index.html 576 KiB 0
Entrypoint undefined = index.html
[./node_modules/html-webpack-plugin/lib/loader.js!./src/assets/index.template.ejs] 445 bytes {0} [built]
single entry C:\_TFS\EP\ConnectorV2\Dev\Connector.UI\node_modules\html-webpack-plugin\lib\loader.js!C:\_TFS\EP\ConnectorV2\Dev\Connector.UI\src\assets\index.template.ejs
[./node_modules/lodash/lodash.js] 528 KiB {0} [built]
cjs require !!../../node_modules/lodash/lodash.js [./node_modules/html-webpack-plugin/lib/loader.js!./src/assets/index.template.ejs] 1:8-56
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
cjs require global [./node_modules/lodash/lodash.js] 1:0-41
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
cjs require module [./node_modules/lodash/lodash.js] 1:0-41
```

My **webbpack.config.js** file:
```
"use strict";

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
const webpack = require("webpack");

/**
* Get configuration for Webpack
*
* @see http://webpack.github.io/docs/configuration
* https://github.com/petehunt/webpack-howto
*/
var port = process.env.webpackDevPort || 3000;
module.exports = {
name: "browser",
entry: [
// activate HMR for React
"react-hot-loader/patch",

"./src/index.js"
],

output: {
// the output bundle
filename: "js/[name].js",

// path to the distribution folder
path: path.resolve(__dirname, "dist"),

// necessary for HMR to know where to load the hot update chunks
publicPath: "/"
},

mode: "development",
cache: true,
devtool: "eval", //"source-map" - Disabled for performance

stats: {
errorDetails: true,
colors: true,
reasons: true
},

plugins: [
// enable HMR globally
new webpack.HotModuleReplacementPlugin(),

// prints more readable module names in the browser console on HMR updates
new webpack.NamedModulesPlugin(),

// do not emit compiled assets that include errors
new webpack.NoEmitOnErrorsPlugin(),

// Provide all the global variables
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery",
jquery: "jquery",
Tether: "tether",
"window.Tether": "tether"
}),

// Provide environment variable
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("dev")
}
}),

// Build index.html
new HtmlWebpackPlugin({
title: "EP Service Center",
favicon: "./src/assets/favicon.ico",
template: "./src/assets/index.template.ejs",
inject: "body"
})
],

resolve: {
extensions: ["*", ".js", ".jsx", ".scss"],
alias: {
variables: path.resolve(
__dirname,
"src/components/containers/app/styles/_variables"
),
mixins: path.resolve(
__dirname,
"src/components/containers/app/styles/_mixins"
)
}
},

devServer: {
host: "localhost",
port: port,
historyApiFallback: true,
// respond to 404s with index.html

hot: true
// enable HMR on the server
},

module: {
rules: [
{
test: /\.css$/,
loader: "style-loader!css-loader?sourceMap!postcss-loader?sourceMap"
},
{
test: /\.less$/,
loader:
"style-loader!css-loader?sourceMap!postcss-loader?sourceMap!less-loader?sourceMap"
},
{
test: /\.scss$/,
loader:
"style-loader!css-loader?sourceMap!postcss-loader?sourceMap!sass-loader?sourceMap"
},
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader:
"url-loader?limit=10000&mimetype=application/font-woff&name=fonts/[name].[ext]"
},
{
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader:
"url-loader?limit=10000&mimetype=application/font-woff2&name=fonts/[name].[ext]"
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader:
"url-loader?limit=10000&mimetype=application/octet-stream&name=fonts/[name].[ext]"
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader:
"url-loader?limit=10000&mimetype=application/vnd.ms-fontobject&name=fonts/[name].[ext]"
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader:
"url-loader?limit=10000&mimetype=image/svg+xml&name=fonts/[name].[ext]"
},
{
test: /\.(js|jsx)$/,
// Skip any files outside of project's `src` directory
include: [path.resolve(__dirname, "src")],
loaders: ["react-hot-loader/webpack"]
},
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"]
}
}
},
{ test: /\.(jpg|png)$/, loader: "url-loader" }
]
}
};
```

Thanks.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.