React.js使用realm-web遇模块解析失败问题求助

在React.js项目中使用realm-web时遇到模块解析失败错误，相同代码在React Native中可正常运行。

报错信息 #

Module parse failed: Unexpected token (30:28)
You may need an appropriate loader to handle this file type.
| ProdDb = _context.sent;
| _context.next = 5;

return ProdDb?.mongoClient('mongodb-atlas').db('Demo').collection('Product').aggregate([{

| '$limit': 10
| }]);

相关代码文件 #

Home.js #

const [ProductList, setProductList] = useState(ProductListtype);
const GetData = async () => {
    let ProdDb = await RealmUser()
    let result = await ProdDb?.mongoClient('mongodb-atlas').db('Demo').collection('Product')
        .aggregate([{ '$limit': 10 }]);
    setProductList(result)
}
useEffect(() => { GetData() }, [])
useEffect(() => { }, [ProductList]);

RelamApp.tsx #

import * as RealmWeb from "realm-web";
const RealmApp = new Realm.App({ id: process.env.REACT_APP_RELAM_APP ? process.env.REACT_APP_RELAM_APP : "" })
const currentUser = RealmApp.currentUser
console.log("currentUser", currentUser)
const RealmUser = async () => {
    try {
        if (currentUser) return currentUser
        else {
            let credentials = await Realm.Credentials.anonymous();
            return await RealmApp.logIn(credentials);
        }
    } catch (error) {
        console.log(error)
    }

}
export default RealmUser

自行添加的配置文件 #

webpack.config.js #

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: path.resolve(__dirname, 'src/index.js'),
    output: {
        path: path.resolve(__dirname, 'output'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {

        loaders: [{
            test: /\.ts$/,
            loaders: ['ts-loader']
        },
        {
            test: /\.css$/,
            loaders: [
                'style-loader',
                'css-loader'
            ]
        }
        ]

        // rules: [{
        //     test: /\.(js|jsx)$/,
        //     exclude: /node_modules/,
        //     use: {
        //         loader: 'babel-loader'
        //     }
        // },
        // {
        //     test: /\.css$/i,
        //     use: ['style-loader', 'css-loader'],
        // }
        // ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./public/index.html",
            filename: "./index.html"
        })
    ]
}

.babelrc #

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}

package.json #

{
  "name": "shop2",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/preset-env": "^7.20.2",
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@mui/icons-material": "^5.10.14",
    "@mui/material": "^5.10.14",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/react": "^18.2.0",
    "@types/react-dom": "^18.0.9",
    "babel-preset-es2015": "^6.24.1",
    "firebase": "^9.14.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-phone-input-2": "^2.15.1",
    "react-router-dom": "^6.4.3",
    "react-scripts": "^2.1.3",
    "realm-web": "^2.0.0",
    "typescript": "^4.9.3",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build webpack-dev-server --mode development --open",
    "test": "react-scripts test webpack-dev-server --mode development --open",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  },
  "devDependencies": {
    "@types/node": "^18.11.15"
  }
}

解决方案 #

1. 升级react-scripts版本：当前使用的react-scripts@2.1.3版本过旧，不支持可选链操作符（?.），而realm-web内部依赖这类语法。执行命令升级到最新稳定版：

npm install react-scripts@latest

2. 移除自定义webpack和babel配置：create-react-app默认配置已足够处理现代JS语法，自行添加的配置会和默认配置冲突，删除src/webpack.config.js和src/.babelrc文件。
3. 修正Realm引用错误：在RelamApp.tsx中，导入的是RealmWeb但使用了Realm.Credentials，改为RealmWeb.Credentials避免报错：

let credentials = await RealmWeb.Credentials.anonymous();

4. 重装依赖并重启项目：

rm -rf node_modules package-lock.json
npm install
npm start

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