search

babel / babel-loader

📦 Babel loader for webpack
MIT License
4.83k stars 451 forks source link

Module build failed #809

Open joaorsfonseca opened 5 years ago

joaorsfonseca commented 5 years ago

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 (<anonymous>)
    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 (<anonymous>)
    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.

JLHwung commented 5 years ago

Error: .plugins[3][2] must be a string, or undefined

It seems that there is other babel configuration file in your project, could you attach the contents of .babelrc or babel.config.js? And you can looking through the item .plugins[3][2].

joaorsfonseca commented 5 years ago

I do not have babel.config.js. I've zipped .babelrs, webpack.config.js and webpack.config.production.js

Thank you!!

babel.zip

JLHwung commented 5 years ago

The .plugins[3] in your .babelrc is

["babel-plugin-root-import", {
      "rootPathSuffix": "src",
      "rootPathPrefix": "@"
    }, {
      "rootPathSuffix": "/",
      "rootPathPrefix": "~"
    }]

so the .plugins[3][2] is 

{
      "rootPathSuffix": "/",
      "rootPathPrefix": "~"
    }

It is not a valid configuration and please refer the documents of babel-plugin-root-import.

joaorsfonseca commented 5 years ago

@JLHwung thanks!!

i'm now having a missing module error.. ERROR in ./src/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module 'babel-plugin-transform-object-assign' from 'C:_TFS\EP\ConnectorV2\Dev\Connector.UI'

I've already updated react-hot-loader to the lateste version installed @babel/plugin-transform-object-assign.. What am i missing?

Thanks once again..

JLHwung commented 5 years ago

@babel/plugin-transform-object-assign is a babel 7 plugin, if you are upgrading babel 6 to babel 7, not that some package is renamed and you have to revise your .babelrc accordingly, see https://babeljs.io/docs/en/v7-migration#scoped-packages

Protip: It is an etiquette to wrap error log in three apostrophes ```, which helps people to tell error/code from plain text.