Я клонировал репозиторий 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"; // 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 я также попытался загрузить коды из развернутого приложения, но все равно выдает ту же ошибку, говоря you may need an appropriate loader to handle this file type в другом месте кода .
Вот мои файлы настроек:
часть пакета. 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
}
};
.babelr c
{
"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"
]
}