使用pnpm工作区时Webpack别名不起作用

使用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/,loader: 'eslint-loader',},{
        test: /\.css/,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","description": "back-end of the fsp app","repository": "https://gitlab.com/MattGoldwater/FSP","scripts": {
    "start": "node -r esm index.js"
  },"dependencies": {
    "compression": "^1.7.4","express": "^4.17.1"
  }
}

liuliangkb1984 回答:使用pnpm工作区时Webpack别名不起作用

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/2909811.html

大家都在问