Javascript 反应+;差异计算机上的网页包失败
我克隆了一个git存储库,它在另一台机器上运行良好。 我无法运行Javascript 反应+;差异计算机上的网页包失败,javascript,node.js,reactjs,webpack,babel-loader,Javascript,Node.js,Reactjs,Webpack,Babel Loader,我克隆了一个git存储库,它在另一台机器上运行良好。 我无法运行sudo npm start,并显示以下错误消息 ERROR in ./src/routes/index.js 11:37 Module parse failed: Unexpected token (11:37) You may need an appropriate loader to handle this file type. | import * as roles from "../UserRoles"; // Dashb
sudo npm start
,并显示以下错误消息
ERROR in ./src/routes/index.js 11:37
Module parse failed: Unexpected token (11:37)
You may need an appropriate loader to handle this file type.
| import * as roles from "../UserRoles"; // Dashboards
|
> const TeacherClassroom = async(() => import("../pages/teacher/classroom"));
| const StudentClassroom = async(() => import("../pages/student/classroom"));
| const StudentReportList = async(() => import("../pages/student/report/list"));
@ ./src/routes/Routes.js 4:0-88 21:6-18 51:104-114 51:141-154 51:186-198
@ ./src/App.js
@ ./src/index.js
@ multi @babel/polyfill react-hot-loader/patch ./src/index.js
我正在WSL ubuntu上运行代码。
我尝试使用nvm在以下节点版本上运行它:
-v12.14.1
-v8.9.1
-v8.9.4
-v10.10.1
我还尝试从部署的应用程序下载代码,但仍然发出相同的错误,即您可能需要一个合适的加载程序在代码的不同位置处理此文件类型
以下是我的配置文件:
package.json的一部分:
"dependencies": {
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@fortawesome/fontawesome-svg-core": "1.2.19",
"@fortawesome/free-brands-svg-icons": "5.8.2",
"@fortawesome/free-regular-svg-icons": "5.9.0",
"@fortawesome/free-solid-svg-icons": "5.9.0",
"@fortawesome/react-fontawesome": "0.1.4",
"@fullcalendar/core": "4.2.0",
"@fullcalendar/daygrid": "4.2.0",
"@fullcalendar/interaction": "4.2.0",
"@fullcalendar/list": "4.2.0",
"@fullcalendar/react": "4.2.0",
"@fullcalendar/timegrid": "4.2.0",
"apexcharts": "3.7.1",
"availity-reactstrap-validation": "2.5.3",
"axios": "0.19.0",
"bootstrap": "4.3.1",
"chart.js": "2.8.0",
"classnames": "2.2.6",
"core-js": "^2.6.11",
"electron-log": "3.0.8",
"electron-updater": "4.1.2",
"fullcalendar": "3.10.0",
"jquery": "3.4.1",
"moment": "2.24.0",
"moment-timezone": "0.5.26",
"pdfjs": "2.3.0",
"pdfjs-dist": "2.0.943",
"prop-types": "15.7.2",
"react": "16.8.6",
"react-alert": "5.5.0",
"react-apexcharts": "1.3.3",
"react-bootstrap-table-next": "3.1.3",
"react-bootstrap-table2-paginator": "2.0.6",
"react-bootstrap-table2-toolkit": "2.0.0",
"react-chartjs-2": "2.7.6",
"react-datetime": "2.16.3",
"react-dom": "16.8.6",
"react-dragula": "1.1.17",
"react-feather": "1.1.6",
"react-input-mask": "2.0.4",
"react-pdf": "4.1.0",
"react-perfect-scrollbar": "1.5.3",
"react-popper": "^1.3.3",
"react-quill": "1.3.3",
"react-redux": "7.0.3",
"react-redux-toastr": "7.5.1",
"react-router-dom": "5.0.0",
"react-scripts": "^3.3.0",
"react-select": "3.0.4",
"react-transition-group": "4.1.0",
"react-websocket": "2.0.1",
"reactstrap": "8.0.0",
"redux": "4.0.1",
"redux-thunk": "2.3.0",
"simple-peer": "9.3.0",
"vkey": "1.0.1",
"webrtc-adapter": "7.2.4"
},
"devDependencies": {
"@babel/cli": "7.4.4",
"@babel/core": "7.4.5",
"@babel/plugin-proposal-class-properties": "7.4.4",
"@babel/polyfill": "^7.6.0",
"@babel/preset-env": "7.4.5",
"@babel/preset-react": "^7.0.0",
"babel-loader": "8.0.5",
"css-loader": "2.1.1",
"electron": "6.1.3",
"electron-builder": "21.2.0",
"file-loader": "^4.0.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "3.2.0",
"node-gyp": "5.0.1",
"node-loader": "0.6.0",
"react-hot-loader": "4.5.3",
"redux-devtools-extension": "2.13.8",
"style-loader": "0.23.1",
"typescript": "3.5.2",
"webpack": "4.33.0",
"webpack-cli": "3.3.3",
"webpack-dev-server": "3.7.0"
},
"main": "public/electron.js",
"scripts": {
"start": "webpack-dev-server --mode development"
}
webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: [
'@babel/polyfill',
'react-hot-loader/patch',
'./src/index.js'
],
output: {
path: path.resolve(__dirname, 'dist/js'),
filename: 'bundle.[hash].js',
globalObject: 'this',
publicPath: '/'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ["@babel/preset-react"]
},
}
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.node$/,
use: 'node-loader'
},
{
test: /\.(png|jpe?g|gif|svg|pdf)$/,
use: [
{
loader: 'file-loader',
options: {},
},
],
},
{
test: /\.(html)$/,
use: {
loader: 'html-loader',
options: {
attrs: [':data-src']
}
}
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
template: 'public/index.html',
favicon: 'public/tocol_logo.ico'
})
],
devServer: {
host: 'localhost',
port: '3000',
historyApiFallback: true,
hot: true
}
};
B.法律改革委员会
{
"presets": [
["@babel/preset-env",
{
"targets": { "browsers": ["last 2 chrome versions"] },
"useBuiltIns": "entry"
}],"@babel/preset-react" ],
"plugins": [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-syntax-dynamic-import"
]
}
试用
{
test: /\.(png|jpe?g|gif|svg|pdf)$/,
use: [
{
loader: 'url-loader',
options: {},
},
],