-
|
Hey everyone, I'm working on a Nx React project with Webpack 5 and Babel and I need to keep support for an old version of Chrome (v79) but I'm not really used to Babel and what I currently have doesn't seems to work properly. I'm looking trough the web to find documentation but it's a confusing to me, here is what I have currently if someone can tell me what's wrong: // babel.config.json
{
"babelrcRoots": ["*"],
"presets": [
[
"@babel/preset-env",
{
"corejs": "3.36.1",
"modules": "commonjs",
"useBuiltIns": "entry",
"loose": true
}
],
"@babel/preset-react",
"@babel/preset-typescript",
"@nx/react/babel",
"@nx/js/babel"
],
"plugins": [
"@babel/plugin-transform-runtime",
"@babel/plugin-transform-arrow-functions",
"@babel/plugin-transform-regenerator",
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-transform-class-properties", { "loose": true }],
"@babel/plugin-transform-nullish-coalescing-operator",
"@babel/plugin-transform-optional-chaining"
]
}// package.json
"@babel/core": "^7.24.7",
"@babel/plugin-syntax-decorators": "^7.24.7",
"@babel/plugin-transform-arrow-functions": "^7.24.7",
"@babel/plugin-transform-class-properties": "^7.24.7",
"@babel/plugin-transform-nullish-coalescing-operator": "^7.24.7",
"@babel/plugin-transform-optional-chaining": "^7.24.7",
"@babel/plugin-transform-regenerator": "^7.24.7",
"@babel/plugin-transform-runtime": "^7.24.7",
"@babel/preset-env": "^7.24.7",
"@babel/preset-react": "^7.24.7",
"@babel/preset-typescript": "^7.24.7",My webpack config is split into a common part and a per app specific file like so: // webpack.common.cjs
/**
* @typedef {Object} CustomOptions
* @property {string} appName The name of the app currently being built
*/
/**
* Generate the plugins array
* @param {import('@nx/webpack/src/plugins/nx-webpack-plugin/nx-webpack-plugin-options').NxWebpackPluginOptions & CustomOptions} options
* @returns {import('webpack').Configuration['plugins']}
*/
function plugins(options) {
return [
new NxWebpackPlugin({
babelUpwardRootMode: true,
compiler: 'babel',
deleteOutputPath: process.env.NODE_ENV !== 'production',
extractCss: true,
extractLicenses: true,
fileReplacements: [
{
replace: './src/environments/environment.ts',
with: `./src/environments/environment.${process.env.NODE_ENV === 'production' ? 'prod' : 'dev'}.ts`,
},
],
index: './src/index.html',
main: './src/main.tsx',
namedChunks: process.env.NODE_ENV !== 'production',
optimization: process.env.NODE_ENV === 'production',
outputHashing: 'all',
polyfills: './src/polyfills.ts',
progress: process.env.NODE_ENV !== 'production',
sourceMap: process.env.NODE_ENV !== 'production',
tsConfig: './tsconfig.app.json',
vendorChunk: process.env.NODE_ENV === 'production',
verbose: process.env.NODE_ENV !== 'production',
stylePreprocessorOptions: {
includePaths: ['.'],
},
...options,
}),
// ...
];
}
module.exports = {
// ...
plugins,
// ...
};And then a per specific app: // apps/example/webpack.config.cjs
/**
* @type {import('webpack').Configuration}
*/
module.exports = {
// ...
plugins: [
plugins({
appName: 'st/dist',
assets: [
'./src/favicon.ico',
'./src/iframe.html',
{
glob: '**/*',
input: './src/assets',
output: './../assets',
},
{
glob: '**/*',
input: './src/config',
output: './config',
},
],
styles: ['./src/styles.scss'],
}),
].flat(),
};But when I'm building my apps and opening them trough Chrome 79 I still get the following errors: What's wrong ? ^^" |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 2 replies
-
|
I recommend asking to Nx folks since they probably have more experience with using Babel and Nx together than we do. Looking at their docs, it seems like they require you to add a Your Babel config file looks correct -- you can even remove the various |
Beta Was this translation helpful? Give feedback.
-
|
Thanks, alas adding those |
Beta Was this translation helpful? Give feedback.
-
|
Found out: nrwl/nx#26407 (comment) |
Beta Was this translation helpful? Give feedback.
Found out: nrwl/nx#26407 (comment)