如何解决'未捕获的SyntaxError：意外的令牌导入'？

我一直在寻找如何解决这个错误，但我一直无法解决它。大部分的答案我找到了设置巴别的权利，但我相信我已经设置好了。我正在使用Webpack在我的项目中使用React。如何解决'未捕获的SyntaxError：意外的令牌导入'？

我的WebPack配置文件是：

const path = require('path'); 

module.exports = { 
    context: __dirname + "/app", 

    entry: { 
    javascript: "./js/app.js", 
    html: "./index.html", 
    }, 

    output: { 
    filename: "app.js", 
    path: __dirname + "/dist", 
    }, 

    resolve: { 
    extensions: ['', '.js', '.jsx', '.json'], 
    root: path.resolve(__dirname, './app/js'), 
    }, 

    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loaders: ["react-hot", "babel-loader"], 
     }, 
     { 
     test: /\.html$/, 
     loader: "file?name=[name].[ext]", 
     }, 
     { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" } 
    ], 
    }, 
}

我的index.html是：

<html> 
<head> 
    <title>React</title> 
    <meta charset="utf-8" /> 
    <style> 
    * { 
     margin: 0; 
     padding: 0; 
     font-size: 18px; 
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
     font-weight: normal; 
    } 

    body { 
     background: #ededef; 
    } 

    #app, 
    .Info { 
     max-width: 600px; 
     padding: 40px; 
     margin: 0 auto; 
     position: relative; 
    } 

    hr { 
     border: 0; 
     border-top: 1px solid #ddd; 
     margin: 20px 0; 
    } 
    </style> 
</head> 
<body> 
    <div id="app"></div> 
    <script src="./js/app.js"></script> 
</body> 
</html>

当我加载在我的JS文件app.js. import React from 'react';做出反应我得到的错误引发我已经安装了必要的Babel软件包。我的根文件夹中有一个.babelrc文件。什么可能导致这个错误？

编辑

我.babelrc文件是：

{ 
    "presets": [ 
    "es2015", 
    "react" 
    ] 
}

来源

2017-04-04 feners

可以显示.babelrc文件？ –

不知道这是否会导致你的错误，但什么是你的webpack.config文件中的“html：”./index.html“入口点？webpack中的入口点用于创建js包，但是在这里你将它指向你的index.html文件。 – ryandrewjohnson

@MayankShukla添加了。babelrc – feners

虽然你有两个规则t帽子适用于.js，因为/\.jsx?/也匹配.js，因为x?表示x发生一次或零次发生。你应该删除其他规则。

从错误，它看起来像你试图在浏览器中打开app/index.html，其中导入./js/app.js。这不是已处理的文件，这是您的原始文件import声明，因此它在逻辑上在浏览器中失败。

首先你需要打开webpack生成的文件，你的情况为dist/index.html。但它不会找到该包，因为它位于dist/app.js，而不是dist/js/app.js。因为index.html刚刚被复制（与file-loader你配置），你就需要将<src>标签更改为以下，因为它是在同一目录下：

<script src="app.js"></script>

来源

2017-04-04 08:21:17

感谢您详细说明什么是错的。 – feners

尝试利用包括物业在你的WebPack装载机，你也不必因为/\.jsx?$/定义分别为babel-loader文件js语法已经检查了两者

loaders: [ 
    { 
    test: /\.jsx?$/, 
    include: [ 
     path.resolve(__dirname, "app") 
    ], 
    loaders: [ 'react-hot', 'babel-loader' ] 
    }, 
    { 
    test: /\.html$/, 
    loader: "file?name=[name].[ext]", 
    } 
],

此外，当您在您的中包含文件，你应该包括其中的WebPack在recides您dist文件夹中的编译js文件

<body> 
    <div id="app"></div> 
    <script src="./dist/app.js"></script> 
</body>

来源

2017-04-04 04:40:18

const path = require('path'); 

module.exports = { 
    context: __dirname + "/app", 

    entry: { 
    javascript: "./js/app.js", // make sure your all components containing "import" variable will be placed inside ./js/app.js folder 
    html: "./index.html", 
    }, 

    output: { 
    filename: "app.js", 
    path: __dirname + "/dist", 
    }, 

    resolve: { 
    extensions: ['', '.js', '.jsx', '.json'], 
    root: path.resolve(__dirname, './app/js'), 
    }, 

    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loaders: ["react-hot", "babel-loader"], 
     }, 
     { 
     test: /\.html$/, 
     loader: "file?name=[name].[ext]", 
     }, 
     { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" } 
    ], 
    }, 
}

来源

2017-04-04 05:11:07

您需要使用0级预设：

npm install --save-dev babel-preset-stage-0

和样品webpack.config .js是：

var webpack = require('webpack'); 
var path = require('path'); 
module.exports={ 
devtool :'inline-source-map', 
entry : ['webpack-dev-server/client?http://127.0.0.1:8000', 
'webpack/hot/only-dev-server', 
'./src' 
] , 
output :{ 
path: path.join(__dirname, 'build'), 
filename: 'bundle.js', 
}, 
resolve:{ 
modulesDirectories : ['node_modules','src'], 
extensions : ['','.js'] 
}, 
module : { 
loaders :[ 
    { 
    test : /\.jsx?$/, 
    exclude : /node_modules/, 
    loaders :['react-hot','babel?presets[]=react,presets[]=es2015,presets[]=stage-0'] 
    } 
] 
}, 
plugins :[new webpack.HotModuleReplacementPlugin(), 
new webpack.NoErrorsPlugin() 
    ] 

};

来源

2017-04-04 05:54:08

如何解决'未捕获的SyntaxError：意外的令牌导入'？

回答

相关问题