React Native Web项目加动画遇JSX语法支持错误求解决

在 React Native Web 项目中使用 react-native-reanimated 添加动画时，触发错误提示：

Support for the experimental syntax 'jsx' isn't currently enabled

已尝试常规解决方案但无效，以下是项目配置文件：

package.json 文件 #

{
  "name": "animation",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@react-spring/native": "^9.6.1",
    "@react-spring/web": "^9.6.1",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "babel-polyfill": "^6.26.0",
    "lodash": "^4.17.21",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-native-reanimated": "^2.14.4",
    "react-native-web": "^0.18.10",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-syntax-jsx": "^7.18.6",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "babel-loader": "^9.1.2",
    "url-loader": "^4.1.1",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1"
  }
}

webpack.config.js 文件 #

// web/webpack.config.js

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const appDirectory = path.resolve(__dirname, "../");

// This is needed for webpack to compile JavaScript.
// Many OSS React Native packages are not compiled to ES5 before being
// published. If you depend on uncompiled packages they may cause webpack build
// errors. To fix this webpack can be configured to compile to the necessary
// `node_module`.
const babelLoaderConfiguration = {
  test: /\.js$/,
  // Add every directory that needs to be compiled by Babel during the build.
  include: [
    path.resolve(appDirectory, "index.web.js"),
    path.resolve(appDirectory, "src"),
    path.resolve(appDirectory, "node_modules/react-native-uncompiled"),
  ],
  use: {
    loader: "babel-loader",
    options: {
      cacheDirectory: true,
      // The 'metro-react-native-babel-preset' preset is recommended to match React Native's packager
      presets: [
        "@babel/preset-react",
        "module:metro-react-native-babel-preset",
      ],
      // Re-write paths to import only the modules needed by the app
      plugins: [
        "@babel/plugin-syntax-jsx",
        "react-native-web",
        "react-native-reanimated/plugin",
      ],
    },
  },
};

// This is needed for webpack to import static images in JavaScript files.
const imageLoaderConfiguration = {
  test: /\.(gif|jpe?g|png|svg)$/,
  use: {
    loader: "url-loader",
    options: {
      name: "[name].[ext]",
      esModule: false,
    },
  },
};

module.exports = {
  entry: [
    // load any web API polyfills
    path.resolve(appDirectory, "polyfills-web.js"),
    // your web-specific entry file
    path.resolve(appDirectory, "index.web.js"),
  ],

  // configures where the build ends up
  output: {
    filename: "bundle.web.js",
    path: path.resolve(appDirectory, "dist"),
  },

  // ...the rest of your config
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "./index.html",
    }),
    new webpack.EnvironmentPlugin({ JEST_WORKER_ID: null }),
    new webpack.DefinePlugin({ process: { env: {} } }),
  ],

  module: {
    rules: [babelLoaderConfiguration, imageLoaderConfiguration],
  },

  resolve: {
    // This will only alias the exact import "react-native"
    alias: {
      "react-native$": "react-native-web",
    },
    // If you're working on a multi-platform React Native app, web-specific
    // module implementations should be written in files using the extension
    // `.web.js`.
    extensions: [".web.js", ".js"],
  },
};

解决方案 #

针对该问题，可尝试以下调整：

• 调整 Babel 预设顺序
  在 webpack.config.js 的 babelLoaderConfiguration 中，将 metro-react-native-babel-preset 移至 @babel/preset-react 之前，避免 Metro 预设覆盖 React 预设的 JSX 处理配置：

  presets: [
    "module:metro-react-native-babel-preset",
    "@babel/preset-react"
  ],
  

• 添加 react-native-reanimated 到 Babel 编译范围
  当前配置未让 Babel 处理 react-native-reanimated 库，该库内部可能包含未编译的 JSX 代码，需将其加入 include 列表：

  include: [
    path.resolve(appDirectory, "index.web.js"),
    path.resolve(appDirectory, "src"),
    path.resolve(appDirectory, "node_modules/react-native-uncompiled"),
    path.resolve(appDirectory, "node_modules/react-native-reanimated")
  ],
  

• 兼容 JSX 文件后缀
  如果项目中存在 .jsx 后缀的文件，需更新 webpack 的解析规则和 Babel loader 匹配规则：

  // webpack resolve.extensions
  extensions: [".web.js", ".js", ".web.jsx", ".jsx"],
  // Babel loader test
  test: /\.(js|jsx)$/,
  

• 清理缓存重启服务
  执行命令清理缓存，避免旧配置残留：

  rm -rf node_modules/.cache
  npm start -- --reset-cache
  

内容的提问来源于stack exchange，提问作者Rajat