transpile node_modules on server side #26771
Description
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',
},
},
...
...