Module build failed (sometimes)

[sebastianoblom]

Bug Report

Current Behavior
Happening since I upgraded to babel 7 from babel 6.
Code is transpiled correctly upon running webpack. In watch mode I can modify the source code and babel transpiles accordingly. However, after a while/sometimes babel fails to build the module, with the following error msg;

ERROR in ... Component.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: ... Component.js: Unexpected token (46:35)
...
...
> 46 |           <h3>{place.formattedName}</h3>
     |                                    ^

There is nothing wrong with the code inputted into the transpiler. Killing webpack and run it again works fine until it happens again (without specific cause)

Input Code
Just plain simple react code that I truly know should transpile.

Expected behavior/code
Should successfully transpile in watch mode every time it builds.

Babel Configuration (.babelrc, package.json, cli command)

module.exports = function (api) {
  api.cache(true)

  const presets = [
    "@babel/preset-react",
    "@babel/preset-env",
  ]

  const plugins = [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    "@babel/plugin-proposal-object-rest-spread",
    [
      "react-intl", {
        "messagesDir": "./translations/extractedMessages/"
      }
    ]
  ]

  return {
    presets,
    plugins
  }
}

...
...
"devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/plugin-proposal-decorators": "^7.4.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.4.3",
    "@babel/preset-env": "^7.4.3",
    "@babel/preset-react": "^7.0.0",
    "@fortawesome/fontawesome-pro": "^5.3.1",
    "babel-loader": "^8.0.5",
    "babel-plugin-react-intl": "^3.0.1",
    "copy-webpack-plugin": "^5.0.2",
    "css-loader": "^2.1.1",
    "mini-css-extract-plugin": "^0.6.0",
    "node-sass": "^4.11.0",
    "nodemon": "^1.11.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "react-intl-translations-manager": "^5.0.3",
    "sass-loader": "^7.1.0",
    "serialize-javascript": "^1.5.0",
    "terser-webpack-plugin": "^1.2.3",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0",
    "webpack": "^4.30.0",
    "webpack-bundle-analyzer": "^3.0.2",
    "webpack-cli": "^3.3.0",
    "webpack-node-externals": "^1.7.2"
  }


const path = require('path')
const webpack = require('webpack')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const CopyPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const TerserJSPlugin = require('terser-webpack-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')

module.exports = env => {

  let specific = {}
  console.log('env', env)

  if (env.NODE_ENV === 'production') {
    Config = require('./config/config.prod.js')
  }
  else if (env.NODE_ENV === 'staging') {
    Config = require('./config/config.stage.js')
  }
  else if (env.NODE_ENV === 'development') {
    Config = require('./config/config.dev.js')
    specific = {
      devtool: 'cheap-module-eval-source-map',
    }
  }

  specific = Object.assign(specific, {
    plugins: [
      new webpack.DefinePlugin({
        __API__: JSON.stringify(Config.api),
        __VERSION__: JSON.stringify(Config.version),
        __RECAPTCHA_KEY__: JSON.stringify(Config.reCaptchaKey),
        __PROTOCOL__: JSON.stringify(Config.protocol),
        __HOST_LOGIN__: JSON.stringify(Config.hosts.login),
        __HOST_SE__: JSON.stringify(Config.hosts.se),
        __HOST_US__: JSON.stringify(Config.hosts.us),
        __GOOGLE_MAPS_API_KEY__: JSON.stringify(Config.googleMapsAPIKey)
      }),
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
      new CopyPlugin([{
        from: path.resolve(__dirname, 'node_modules/@fortawesome/fontawesome-pro/webfonts/**.*'),
        to: path.resolve(__dirname, 'public/fonts'),
        flatten: true,
      }]),
      new MiniCssExtractPlugin({
        filename: 'css/style.min.css',
        chunkFilename: 'css/[name]-[chunkhash].css',
      })
    ]
  })

  return Object.assign(specific, {
    entry: { bundle: './src/client.js' },
    output: {
      filename: 'js/[name].js',
      chunkFilename: 'js/[name]-[chunkhash].js',
      path: path.resolve(__dirname, 'public')
    },
    optimization: {
      minimizer: [
        new TerserJSPlugin({
          terserOptions: {
            output: {
              comments: false,
            },
          },
        }),
        new OptimizeCSSAssetsPlugin({})
      ],
    },
    resolve: {
      extensions: [ '.js' ]
    },
    module: {
      rules: [{
        test: /\.js?$/,
        exclude: /(node_modules)/,
        use: {
          loader: "babel-loader"
        }
      }, {
        test: /\.(sa|sc|c)ss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: { hmr: false },
          },
          'css-loader',
          'sass-loader',
        ],
      }]
    }
  })
}

Environment

• Babel version(s): 7.4.3
• Node/npm version: 6.10.3 / 3.10.10
• OS: OSX 10.14.1
• Monorepo: yes
• How you are using Babel: loader

Possible Solution

Additional context/Screenshots
At first I thought it happend due to node 6 /npm 3.10.30, but a colleague of mine tried the setup on his machine. No problems at all in either node 6 (nvm) or node 8.
Seems to be specific to my machine somehow.
I have double checked global npm packeges not conflicting and also have tried a clean npm install on the project so I am certain there is no old babel-6 getting picked up.

I have the same problem with my configuration for ssr as well. It runs well for some time and then gets similar problems as described above.

It is also very hard to debug this as the problem happens occasionly (after like 5-30 rebuilds)

[babel-bot]

Hey @sebastianoblom! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community that typically always has someone willing to help. You can sign-up here
for an invite.

[nicolo-ribaudo]

This might be similar to #9621

[chrisbarmonde]

Ran into this today. Been upgrading from 6 to 7, same basic environment as OP (though node 6.11.4). Essentially anything that relied on @babel/parser would "eventually fail" (which for me meant both Webpack and eslint, which would report the syntax errors directly in PyCharm). This meant initial builds were always fine and the first save or two of any given file would typically work, but it would inevitably fail with an "Unexpected token" SyntaxError. On looking through #9621, I reverted everything back to 7.3.4 (probably further back than I needed, tbh) and haven't had problems since.

[suenting]

Hello,

Just writing to say i'm also encountering the exact same issue as the original post. Where initial builds with webpack -w would be fine and after some point in time subsequent builds would fail until process is re-run

Issue was occurring on.
"@babel/cli": "7.1.0",
"@babel/core": "7.1.0",
"@babel/plugin-proposal-class-properties": "7.1.0",
"@babel/polyfill": "7.0.0",
"@babel/preset-env": "7.1.0",
"babel-loader": "8.0.2",
"webpack": "4.29.0",
"webpack-cli": "3.2.1",

I've tried upgrading everything to latest and issue still persists
"@babel/cli": "7.4.4",
"@babel/core": "7.4.5",
"@babel/plugin-proposal-class-properties": "7.4.4",
"@babel/polyfill": "7.4.4",
"@babel/preset-env": "7.4.5",
"babel-loader": "8.0.6",
"webpack": "4.32.2",
"webpack-cli": "3.3.2",

hope this helps.

[nicolo-ribaudo]

I have no idea about how to debug this issue. If anyone knows how to properly use Node's memory profiling tools, it would be appreciated 😅.

[chrisbarmonde]

Not sure exactly which version this might be fixed in (possibly via #9988?), but I've upgraded all my Babel stuff to 7.4.5 (or equivalent) and I haven't run into this problem with it.

[narutowyh]

I have the same problem.

[nicolo-ribaudo]

@narutowyh Could you share a repository which reproduces the issue?

[liuxingbaoyu]

Since this issue has been inactive for a long time, I'll close it for now, feel free to reopen it if the issue persists.