模块解析失败：意外的令牌。 您可能需要适当的加载程序来处理此文件类型

Question

我在下面收到以下错误，但我不明白我认为babel应该有问题的原因。 我使用web-dev-server和babel。 它的反应。

ERROR in ./App.js 188:13
Module parse failed: Unexpected token (188:13)
You may need an appropriate loader to handle this file type.
| //console.log(filter);
| if(isHomePage)
| return
| return (
| <div className={'App ${isDetailPage ? 'detail-page' : 'landing-page'} '}

@ ./main.js 1:0-27
@ multi (webpack)-dev-server/client?http://localhost:8080 ./main.js

ERROR in ./Home.js 34:8
Module parse failed: Unexpected token (34:8)
You may need an appropriate loader to handle this file type.
| render() {
| return (
| <div className={App}>
| hello
|
@ ./main.js 2:0-29
@ multi (webpack)-dev-server/client?http://localhost:8080 ./main.js
i ?wdm?: Failed to compile.

我的Webconfig文件如下所示：

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: './main.js',
    output: { path: __dirname, filename: 'bundle.js' },
    module: {
        rules: [
            {
                test: /.jsx?$/,
                include: [
                    path.resolve(__dirname, 'path/to/imported/file/dir')
                ],
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    },
}

我的package.json文件如下所示：

"dependencies": {
    "missing": "0.0.1",
    "react": "^0.14.7",
    "react-dom": "^0.14.7",
    "react-router-dom": "^4.3.1",
    "webpack-dev-server": "^3.1.10"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "webpack": "^4.27.1",
    "webpack-cli": "^3.1.2"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC"
}

我在这里想念什么？ 这与path.resolve有关吗？

Answer 1

我遇到了同样的问题，就我而言，问题与正则表达式有关。 正则表达式的定义是错误的。 我建议您检查main.js中的所有正则表达式。