-
|
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"
]
}// apps/example/.babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-typescript"]
}// 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 ? ^^" Note I already asked this question on the babel repository but they had no clue what could go wrong as their not used to Nx |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
|
Found out what the issue was, in the NxWebpackPlugin options it should be: optimization: {
scripts: false,
styles: process.env.NODE_ENV === 'production',
},Instead of: optimization: process.env.NODE_ENV === 'production', |
Beta Was this translation helpful? Give feedback.
Found out what the issue was, in the NxWebpackPlugin options it should be:
Instead of: