使用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"
}
}