diff --git a/config/babel.config.js b/config/babel.config.js index 021863dd..82993ecc 100644 --- a/config/babel.config.js +++ b/config/babel.config.js @@ -6,6 +6,20 @@ */ const path = require('path'); +// Check if JSX transform is able +const hasJsxRuntime = (() => { + if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') { + return false; + } + + try { + require.resolve('react/jsx-runtime'); + return true; + } catch (e) { + return false; + } +})(); + module.exports = function (api) { const env = process.env.BABEL_ENV || process.env.NODE_ENV; const es5Standalone = process.env.ES5 && process.env.ES5 !== 'false'; @@ -47,7 +61,7 @@ module.exports = function (api) { development: env !== 'production' && !es5Standalone, // Will use the native built-in instead of trying to polyfill // behavior for any plugins that require one. - useBuiltIns: true + ...(!hasJsxRuntime ? {useBuiltIns: true} : {runtime: 'automatic'}) } ], ['@babel/preset-typescript'] diff --git a/config/webpack.config.js b/config/webpack.config.js index 5aa5f68a..01bf7fb6 100644 --- a/config/webpack.config.js +++ b/config/webpack.config.js @@ -47,6 +47,20 @@ module.exports = function (env) { // Sets the browserslist default fallback set of browsers to the Enact default browser support list. app.setEnactTargetsAsDefault(); + // Check if JSX transform is able + const hasJsxRuntime = (() => { + if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') { + return false; + } + + try { + require.resolve('react/jsx-runtime'); + return true; + } catch (e) { + return false; + } + })(); + // Check if TypeScript is setup const useTypeScript = fs.existsSync('tsconfig.json'); @@ -463,7 +477,13 @@ module.exports = function (env) { resolvePluginsRelativeTo: __dirname, // @remove-on-eject-begin baseConfig: { - extends: [require.resolve('eslint-config-enact')] + extends: [require.resolve('eslint-config-enact')], + rules: { + ...(!hasJsxRuntime && { + 'react/jsx-uses-react': 'warn', + 'react/react-in-jsx-scope': 'warn' + }) + } }, useEslintrc: false, // @remove-on-eject-end