Tranpile node_module package with webpack (gatsby 3)

[DevSide]

Description

I expect my package node_modules/@my-package containing React components to be transpiled using the gatsby preset like the rest of the project.
The 2nd way worked on Gatsby 2.

On Gatsby 3, both ways lead to an error during the build:

ERROR #98123  WEBPACK
Generating JavaScript bundles failed
.../node_modules/@my-package/my-component.js : Support for the experimental syntax 'jsx'

Input code

function onCreateWebpackConfig ({ getConfig, actions }) {
  const webpackConfig = getConfig()

  // First try: edit the existing rule
  webpackConfig.module.rules = webpackConfig.module.rules.map(rule => {
     if (rule.test && rule.test.toString() === `/\\.(js|mjs|jsx)$/`) {
       const include = rule.include.bind(rule)
       rule.include = modulePath => /node_modules\/@my-package/.test(modulePath) || include(modulePath)
     }

     return rule
  }

  // Second try: append a new rule
  // This works on Gatsby 2
  webpackConfig.module.rules.unshift({
    ...loaders.js(),
    test: /\.js$/,
    exclude: modulePath => /node_modules/.test(modulePath) && !/node_modules\/@my-package/.test(modulePath)
  })

  actions.replaceWebpackConfig(webpackConfig)
}

Environment

• gatsby 3.4.1
• node 14.16.0

[vladar]

@DevSide I don't think it is a bug per se. It is likely that webpack config has changed slightly but you should still be able to override it in onCreateWebpackConfig any way you need. It is just a matter of figuring out the right override for the config.

Also, do you have any example project to play with?