每次運行 npm run build 時都會收到此錯誤
Failed to compile.
./node_modules/react-d3-graph/src/components/graph/Graph.jsx 698:6
Module parse failed: Unexpected token (698:6)
You may need an appropriate loader to handle this file type,
currently no loaders are configured to process this file. See https://webpack.js.org/concepts#
loaders
|
| return (
> <div id={`${this.state.id}-${CONST.GRAPH_WRAPPER_ID}`}>
| <svg name={`svg-container-${this.state.id}`} style={svgStyle} onClick={this.onClickGraph}>
| {defs}
這是在我回傳的 JSX 檔案 Graph.jsx 的分叉存盤庫中。經過數小時的研究，我可以告訴我，我在 webpack.config.js 中添加了 JSX 進行測驗，所以它有 .(js|jsx)。我也考慮過添加其他插件或預設，但我所做的一切似乎都不起作用。這是我的 package.json
{
"name": "my-app",
"version": "0.1.0",
"main": "./build/index.js",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"csvtojson": "^2.0.10",
"d3": "^5.5.0",
"d3-selection": "^2.0.0",
"html-webpack-root-plugin": "^0.10.0",
"react": "^16.4.1",
"react-data-table-component": "^7.0.0-alpha-5",
"react-dom": "^17.0.1",
"react-file-reader": "^1.1.4",
"react-request": "^3.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.2",
"react-scroll-wheel-handler": "^2.0.1",
"styled-components": "^5.2.1",
"use-neo4j": "^0.3.5",
"web-vitals": "^1.0.1",
"write-json-file": "^4.3.0",
"xlsx": "^0.16.9",
"xtypejs": "^0.7.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"api": "npx json-server --watch .\\src\\components\\limit.json --port 8000"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/core": "^7.16.0",
"@babel/plugin-proposal-class-properties": "^7.16.0",
"@babel/plugin-proposal-object-rest-spread": "^7.16.0",
"@babel/plugin-syntax-jsx": "^7.16.0",
"@babel/plugin-transform-react-jsx": "^7.16.0",
"@babel/preset-env": "^7.16.0",
"@babel/preset-react": "^7.16.0",
"@babel/preset-typescript": "^7.16.0",
"axios": "^0.21.1",
"babel-loader": "^8.2.3",
"babel-plugin-transform-class-properties": "^6.24.1",
"chart.js": "^3.5.1",
"html-webpack-plugin": "^5.5.0",
"react-chartjs-2": "^3.0.5",
"react-charts": "^2.0.0-beta.7",
"react-d3-graph": "github:<username>/react-d3-graph",
"react-modal": "^3.14.3",
"react-router-scroll": "^0.4.4",
"react-use": "^17.2.4",
"webpack": "^4.46.0",
"webpack-bundle-analyzer": "^4.5.0"
}
}
這是我的 webpack.config.js
const webpack = require("webpack");
module.exports = {
devtool: 'inline-source-map',
entry: [
'webpack-hot-middleware/client',
'./client/client.js'
],
output: {
path: require('path').resolve('./dist'),
filename: 'bundle.js',
publicPath: '/'
},
loader:
'babel-loader',
plugins: [
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
"@babel/plugin-syntax-jsx",
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: {
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', { targets: "defaults" }]
]
}
}
}
]
}
};
我不知道為什么 HTML 標簽真的會拋出錯誤。這是我的 .babelrc
{
"presets": [
[ "@babel/preset-env", {
"modules": false,
"targets": {
"browsers": [
"last 2 Chrome versions",
"last 2 Firefox versions",
"last 2 Safari versions",
"last 2 iOS versions",
"last 1 Android version",
"last 1 ChromeAndroid version",
"ie 11"
]
}
} ],
"@babel/preset-react"
],
"plugins": [ "@babel/plugin-proposal-class-properties" ]
}
我顯然已經下載了 babel-loader 并將其添加到我的 webpack.config.js 檔案中，但即使這樣也無濟于事。
uj5u.com熱心網友回復：
Webpack 是一個捆綁器，它將利用/呼叫其他一些東西來捆綁您的代碼。為了做到這一點，您在 webpack 中使用的大多數東西都需要加載器。如果您有 css，那么您需要一個 css 加載器，webpack 將使用它來轉換和捆綁該 css。如果您有 javascript，尤其是較新的 es6 或 jsx，那么 webpack 將無法理解它，您必須為它提供一些可以真正解釋和理解該代碼的加載器。最常用的是用于打字稿的 babel loader 和 ts-loader。
當前在您的代碼中發生的是 webpack 找到檔案并加載它，但隨后不知道它在說什么。您必須安裝 babel 或 ts-loader 或兩者，然后您必須將其添加到配置中 webpack 的 loaders 部分，然后 webpack 將呼叫它們來轉換您的代碼并捆綁它。
uj5u.com熱心網友回復：
我最終沒有弄清楚為什么加載程式沒有注冊，相反，我只是將 repo 作為 gzip 下載，解壓縮，將它放在我的 my-app/src 檔案夾中，并更改了一些包，這很好走。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/354240.html
標籤：javascript html 反应 网络包