webpack picks up .babelrc on netlify deploy but not locally?

[omonk]

Whilst trying to deploy on Netlify I get an error relating to babel-preset-gatsby being loaded by webpack.

4:51:44 PM: Module build failed (from /opt/build/repo/node_modules/babel-loader/lib/index.js):
4:51:44 PM: Error: [BABEL] /opt/build/repo/src/functions/meetup.js: `babel-preset-gatsby` has been loaded, which consumes config generated by the Gatsby CLI. Set `NODE_ENV=test` to bypass, or run `gatsby build` first. (While processing: "/opt/build/repo/node_modules/babel-preset-gatsby/index.js")

Makes total sense but can anyone tell me why I can't replicate this locally?

I've tried setting NODE_ENV to 'production' locally but not getting it.

"build": "run-p build:**",
"build:app": "gatsby build",
"build:lambda": "netlify-lambda -c webpack.functions.js build src/functions",

webpack config:

const webpack = require('webpack')
const nodeExternals = require('webpack-node-externals')

module.exports = {
  externals: [nodeExternals()],
  mode: 'production',
  plugins: [new webpack.DefinePlugin({ 'global.GENTLY': false })]
}

.babelrc

{
  "presets": ["babel-preset-gatsby"],
  "env": {
    "test": {
      "plugins": ["require-context-hook"]
    }
  }
}

any ideas?

[swyxio]

i gotta admit the babel resolution logic might have some mismatch here vs what netlify does in production. no time to look into this right now but thank you for filing and i hope someone can dive in.

this is possibly (but not definitely) the relevant code https://github.com/netlify/netlify-lambda/blob/master/lib/build.js#L18-L32

[omonk]

What kind of things do you think would be different in local vs netlify?

[omonk]

For reference this issue touches on the same thing I'm up against: #34

What I'm experiencing now is that the webpack merge produces a rules config that I'm not sure will play nicely with what I'm trying to do, effectively having babel-loader configured twice?

Using the config from #34

webpack.functions.js

module.exports = {
  externals: [nodeExternals()],
  mode: 'production',
  plugins: [new webpack.DefinePlugin({ 'global.GENTLY': false })],
  module: {
    rules: [
      {
        test: /\.js?$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            babelrc: false
          }
        }
      }
    ]
  }
}

goes on to produce these rules in the final webpack config

final module section in webpack config after merge:

....
"module": {
    "rules": [
      {
        "test": {},
        "exclude": {},
        "use": {
          "loader": "/Users/ollie/sites/netlify-lambda/node_modules/babel-loader/lib/index.js",
          "options": {
            "cacheDirectory": true
          }
        }
      },
      {
        "test": {},
        "exclude": {},
        "use": {
          "loader": "babel-loader",
          "options": {
            "babelrc": false
          }
        }
      }
    ]
  },
....

[swyxio]

thank you @omonk 🙇🏼‍♂️

[swyxio]

we added an option in v1.4.10 in PR #154

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.