2

使用 pnpm 工作区时出现错误，因为它无法解析 react-dom。我认为那是因为我有一个别名来使用 @hot-loader/react-dom 而不是 react-dom。但是，当我不使用工作区时它起作用了，这对我来说很奇怪。

在安装我的软件包之前，我尝试删除我的pnpm-lock.yaml和 node_modules 文件夹。我用来安装软件包的命令是：pnpm recursive i.

我有 2 个包裹。一个命名为前端，另一个命名为后端。

我的错误信息：

/Users/mg/projects/FSP/node_modules/.pnpm/registry.npmjs.org/react-hot-loader/4.12.18_react-dom@16.12.0+react@16.12.0/node_modules/react-hot-loader/dist/react-hot-loader.development.js
Module not found: Error: Can't resolve 'react-dom' in '/Users/mg/projects/FSP/node_modules/.pnpm/registry.npmjs.org/react-hot-loader/4.12.18_react-dom@16.12.0+react@16.12.0/node_modules/react-hot-loader/dist'

前端 webpack.config.dev.js (/Users/mg/projects/FSP/packages/front-end/webpack.config.dev.js) （别名朝下）

import path from 'path';
import webpack from 'webpack';
import Dotenv from 'dotenv-webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import { CleanWebpackPlugin } from 'clean-webpack-plugin';

// const dotEnvDevelopment = dotenv.config({path: __dirname + '/.env.development'})

export default {
  entry: ['webpack-hot-middleware/client', './src/Index.js'],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  module: {
    rules: [
      { test: /\.js/, exclude: /node_modules/, loader: "babel-loader", options: {
        rootMode: "upward",
      }
    },
      {
        test: /\.js/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
      },
      {
        test: /\.css/,
        exclude: /node_modules/,
        loader: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'}),
    new Dotenv({
      path: __dirname + '/.env.dev',
      safe: true,
    }),
    // new webpack.DefinePlugin({
    //   "process.env": JSON.stringify(dotEnvDevelopment.parsed)
    // }),
    new webpack.HotModuleReplacementPlugin(),
  ],
  mode: 'development', // don't do for production
  resolve: {
    extensions: ['.js'],
    alias: {
      'react-dom': '@hot-loader/react-dom'
    }
  },
  devtool: 'inline-source-map', // don't do for production https://webpack.js.org/guides/development/
}

pnpm-workspace.yaml (/Users/mg/projects/FSP/pnpm-workspace.yaml) (在根目录下) 

packages:
  - 'packages/**'

前端 package.json (/Users/mg/projects/FSP/packages/front-end/package.json)

{
  "name": "@fsp/ui",
  "version": "1.0.0",
  "description": "front-end of the fsp app",
  "main": "index.js",
  "module": "main.js",
  "scripts": {
    "test": "jest",
    "test:watch": "pnpm test --watch",
    "security-check": "pnpm audit",
    "start-message": "node -r esm build-scripts/startMessage.js",
    "set-environment-variables": "node -r dotenv/config -r esm build-scripts/setUpEnvironmentVariablesForNode.js",
    "prestart": "npm-run-all -s start-message set-environment-variables",
    "start": "npm-run-all -p security-check run-src",
    "run-src": "node build-scripts/index.js",
    "lint": "esw './webpack.config.*' './babel.config.*' './src/**/*.js' './build-scripts/**/*.js' --color",
    "lint:watch": "pnpm run lint --watch",
    "generate-mock-data": "node -r esm build-scripts/generateMockData",
    "prestart-mock-api": "pnpm run generate-mock-data",
    "start-mock-api": "json-server --watch src/api/db.json --port 3001",
    "clean-dist": "rimraf ./dist && mkdir dist",
    "prebuild": "npm-run-all clean-dist test lint set-environment-variables",
    "build": "node -r esm build-scripts/buildProd.js",
    "postbuild": "node -r esm build-scripts/distServer.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/MattGoldwater/FSP.git"
  },
  "author": "Matt Goldwater",
  "license": "UNLICENSED",
  "bugs": {
    "url": "https://github.com/MattGoldwater/FSP/issues"
  },
  "homepage": "https://github.com/MattGoldwater/FSP#readme",
  "private": true,
  "engines": {
    "node": "12.x.x"
  },
  "dependencies": {
    "@hot-loader/react-dom": "^16.11.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-hot-loader": "^4.12.18"
  },
  "devDependencies": {
    "@babel/core": "^7.7.5",
    "@babel/preset-env": "^7.7.6",
    "@babel/preset-react": "^7.7.4",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "babel-loader": "^8.0.6",
    "chalk": "^2.4.2",
    "clean-webpack-plugin": "^3.0.0",
    "compression": "^1.7.4",
    "css-loader": "^3.3.2",
    "dotenv": "^8.2.0",
    "dotenv-webpack": "^1.7.0",
    "eslint": "^6.7.2",
    "eslint-loader": "^2.2.1",
    "eslint-plugin-jest": "^22.21.0",
    "eslint-plugin-react": "^7.17.0",
    "eslint-watch": "^6.0.1",
    "esm": "^3.2.25",
    "express": "^4.17.1",
    "faker": "^4.1.0",
    "html-webpack-plugin": "^3.2.0",
    "jest": "^24.9.0",
    "json-schema-faker": "^0.5.0-rc23",
    "json-server": "^0.15.1",
    "npm-run-all": "^4.1.5",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "rimraf": "^3.0.0",
    "style-loader": "^1.0.1",
    "terser-webpack-plugin": "^1.4.3",
    "webpack": "^4.41.2",
    "webpack-dev-middleware": "^3.7.2",
    "webpack-hot-middleware": "^2.25.0"
  }
}

后端 package.json (/Users/mg/projects/FSP/packages/back-end/package.json) (可能不相关)

{
  "name": "@fsp/api",
  "version": "1.0.0",
  "description": "back-end of the fsp app",
  "main": "index.js",
  "repository": "https://gitlab.com/MattGoldwater/FSP",
  "author": "Matt Goldwater",
  "license": "UNLICENSED",
  "private": true,
  "engines": {
    "node": "12.x.x"
  },
  "scripts": {
    "start": "node -r esm index.js"
  },
  "dependencies": {
    "compression": "^1.7.4",
    "esm": "^3.2.25",
    "express": "^4.17.1"
  }
}
4

0 回答 0