Webpack - Uncaught SyntaxError: Unexpected token import with Redux答案

【问题标题】：Webpack - Uncaught SyntaxError: Unexpected token import with ReduxWebpack - Uncaught SyntaxError: Unexpected token import with Redux
【发布时间】：2017-09-10 14:54:25
【问题描述】：

我一直在尝试使用 Webpack 和 Redux 进行 React，但偶然发现了一个未捕获的 SyntaxError：意外的令牌导入。

我知道有很多这样的问题，但我没有找到涉及 Redux 的问题。

这是我的 webpack 配置：

var app_root = 'src'; // the app root folder: src, src_users, etc
var path = require('path');
var CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
app_root: app_root, // the app root folder, needed by the other webpack 
configs
entry: [
// http://gaearon.github.io/react-hot-loader/getstarted/
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'babel-polyfill',
__dirname + '/' + app_root + '/index.js',
],
output: {
path: __dirname + '/public/js',
publicPath: 'js/',
filename: 'bundle.js',
},
module: {
loaders: [
  {
    test: /\.js$/,
    loaders: ['react-hot', 'babel'],
    exclude: /node_modules/,
  },
  {
    // https://github.com/jtangelder/sass-loader
    test: /\.scss$/,
    loaders: ['style', 'css', 'sass'],
  },
  {
    test: /\.css$/,
    loaders: ['style', 'css'],
  }
 ],
 },
 devServer: {
  contentBase: __dirname + '/public',
 },
 plugins: [
 new CleanWebpackPlugin(['css/main.css', 'js/bundle.js'], {
  root: __dirname + '/public',
  verbose: true,
  dry: false, // true for simulation
}),
],
};

index.js 文件：

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore} from 'redux';

// importera App komponenten
import App from './components/App';
// importera stylesheet
import './stylesheets/main.scss';
//importera reducer
import { reducers } from './reducers/index';
import Provider from "react-redux/src/components/Provider";


// skapa users-list, tomt objekt
let users = [];
for (let i = 1; i < 10; i++) {
 // fyller objektet med användare med dessa villkor
 users.push({
    id: i,
    username: 'Andreas' + i,
    job: 'leethacker' + i,
 });

 const initialState = {
 users: users,
 }
 }

 // skapa Store
 const store = createStore(reducers, initialState);

 // skriver sedan ut denna komponent, render är Reacts funktion för att 
 skriva ut
 ReactDOM.render(
<Provider store ={store}>
<App/>
</Provider> , document.getElementById('App'));

Package.json 文件：

{
"name": "redux-minimal",
"version": "1.0.0",
"description": "Start building complex react-redux apps today, with 
this minimalist easy to understand starter kit (boilerplate)",
"keywords": [
"react",
"redux",
"minimal",
"starter kit",
"boilerplate"
],
"main": "index.js",
"homepage": "http://redux-minimal.js.org/",
"repository": {
"type": "git",
"url": "https://github.com/catalin-luntraru/redux-minimal"
},
"scripts": {
"start": "webpack-dev-server --inline --hot --history-api-fallback --
host localhost --port 8080",
"build-dev": "webpack --config webpack.dev.config.js",
"build-prod": "webpack -p --config webpack.prod.config.js",
"test": "mocha --recursive --compilers js:babel-register --require 
 babel-polyfill --require ignore-styles",
"test-watch": "npm test -- --watch"
 },
"babel": {
"presets": [
  "es2015",
  "react",
  "stage-3"
]
},
"author": "Catalin Luntraru",
"license": "MIT",
"dependencies": {
"react": "^15.4.2",
"react-bootstrap": "^0.30.7",
"react-dom": "^15.4.2",
"react-redux": "^5.0.2",
"react-router": "^3.0.1",
"react-router-bootstrap": "^0.23.1",
"react-router-redux": "^4.0.7",
"redux": "^3.6.0",
"redux-form": "^6.4.3",
"redux-saga": "^0.14.3"
},
"devDependencies": {
"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"babel-polyfill": "^6.20.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-3": "^6.17.0",
"babel-runtime": "^6.20.0",
"clean-webpack-plugin": "^0.1.15",
"css-loader": "^0.26.1",
"enzyme": "^2.7.0",
"extract-text-webpack-plugin": "^1.0.1",
"ignore-styles": "^5.0.1",
"mocha": "^3.2.0",
"node-sass": "^4.3.0",
"react-addons-test-utils": "^15.4.2",
"react-hot-loader": "^1.3.1",
"redux-freeze": "^0.1.5",
"sass-loader": "^4.1.1",
"style-loader": "^0.13.1",
"webpack": "^1.14.0",
"webpack-dev-server": "^1.16.2",
"whatwg-fetch": "^2.0.1"
}
}

【问题讨论】：

这看起来像是浏览器中的错误。您是否可能包含原始来源而不是捆绑包？
你想让我告诉你浏览器引起的错误吗？
不，我问的是您在 HTML 中包含哪些 JavaScript。唯一应该包含的文件是bundle.js。如果您包含原始来源，例如src/index.js,，它将不起作用，因为有导入语句，在浏览器中不起作用。
没有即时消息包括这样的捆绑包<div id="app"> <script src="/js/bundle.js"></script> </div>
抱歉有任何误解，我对此有点陌生，因此非常缺乏经验@MichaelJungo

标签： reactjs webpack redux

【解决方案1】：

错误出现在 webpack.config.js 中，因为 babel 加载器未正确包含在配置文件中。将代码更改为：

         module: {
           loaders: [
              { test: /\.(js|jsx)$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                presets: ['react', 'es2015']
                  }
              },

【讨论】：

【解决方案2】：

我看到的错误行表示 babel 未正确转换的错误。

请看这个， "unexpected token import" in Nodejs5 and babel?

另外，请添加 index.js 入口文件 package.json 以提供更多信息。

希望这会有所帮助！

【讨论】：