javascript - npm 模块解析失败.....您可能需要适当的加载程序来处理此文件类型
问题描述
我更改了一个开源代码,它直到昨天才完美运行。我认为我没有改变任何重要的东西,所以请有人帮助我。我已经搜索过类似的堆栈溢出问题,但缺乏 nodejs 知识,我无法解决。有人可以找出错误在哪里或我做错了什么吗?
错误信息:
ERROR in ./~/react-toolbox/components/index.js
Module parse failed:
/home/ioteye/work_cong/ioteye_fog/Report_frontend/node_modules/react-
toolbox/components/index.js Unexpected token (24:7)
You may need an appropriate loader to handle this file type.
| export { default as ProgressBar } from './progress_bar';
| export * from './radio';
| export Ripple from './ripple';
| export { default as Slider } from './slider';
| export { default as Snackbar } from './snackbar';
@ ./src/client/components/Viewport.js 8:0-128
@ ./src/client/main.js
@ multi webpack-hot-middleware/client?
path=/__webpack_hmr&timeout=20000 react-hot-loader/patch ./main.js
我的 package.json
{
"name": "Report_frontend",
"version": "0.0.1",
"description": "A field-testing/analysis server & web-app for the mobile and fixed agent",
"main": "index.js",
"scripts": {
"lint": "eslint src/ && flow",
"build": "webpack",
"start": "babel-node --presets='node6' server.js",
"server": "babel-node --presets='node6' server.js",
"heroku-postbuild": "rm -rf build/ && webpack -p --progress",
"migrate": "babel-node --presets='node6' ./src/server/database/migrate.js"
},
"engines": {
"node": ">=6.11"
},
"author": "IoT Eye revised from Chris Scott, Transistor Software",
"license": "MIT",
"repository": "https://github.com/IoTeye/IoTeye_data",
"dependencies": {
"babel-cli": "^6.24.1",
"babel-preset-node6": "^11.0.0",
"chart.js": "2.7.2",
"classnames": "^2.2.5",
"compression": "^1.6.2",
"event-emitter": "^0.3.5",
"google-map-react": "^0.23.0",
"lodash": "^4.17.4",
"moment": "^2.18.1",
"opn": "^5.1.0",
"pg": "6.1.0",
"pg-hstore": "2.3.2",
"postcss": "^5.2.16",
"postcss-cssnext": "^2.10.0",
"prop-types": "^15.5.6",
"query-string": "^5.0.0",
"react": "^15.4.2",
"react-chartjs-2": "2.7.2",
"react-dom": "^15.4.2",
"react-google-maps": "^6.0.1",
"react-redux": "^5.0.3",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-toolbox": "^2.0.0-beta.13",
"react-virtualized": "^9.8.0",
"redux": "^3.6.0",
"redux-thunk": "^2.2.0",
"request": "^2.81.0",
"reselect": "^3.0.1",
"sequelize": "github:sequelize/sequelize#38e8bd1"
},
"devDependencies": {
"babel-core": "^6.24.0",
"babel-eslint": "^7.2.3",
"babel-loader": "^6.4.1",
"babel-plugin-root-import": "^5.1.0",
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-flow-strip-types": "^6.22.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.23.0",
"babel-preset-stage-0": "^6.24.1",
"body-parser": "^1.17.1",
"colors": "^1.1.2",
"css-loader": "^0.26.1",
"ejs": "^2.5.6",
"ejs-loader": "^0.3.0",
"eslint": "^4.0.0",
"eslint-config-standard": "^10.2.1",
"eslint-config-standard-react": "^5.0.0",
"eslint-loader": "^1.8.0",
"eslint-plugin-babel": "^4.1.1",
"eslint-plugin-flowtype": "^2.34.0",
"eslint-plugin-immutable": "^1.0.0",
"eslint-plugin-import": "^2.3.0",
"eslint-plugin-node": "^5.0.0",
"eslint-plugin-promise": "^3.5.0",
"eslint-plugin-react": "^7.1.0",
"eslint-plugin-standard": "^3.0.1",
"express": "^4.15.2",
"file-loader": "^0.11.1",
"flow-bin": "^0.48.0",
"flow-typed": "^2.1.2",
"html-webpack-plugin": "^2.29.0",
"postcss-cssnext": "^2.9.0",
"postcss-each": "^0.9.3",
"postcss-import": "^9.1.0",
"postcss-loader": "^1.2.2",
"postcss-mixins": "^5.4.1",
"prettier-eslint": "^6.3.0",
"prettier-eslint-cli": "^4.1.1",
"react-hot-loader": "^3.0.0-beta.6",
"sqlite3": "~3.1.8",
"style-loader": "^0.13.1",
"webpack": "^2.3.3",
"webpack-dev-middleware": "^1.10.1",
"webpack-dev-server": "^2.4.2",
"webpack-hot-middleware": "^2.18.0"
}
}
我的 webpack.config.babel.js
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const isProduction = process.env.NODE_ENV === 'production';
const htmlWebpackPlugin = new HtmlWebpackPlugin({
template: 'index.ejs',
inject: true,
production: isProduction,
minify: isProduction && {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
GOOGLE_ANALYTICS_ID: process.env.GOOGLE_ANALYTICS_ID,
});
module.exports = {
context: path.resolve(__dirname, 'src', 'client'),
devtool: 'source-map',
target: 'web',
entry: isProduction
? ['./main.js']
: ['webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000', 'react-hot-loader/patch', './main.js'],
output: {
path: path.resolve(__dirname, './build'),
publicPath: '/',
filename: '[name]-[hash].js',
chunkFilename: '[id].[chunkhash].js',
},
resolve: {
extensions: ['.js', '.json', '.css', '.svg'],
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.(jpg|png|svg)$/,
loader: 'file-loader', // or 'url'
},
{
test: /\.ejs$/,
loader: 'ejs-loader', // or 'url'
},
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
sourceMap: true,
importLoaders: 1,
localIdentName: '[name]--[local]--[hash:base64:8]',
},
},
'postcss-loader', // has separate config, see postcss.config.js nearby
],
},
].filter(x => x),
},
plugins: isProduction
? [
new webpack.DefinePlugin({
'process.env.SHARED_DASHBOARD': !!process.env.SHARED_DASHBOARD || '',
}),
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false,
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false,
},
mangle: true,
beautify: false, // use true for debugging
}),
htmlWebpackPlugin,
]
: [
new webpack.NamedModulesPlugin(),
new webpack.DefinePlugin({
'process.env.SHARED_DASHBOARD': !!process.env.SHARED_DASHBOARD || '',
}),
new webpack.HotModuleReplacementPlugin(),
htmlWebpackPlugin,
],
};
和 .babelrc
{
"presets": [['es2015', {modules: false}], 'react', 'stage-0'],
"plugins": [
["react-hot-loader/babel"],
["transform-runtime"],
["transform-decorators-legacy"],
["transform-async-to-generator"],
["babel-plugin-root-import", {"rootPathSuffix": "src/client" }],
]
}
解决方案
已解决,react-toolbox 版本已更新至 13。因此,如果我将版本修复为 8 或 12,它将起作用。(对于与我有类似问题的人)
推荐阅读
- reactjs - 可以使用 React 读取 React 组件呈现的 html 表格吗?
- docker - Docker DIND jenkins kubernetes - 安装目录为空
- amazon-web-services - 自上次 y 类型事件以来至少经过 x 分钟后触发 AWS Lambda
- python - 在熊猫数据框中转换数组数据类型
- python - 在 gmap 上添加补丁后散景不产生图形
- python - 为什么我的将日期时间转换为日期的代码因路径不同而失败?
- c++ - 如何从原始 C 堆内存指针初始化 unique_ptr?
- .htaccess - 如何处理特殊字符 .htaccess 规则?
- python - 通过矢量化循环遍历熊猫系列
- python - 如何为 linux 机器编写命令来查找 python 路径