npm模块解析失败…您可能需要适当的加载程序来处理此文件类型

Question

I changed a open source code its works perfect until yesterday. I dont think I changed anything important, so please someone help me. I already search on stack-overflow similar issue but lack of nodejs knowledge I cant fix that. Can someone please spot where is the error or what I am doing wrong?

Error message:

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

my 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"
  }
}

my 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,
    ],
};

And .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" }],
  ]
}

Answer 1

解决了，react-toolbox版本已更新为13。因此，如果我将版本固定为8或12，它将可以使用。（对于与我有类似问题的人）