在 babel.config.js 中包含 node_modules 时，当前未启用对实验性语法 'jsx' 的支持

Question

我正在尝试将我的应用程序中的所有代码从 es6 转换为 es5，因为我在使用 Safari 9 和 IE11 时遇到问题。

然而，当我在 babel.config.js 中包含 node_modules 时，出现以下错误

SyntaxError: /Users/salmanmohamed/Documents/apps/rapioUserApp/App.js: Support for the experimental syntax 'jsx' isn't currently enabled (41:5):

  39 |   //return <Text>Hii</Text>;
  40 |   return loading ? (
> 41 |     <LoadingLayout>
     |     ^
  42 |       <LoadingText>{copy.loading.texts.fonts}</LoadingText>
  43 |       <ActivityIndicator />
  44 |     </LoadingLayout>

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.

我已经尝试添加 react 预设，但我仍然遇到同样的错误，在尝试添加 plugin-syntax-jsx 时也是如此

我正在使用以下堆栈

React Native 与 EXPO React Native for web with Expo

babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    //exclude: [/\bcore-js\b/, /\bwebpack\/buildin\b/,/\bnode_modules/],
    include: /(node_modules)/,
    test: /\.(tsx?)|(js)$|(jsx)$/,

    presets: [
      ["@babel/react"],
      ["@babel/preset-typescript"],
      [
        "@babel/preset-env",
        {
          corejs: { version: 3 },
          useBuiltIns: "usage",
          targets: {
            esmodules: true,
            browsers: [
              "last 5 versions",
              "ie >= 9",
              " safari >= 7",
              "ios_saf >= 9",
            ],
          },
          loose: true,
        },
      ],
      [
        "babel-preset-expo",
        {
          corejs: { version: 3 },
          targets: {
            esmodules: true,
            browsers: [
              "last 5 versions",
              "ie >= 9",
              "safari >= 7",
              "ios_saf >= 9",
            ],
          },
        },
      ],
    ],
    plugins: [
      "@babel/plugin-proposal-class-properties",
      "@babel/plugin-transform-computed-properties",
      [
        "module-resolver",
        {
          alias: {
            "@Components": "./components",
            "@Containers": "./containers",
            "@Hooks": "./hooks",
            "@Controllers": "./controllers",
            "@Assets": "./assets",
            "@Helpers": "./helpers",
            "@Actions": "./actions",
            "@Services": "./services",
            "@Utils": "./utils",
          },
        },
      ],
    ],
  };
};

webpack.config.js

const createExpoWebpackConfigAsync = require("@expo/webpack-config");
const { getExpoBabelLoader } = require("@expo/webpack-config/utils");

const modulesToTranspile = [
  "ansi-regex",
  "ansi-styles",
  "chalk",
  "react-dev-utils",
];

module.exports = async function (env, argv) {
  env.babel = { dangerouslyAddModulePathsToTranspile: modulesToTranspile };

  const config = await createExpoWebpackConfigAsync(env, argv);
  // Customize the config before returning it.
  const loader = getExpoBabelLoader(config);
  if (loader) {
    // Modify the loader...
    loader.include("@babel/polyfill");
    loader.include("react-app-polyfill");
    loader.include("react-app-polyfill/ie9");
    loader.include("react-app-polyfill/ie11");

    loader.include("core-js");
    // console.warn(loader)
  }
  return config;
};

Answer 1

在我的 webpack 中包含插件对我有用

const createExpoWebpackConfigAsync = require("@expo/webpack-config");
const { getExpoBabelLoader } = require("@expo/webpack-config/utils");

const modulesToTranspile = [
  "ansi-regex",
  "ansi-styles",
  "chalk",
  "react-dev-utils",
  "@react-navigation",
  "styled-components",
  "node_modules",
];

module.exports = async function (env, argv) {
  env.babel = { dangerouslyAddModulePathsToTranspile: modulesToTranspile };

  const config = await createExpoWebpackConfigAsync(env, argv);
  // Customize the config before returning it.
  const loader = getExpoBabelLoader(config);
  if (loader) {
    loader.include("@babel/plugin-proposal-class-properties");
    loader.include("@babel/plugin-transform-arrow-functions");
    loader.include("@babel/plugin-transform-block-scoping");
    loader.include("@babel/plugin-transform-sticky-regex");
    loader.include("@babel/plugin-transform-unicode-regex");
    loader.include("@babel/plugin-transform-dotall-regex");
    loader.include("@babel/plugin-transform-named-capturing-groups-regex");
    loader.include("@babel/plugin-transform-runtime");

    // console.warn(loader)
  }
  return config;
};

在 babel.config.js 中包含 node_modules 时，当前未启用对实验性语法 'jsx' 的支持

Support for the experimental syntax 'jsx' isn't currently enabled when including node_modules in babel.config.js

reactjs

webpack

react-native

expo

babel-loader