transpile node_modules on server side

[gaurav5430]

What version of Next.js are you using?

10.0.7

What version of Node.js are you using?

12.18.3

What browser are you using?

Chrome

What operating system are you using?

Mac

How are you deploying your application?

AWS

Describe the Bug

extending my babel.config.js with next/babel , and extending my webpack config to include a package from node_modules, does not transpile the package on the server side / node.

I see that there is a solution to use next-transpile-modules, but I am just not sure why the current setup would not work.
I use the setup in other browser only projects to transpile a particular node module through webpack / babel config.

Expected Behavior

I would expect the babel loader to correctly transpile the node_modules package for usage in server / node.js, since i am using next/babel

To Reproduce

// babel config.js

module.exports = {
  presets: [
    [
      'next/babel',
      {
        useBuiltIns: 'entry',
        corejs: '3',
      },
    ],
    '@babel/preset-typescript',
    '@babel/preset-react',
  ],
  plugins: [
    [
      'react-css-modules',
      {
        autoResolveMultipleImports: true,
        generateScopedName: '[name]__[local]__[hash:base64:5]',
        handleMissingStyleName: 'warn',
        webpackHotModuleReloading: true,
      },
    ],
    '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-proposal-object-rest-spread',
    '@babel/plugin-proposal-optional-chaining',
    '@babel/plugin-proposal-nullish-coalescing-operator',
  ],
};

custom webpack babel loader config:

rules: [
      {
        test: /\.(js|tsx)$/,
        include: [
          path.resolve(__dirname, 'node_modules/@packageToInclude/'),
          path.resolve(__dirname, '/src'),
        ],
        use: {
          loader: 'babel-loader',
        },
      },
...
...

[jamsinclair]

@gaurav5430 this is to be expected. You'll want to look into the third party library https://github.com/martpie/next-transpile-modules. Best of luck!

[gaurav5430]

why is this expected?

i have been depending on that library till now, but due to recent changes it has become difficult for me to continue using that library

which is why I am just trying to understand why it can't work like the above config

[jamsinclair]

I'm no Next.js expert 😅 , but it heavily configures the webpack config to help build the optimised bundles. You'll need to override or augment these existing configs to support your use case.

You can see that in the source code for the next-transpile-modules library.

Likely you'll need to make use of the internal next babel loader and play with the webpack externals config. Which will start to get quite hacky.

due to recent changes it has become difficult for me to continue using that library

The author seems to be doing great work, if you're having issues might be worth starting an issue there! 😸