极客观点
项目管理
HarmonyOS
报错信息：
ERROR in ./node_modules/react-dnd/dist/core/DndProvider.js 28:0-48
Module not found: Error: Can't resolve 'react/jsx-runtime' in 'C:\Users\xiaochong\Desktop\test1\cosmohceplatform\node_modules\rea
ct-dnd\dist\core'
Did you mean 'jsx-runtime.js'?
BREAKING CHANGE: The request 'react/jsx-runtime' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' fi
le where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
@ ./node_modules/react-dnd/dist/core/index.js 2:0-33 2:0-33
@ ./node_modules/react-dnd/dist/index.js 1:0-32 1:0-32
@ ./src/js/containers/QualityHonorAwardMaintenance/index.js 47:0-69 768:23-38
@ ./src/js/routes.js 377:0-85 1555:17-45
@ ./src/js/containers/Root.js 24:0-31 82:18-24 112:12-18
@ ./src/js/index.js 42:0-37 75:41-85:3 127:32-36 75:2-85:4 78:18-57
webpack 全文：
const path = require('path');
import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
export default {
devtool: 'eval-source-map',
devServer: {
quiet:false,
noInfo: false,
},
entry: {
main: [
'./src/webpack-public-path',
'react-hot-loader/patch',
'webpack-hot-middleware/client?reload=true',
path.resolve(__dirname, 'src/js/index.js')
]
},
target: 'web', // necessary per https://webpack.github.io/docs/testing.html#compile-and-test
output: {
path: `${__dirname}/dist`,
publicPath: '/',
filename: '[name]-[id].bundle.js',
chunkFilename: '[name]-[id].chunk.js',
library: `hce-[name]`,
libraryTarget: 'umd',
globalObject: 'window'
},
optimization: {
splitChunks: {
chunks: 'all',
name: 'common',
minSize: 20000, // 20KB
maxSize: 70000, // 70KB
minChunks: 1,
maxAsyncRequests: 30,
maxInitialRequests: 30,
automaticNameDelimiter: '~',
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10, // 优先级，数字越小优先级越高
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true,
},
},
},
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development'),
__DEV__: true
}),
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
template: 'src/index.html',
chunks: "",
title: 'MOM-开发模式',
favicon: './src/favicon.ico',
minify: {
removeComments: true,
collapseWhitespace: true
},
hash:true,
inject: 'body'
}),
new MiniCssExtractPlugin({
chunkFilename: '[name].css', // 非入口(non-entry) chunk 文件的名称
}),
],
resolve: {
modules: ['node_modules', path.join(__dirname, '../node_modules')],
extensions: ['.mjs','.web.js','.js', '.json', '.jsx'], // 确保.mjs在前面
fallback:{
"path": false,
"crypto": false
},
// 路径别名, 懒癌福音
alias:{
'@':path.resolve(__dirname,'src'),
app:path.resolve(__dirname,'src/js'),
style:path.resolve(__dirname,'src/styles')
}
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
{
test: /\.scss$/,
include: path.resolve(__dirname, 'src'), // 包括 src/js 和 src/styles 文件夹
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
// 使用默认的 PostCSS 配置
postcssOptions: {
plugins: [
require('autoprefixer'), // 添加 autoprefixer 插件
]
}
}
},
'sass-loader' // 使用 sass-loader 来处理 SCSS 语法
]
},
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
{
loader: 'less-loader',
options: {
sourceMap: true,
lessOptions: {
modifyVars: {
"@icon-url": "'/fonts/iconfont'"
},
javascriptEnabled: true
}
}
}
]
},
{
test: /\.css$/,
include: path.resolve(__dirname, 'node_modules'),
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
require('precss'),
require('autoprefixer'),
require('rucksack-css')
]
}
}
}
]
},
{
test: /\.(otf|eot|svg|ttf|woff|woff2).*$/,
use: 'url-loader?limit=10000'
},
{
test: /\.(gif|jpe?g|png|ico)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192, // 小于这个大小的文件会被转为DataUrl
name: 'images/[name].[hash].[ext]', // 输出文件的命名规则
},
},
],
},
]
},
};
package.json 全文如下：
{
"name": "hce",
"version": "1.0.0",
"description": "react-base",
"main": "index.js",
"theme": {
"@icon-url": "'/fonts/iconfont'"
},
"scripts": {
"start": "npm-run-all --parallel open:src",
"open:src": "babel-node server.js",
"clean": "rimraf dist",
"build:webpack": "node --max-old-space-size=102400 ./node_modules/webpack/bin/webpack.js --config webpack-pro-config.js --progress --colors",
"build": "npm-run-all clean build:webpack"
},
"keywords": [
"react",
"es6",
"webpack"
],
"author": "minooo",
"license": "MIT",
"dependencies": {
"@antv/g2": "^3.5.3",
"antd": "^4.24.16",
"axios": "^0.19.2",
"babel-runtime": "^6.20.0",
"copy-to-clipboard": "^3.1.0",
"echarts": "^4.9.0",
"echarts-for-react": "^3.0.2",
"echarts-gl": "^1.1.2",
"echarts-wordcloud": "^1.1.3",
"ezuikit-js": "^0.7.0",
"fixed-data-table-2": "^0.8.13",
"handsontable": "^7.0.2",
"history": "^3.0.0",
"html2canvas": "^1.4.1",
"jquery": "^3.4.0",
"jspdf": "^1.5.3",
"moment": "^2.24.0",
"qrcodejs2": "0.0.2",
"react": "^17.0.2",
"react-cookie": "^1.0.4",
"react-dimensions": "^1.3.0",
"react-dnd": "^16.0.1",
"react-dnd-html5-backend": "^16.0.1",
"react-dom": "^17.0.2",
"react-dragula": "^1.1.17",
"react-free-scrollbar": "^0.3.4",
"react-handsontable": "^0.3.2",
"react-image-process": "^0.1.6",
"react-modal": "^3.3.2",
"react-piwik": "^1.6.0",
"react-router": "^3.0.0",
"react-slick": "^0.29.0",
"react-to-print": "^2.14.1",
"react-viewer": "^2.11.1",
"reflux": "^6.4.1",
"reqwest": "^2.0.5",
"slick-carousel": "^1.8.1",
"swiper": "^6.8.1",
"wangeditor": "^3.1.1",
"ztree": "^3.5.24"
},
"devDependencies": {
"@babel/core": "^7.25.7",
"@babel/node": "^7.25.7",
"@babel/plugin-transform-react-jsx": "^7.25.7",
"@babel/plugin-transform-runtime": "^7.25.7",
"@babel/preset-env": "^7.25.7",
"@babel/preset-react": "^7.25.7",
"@babel/preset-stage-0": "^7.8.3",
"autoprefixer": "^6.4.0",
"babel-loader": "^9.2.1",
"babel-plugin-import": "^1.1.1",
"babel-preset-latest": "^6.16.0",
"babel-preset-react": "^6.11.1",
"babel-preset-stage-0": "^6.5.0",
"browser-sync": "^2.14.0",
"chokidar": "^1.6.1",
"classnames": "^2.2.5",
"connect-history-api-fallback": "^1.3.0",
"cross-env": "^2.0.0",
"css-loader": "^0.23.1",
"express": "^4.14.0",
"file-loader": "^5.1.0",
"html-webpack-plugin": "^5.6.0",
"http-proxy-middleware": "^0.17.4",
"json-loader": "^0.5.4",
"less": "^4.2.0",
"less-loader": "^10.2.0",
"mini-css-extract-plugin": "^2.9.1",
"npm-run-all": "^2.3.0",
"postcss": "^8.4.47",
"postcss-loader": "^4.3.0",
"postcss-scss": "^4.0.9",
"precss": "^1.4.0",
"react-addons-css-transition-group": "^15.3.0",
"react-addons-perf": "^15.4.2",
"react-hot-loader": "^3.0.0-beta.6",
"react-router-dom": "^5.3.0",
"redbox-react": "^1.6.0",
"rimraf": "^2.5.3",
"rucksack-css": "^0.8.6",
"sass": "^1.79.4",
"sass-loader": "^16.0.2",
"style-loader": "^0.13.2",
"url-loader": "^3.0.0",
"webpack": "^5.95.0",
"webpack-dev-middleware": "^5.3.4",
"webpack-hot-middleware": "^2.26.1"
}
}
且已经删除依赖包，清除缓存重新安装过了，
.babelrc 配置如下：
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"react-hot-loader/babel",
["import", { "libraryName": "antd", "style": true }],
["@babel/plugin-transform-runtime", {
"helpers": false,
"regenerator": true
}],
["@babel/plugin-transform-react-jsx", { "runtime": "automatic" }]
]
}根据 文心一言，chatGPT，通义千问 来回改的就是这三个文件，但这个错误始终存在。。。。。请教大佬，到底是哪里的问题？
https://github.com/react-dnd/react-dnd/issues/3470