Question

我一直在尝试使用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"
}
}

Answer 1

我看到的错误行表示babel没有正确描述错误。

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

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

希望这有帮助！

Answer 2

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

s-;

Webpack - Uncaught SyntaxError：使用Redux导入意外的令牌

2 个答案: