Babel-loader: env presets in .babelrc seem to be ignored starting 6.3.1

Created on 16 Feb 2017  路  7Comments  路  Source: babel/babel-loader

I'm submitting a bug report

Webpack Version:
1.14.0

Babel Core Version:
6.23.1

Babel Loader Version:
6.3.1

Please tell us about your environment:
macOS Sierra 10.12.2

Current behavior:
Even when I include the "react" as a presets, with .babelrc like

{
  "env": {
    "development": {
      "presets": ["es2015", "react"],
...

it doesn't seem to be used, got errors like Module build failed: SyntaxError: Unexpected token (33:2) complaining about the JSX syntax.

I noticed this is a new behavior in version 6.3.1. With everything else being the same, if one simply npm install babel-loader 6.3.0, the error will be gone.

Also note that the non-environment specific settings are fine, for example, .babelrc like this works:

{
  "presets": ["es2015", "react"],
  "env": {
    "development": {      
...

Expected/desired behavior:
The presets specified in the "env" section in .babelrc are used.

Most helpful comment

I released 6.3.2 with the fix, I'm still not entirely sure why this happened.

All 7 comments

I am also having all kind of weirdness since 6.3.1. It seems this PR https://github.com/babel/babel-loader/pull/379 is introducing a serious regression.

Noticed this as well, where plugins defined in "env" would not have their settings applied, which broke our test setup.

Webpack version:
2.2.1

Babel core version:
6.23.0

Babel loader version:
6.3.1

Please tell us about your environment:
Ubuntu 16.04.1 LTS 64-bit

Current behavior:
A .babelrc file with different options for different NODE_ENV, for instance

{
  "presets": [
    "latest"
    "react"
  ],
  "env": {
    "coverage": {
      "plugins": [
        "rewire",
        ["istanbul", {
          "exclude": [
            "src/test"
          ]
        }],
        ["root-import", [{
          "rootPathSuffix": "src/main"
        }, {
          "rootPathPrefix": "@",
          "rootPathSuffix": "src/test"
        }]]
      ]
    },
    "test": {
      "plugins": [
        "rewire",
        ["root-import", [{
          "rootPathSuffix": "src/main"
        }, {
          "rootPathPrefix": "@",
          "rootPathSuffix": "src/test"
        }]]
      ]
    }
  }
}

Options for NODE_ENV=coverage and NODE_ENV=test are not applied, leading to errors when root-import and rewire plugins are not applied.

Expected/desired behavior:
The presets specified in the "env" section in .babelrc are used.

Workaround:
Use babel-loader 6.3.0

I released 6.3.2 with the fix, I'm still not entirely sure why this happened.

I'm in 7.0.0 of babel-loader but 6.23.0 of babel-runtime but I still experience issues like this

{
  "presets": [
    "next/babel",
    "es2015",
    "stage-0"
  ],
  "plugins": [
    [
      "wrap-in-js",
      {
        "extensions": ["css$", "scss$"]
      }
    ],
    [
      "styled-components",
      {
        "ssr": true,
        "displayName": true
      }
    ],
    "transform-decorators-legacy",
  ],
  "env": {
    "development": {
      "plugins": ["inline-dotenv"]
    },
    "production": {
      "plugins": ["transform-inline-environment-variables"]
    }
  }
}

Somehow when I run locally, "inline-dotenv" is not called.
But it starts working if I move it outside "env" and into the normal list of plugins

How does your webpack config look like?

I'm using nextjs so they have their own default version, and this is my custom webpack config.

const path = require('path')
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin')

module.exports = {
  webpack: (config, { dev }) => {
    /**
     * Install and Update our Service worker 
     * on our main entry file :)
     * Reason: https://github.com/ooade/NextSimpleStarter/issues/32
     */
    const oldEntry = config.entry

    config.entry = () =>
      oldEntry().then(entry => {
        entry['main.js'].push(path.resolve('./utils/offline'))
        entry['main.js'].unshift('babel-polyfill')
        return entry
      })

    /* Enable only in Production */
    if (!dev) {
      // Service Worker
      config.plugins.push(
        new SWPrecacheWebpackPlugin({
          cacheId: 'next-ss',
          filename: 'sw.js',
          minify: true,
          staticFileGlobsIgnorePatterns: [/\.next\//],
          staticFileGlobs: [
            'static/**/*', // Precache all static files by default
          ],
          runtimeCaching: [
            // Example with different handlers
            {
              handler: 'fastest',
              urlPattern: /[.](png|jpg|css)/,
            },
            {
              handler: 'networkFirst',
              urlPattern: /^http.*/, //cache all files
            },
          ],
        })
      )
    }

    config.module.rules.push(
      {
        test: /\.(css|scss)/,
        loader: 'emit-file-loader',
        options: {
          name: 'dist/[path][name].[ext]',
        },
      },
      {
        test: /\.css$/,
        use: [
          'babel-loader',
          'raw-loader',
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: 'inline',
            },
          },
        ],
      },
      {
        test: /\.s(a|c)ss$/,
        use: [
          'babel-loader',
          'raw-loader',
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: 'inline',
            },
          },
          {
            loader: 'sass-loader',
            options: {
              includePaths: ['styles', 'node_modules']
                .map(d => require('path').join(__dirname, d))
                .map(g => require('glob').sync(g))
                .reduce((a, c) => a.concat(c), []),
            },
          },
        ],
      },
      {
        test: /\.(graphql|gql)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'emit-file-loader',
            options: {
              name: 'dist/[path][name].[ext]',
            },
          },
          'babel-loader',
          'graphql-tag/loader',
        ],
      }
    )

    return config
  },
}

Upon more inspection, it seems like it might be caused by babel-loader caching. Removing the cache directory fixed it.

Was this page helpful?
0 / 5 - 0 ratings