设置 firebase 时反应 js 无法解析 worker_threads

Question

我在基于 reacjs 的应用程序中工作，我想添加 firebase 来存储简单数据，所以我遵循了一些 firebase 教程，因为我不熟悉它。但是，当我在设置 firebase 后尝试我的代码时，我的控制台中出现了 43 个不同的错误。现在我设法摆脱了其中的大部分（polyfill 的问题），但我无法绕过最后一个。

我收到这个错误，似乎问题与 worker_threads 有关，但我不知道它们来自哪里以及如何解决它，我看到了一些关于节点工作者的教程，但我仍然不明白我必须传递什么样的数据或如何设置它。

Compiled with problems:

WARNING in ./node_modules/jest-worker/build/WorkerPool.js 22:4-29

Module not found: Error: Can't resolve 'worker_threads' in 'C:\Users\{my_path}\node_modules\jest-worker\build'


WARNING in ./node_modules/jest-worker/build/base/BaseWorkerPool.js 111:19-46

Critical dependency: the request of a dependency is an expression


WARNING in ./node_modules/jest-worker/build/index.js 68:19-38

Critical dependency: the request of a dependency is an expression


WARNING in ./node_modules/jest-worker/build/workers/processChild.js 89:15-28

Critical dependency: the request of a dependency is an expression


WARNING in ./node_modules/jest-worker/build/workers/processChild.js 105:15-28

Critical dependency: the request of a dependency is an expression


WARNING in ./node_modules/loader-runner/lib/loadLoader.js 19:16-36

Critical dependency: the request of a dependency is an expression


WARNING in ./node_modules/terser-webpack-plugin/dist/minify.js 43:118-125

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted


WARNING in ./node_modules/terser-webpack-plugin/dist/utils.js 528:18-51

Module not found: Error: Can't resolve 'uglify-js/package.json' in 'C:\Users\alexg\Desktop\Apuntes\Programación\Challenge-React\node_modules\terser-webpack-plugin\dist'


WARNING in ./node_modules/terser-webpack-plugin/dist/utils.js 604:18-51

Module not found: Error: Can't resolve '@swc/core/package.json' in 'C:\Users\alexg\Desktop\Apuntes\Programación\Challenge-React\node_modules\terser-webpack-plugin\dist'


WARNING in ./node_modules/terser-webpack-plugin/dist/utils.js 685:18-49

Module not found: Error: Can't resolve 'esbuild/package.json' in 'C:\Users\alexg\Desktop\Apuntes\Programación\Challenge-React\node_modules\terser-webpack-plugin\dist'


WARNING in ./node_modules/webpack/lib/debug/ProfilingPlugin.js 26:13-33

Module not found: Error: Can't resolve 'inspector' in 'C:\Users\alexg\Desktop\Apuntes\Programación\Challenge-React\node_modules\webpack\lib\debug'


WARNING in ./node_modules/webpack/lib/serialization/ObjectMiddleware.js 647:9-25

Critical dependency: the request of a dependency is an expression


ERROR in ./src/pages/seeker.js 24:0-25

Module not found: Error: Can't resolve 'babel-polyfill' in 'C:\Users\alexg\Desktop\Apuntes\Programación\Challenge-React\src\pages'


ERROR in ./node_modules/jest-worker/build/workers/ChildProcessWorker.js 9:15-39

Module not found: Error: Can't resolve 'child_process' in 'C:\Users\alexg\Desktop\Apuntes\Programación\Challenge-React\node_modules\jest-worker\build\workers'


ERROR in ./node_modules/jest-worker/build/workers/NodeThreadsWorker.js 29:15-40

Module not found: Error: Can't resolve 'worker_threads' in 'C:\Users\alexg\Desktop\Apuntes\Programación\Challenge-React\node_modules\jest-worker\build\workers'


ERROR in ./node_modules/jest-worker/build/workers/messageParent.js 19:39-64

Module not found: Error: Can't resolve 'worker_threads' in 'C:\Users\alexg\Desktop\Apuntes\Programación\Challenge-React\node_modules\jest-worker\build\workers'


ERROR in ./node_modules/terser-webpack-plugin/dist/utils.js 490:6-26

Module not found: Error: Can't resolve 'uglify-js' in 'C:\Users\alexg\Desktop\Apuntes\Programación\Challenge-React\node_modules\terser-webpack-plugin\dist'


ERROR in ./node_modules/terser-webpack-plugin/dist/utils.js 568:14-34

Module not found: Error: Can't resolve '@swc/core' in 'C:\Users\alexg\Desktop\Apuntes\Programación\Challenge-React\node_modules\terser-webpack-plugin\dist'


ERROR in ./node_modules/terser-webpack-plugin/dist/utils.js 646:18-36

Module not found: Error: Can't resolve 'esbuild' in 'C:\Users\alexg\Desktop\Apuntes\Programación\Challenge-React\node_modules\terser-webpack-plugin\dist'

这是我正在使用的 React 组件，我认为问题不在于此，但无论如何我会尽我所能分享，以便您能帮助我。该组件从表单中获取一些数据并将其推送到 firebase 实时数据库。

我没有使用 create-react-app，所以它与该模块的错误无关。

import React, {useState, useEffect} from "react";
import { Navigate } from 'react-router-dom';
import {firebase} from "../../firebase-config";

const db = firebase.database()

const addToTeam = (hero) => {
    const [goHome, setGoHome] = useState(false)
    const prevTeam = db.ref("team") ? db.ref("team") : [];

    const onClick = (e) => {
        const newTeam = prevTeam.push();
        newTeam.set({
            id : hero.id,
            name : hero.name,
            intelligence : hero.intelligence,
            strenght : hero.strenght,
            speed : hero.speed,
            durability : hero.durability,
            power : hero.power,
            combat : hero.combat
        })
        
        
        localStorage.setItem("addHeroAction", false);
        //setGoHome({ goHome : true})
    }
    

    return(
        <div>
            <button onClick={onClick}>Add to my team</button>
            {goHome && <Navigate to="/home"/> }
        </div>
    )
};

const deleteFromTeam = (hero) => {
    const onClick = (e) =>{
        e.preventDefault();
    }
    return(
        <div>
            <button onClick={onClick}>Delete hero from team</button>
        </div>
    )
}

export {addToTeam, deleteFromTeam};

这是我的 webpack-config 文件

const HtmlWebPackPlugin = require("html-webpack-plugin");
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")
const path = require("path");

const appPath = path.resolve(__dirname, "src/App");

const htmlPlugin = new HtmlWebPackPlugin({
    template: "src/index.html",
    filename: "./index.html"
   });

module.exports = {
    mode: 'development',
    entry : ['core-js/stable/promise', appPath],
    module:{
        rules: [
            {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
              loader: "babel-loader"
                }
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                  "style-loader",
                  "css-loader",
                  "sass-loader",
                ],
            }
        ]
    },
    resolve: {
        alias: {
          react: path.resolve('./node_modules/react'),
        },
        fallback: {
          "path": require.resolve("path-browserify"),
          "fs": false,
          "tls": false,
          "net": false,
          "path": false,
          "zlib": false,
          "http": false,
          "https": false,
          "stream": false,
          "crypto": false,
        }
      },
    output: {
        filename: 'transformed.js',
        path: path.resolve(__dirname,'/build.js')
    },
    plugins:[
      htmlPlugin,
      new NodePolyfillPlugin()
    ],
    devServer:{
        historyApiFallback: true
    }
}

我的 firebase-config 文件

  import firebase from "firebase/compat/app";
  import webpack from "webpack";
  import { initializeApp } from "firebase/app"

  new webpack.EnvironmentPlugin(['FIREBASE_API_KEY', 'FIREBASE_DATABASEURL', 'FIREBASE_PROJECT_ID', 'FIREBASE_SENDER_ID'])

  const firebaseConfig = {
    apiKey: FIREBASE_API_KEY,
    authDomain: "superteam-maker.firebaseapp.com",
    databaseURL: FIREBASE_DATABASEURL,
    projectId: "superteam-maker",
    storageBucket: "superteam-maker.appspot.com",
    messagingSenderId: FIREBASE_SENDER_ID,
    appId: FIREBASE_PROJECT_ID
  };
  
  const initFirebase = () => {
    if(!firebase.apps.length){
      initializeApp(firebaseConfig);
    }
  }

  initFirebase()
  
  
export {firebase};

还有我的 package.json 文件以防它很重要

{
  "name": "challenge-react",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "author": "Alexander García",
  "license": "ISC",
  "dependencies": {
    "@babel/polyfill": "^7.12.1",
    "axios": "^0.24.0",
    "babel-loader": "^8.2.3",
    "core-js": "^3.20.1",
    "css-loader": "^6.5.1",
    "express": "^4.17.2",
    "firebase": "^9.6.1",
    "formik": "^2.2.9",
    "history": "^5.1.0",
    "html-webpack-plugin": "^5.5.0",
    "node-polyfill-webpack-plugin": "^1.1.4",
    "path": "^0.12.7",
    "path-browserify": "^1.0.1",
    "react": "^17.0.2",
    "react-app-polyfill": "^3.0.0",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.0.2",
    "reactfire": "^4.2.1",
    "sass": "^1.44.0",
    "sass-loader": "^12.4.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.64.4",
    "webpack-dev-server": "^4.6.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.16.0",
    "@babel/core": "^7.16.0",
    "@babel/preset-env": "^7.16.4",
    "@babel/preset-react": "^7.16.0",
    "babel-core": "^6.26.3",
    "webpack-cli": "^4.9.1"
  }
}

你们能告诉我我做错了什么吗？或者至少解释一下 worker_threads 做什么？

Answer 1

我找不到那个特定错误的解决方案，但是，我意识到 Firebase 几个月前更新到版本 9，与上一个版本相比，使用情况发生了很大变化。因此，如果其他人正在为此类错误而苦苦挣扎，请在 firebase 9 上找到最新的教程。

设置 firebase 时反应 js 无法解析 worker_threads

react js can't resolve worker_threads while setting up firebase

node.js

firebase

reactjs

webpack