diff --git a/packages/js/.eslintrc.json b/packages/js/.eslintrc.json index 75ddd8453785f..c9137d85c3c1d 100644 --- a/packages/js/.eslintrc.json +++ b/packages/js/.eslintrc.json @@ -45,7 +45,6 @@ // require.resolve is used for these packages "source-map-support", "@babel/core", - "@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-decorators", "@babel/plugin-transform-runtime", "@babel/preset-env", diff --git a/packages/js/babel.ts b/packages/js/babel.ts index 373361dcd21e1..13db89cae9379 100644 --- a/packages/js/babel.ts +++ b/packages/js/babel.ts @@ -1,4 +1,5 @@ import { dirname } from 'path'; +import { logger } from '@nx/devkit'; /* * Babel preset to provide TypeScript support and module/nomodule for Nx. @@ -10,6 +11,9 @@ export interface NxWebBabelPresetOptions { decoratorsBeforeExport?: boolean; legacy?: boolean; }; + loose?: boolean; + /** @deprecated Use `loose` option instead of `classProperties.loose` + */ classProperties?: { loose?: boolean; }; @@ -30,9 +34,15 @@ module.exports = function (api: any, options: NxWebBabelPresetOptions = {}) { (caller) => caller?.emitDecoratorMetadata ?? true ); - // Determine settings for `@babel/plugin-proposal-class-properties`, + // Determine settings for `@babel//babel-plugin-transform-class-properties`, // so that we can sync the `loose` option with `@babel/preset-env`. - const classProperties = options.classProperties ?? { loose: true }; + // TODO(v18): Remove classProperties since it's no longer needed, now that the class props transform is in preset-env. + const loose = options.classProperties?.loose ?? options.loose ?? true; + if (options.classProperties) { + logger.warn( + `Use =\`loose\` option instead of \`classProperties.loose\`. The \`classProperties\` option will be removed in Nx 18` + ); + } return { presets: [ @@ -55,7 +65,7 @@ module.exports = function (api: any, options: NxWebBabelPresetOptions = {}) { // Exclude transforms that make all code slower exclude: ['transform-typeof-symbol'], // This must match the setting for `@babel/plugin-proposal-class-properties` - loose: classProperties.loose, + loose, }, ], [ @@ -89,10 +99,6 @@ module.exports = function (api: any, options: NxWebBabelPresetOptions = {}) { require.resolve('@babel/plugin-proposal-decorators'), options.decorators ?? { legacy: true }, ], - [ - require.resolve('@babel/plugin-proposal-class-properties'), - classProperties, - ], ].filter(Boolean), overrides: [ // Convert `const enum` to `enum`. The former cannot be supported by babel diff --git a/packages/js/package.json b/packages/js/package.json index 5baac1d301a88..8a3230153a6de 100644 --- a/packages/js/package.json +++ b/packages/js/package.json @@ -31,7 +31,6 @@ "executors": "./executors.json", "dependencies": { "@babel/core": "^7.22.9", - "@babel/plugin-proposal-class-properties": "^7.18.6", "@babel/plugin-proposal-decorators": "^7.22.7", "@babel/plugin-transform-runtime": "^7.22.9", "@babel/preset-env": "^7.22.9", diff --git a/packages/react/babel.ts b/packages/react/babel.ts index d943a436b710f..85cf240fec4ab 100644 --- a/packages/react/babel.ts +++ b/packages/react/babel.ts @@ -11,6 +11,9 @@ interface NxReactBabelOptions { decoratorsBeforeExport?: boolean; legacy?: boolean; }; + loose?: boolean; + /** @deprecated Use `loose` option instead of `classProperties.loose` + */ classProperties?: { loose?: boolean; };