如何解決'未捕獲的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：意外的令牌導入'？

回答

相關問題