SyntaxError：意外令牌導入Webpack 2 Babel 6 Reactjs

Question

我正在升級Babel和Webpack的過程中。我看過這個錯誤，嘗試了所有可能的想法。因此，我不知所措。我感謝任何見解。

的誤差是

SyntaxError: Unexpected token import

.babelrc

{ 
    "presets": [ 
    "es2015", 
    "react", 
    "stage-0" 
    ], 
    "plugins": [ 
    "add-module-exports", 
    "transform-decorators-legacy", 
    "transform-runtime", 
    "transform-react-display-name" 
    ], 
    "env": { 
    "development": { 
     "plugins": [ 
     "typecheck", 
     [ 
      "react-transform", 
      { 
      "transforms": [ 
       { 
       "transform": "react-transform-catch-errors", 
       "imports": [ 
        "react", 
        "redbox-react" 
       ] 
       } 
      ] 
      } 
     ] 
     ] 
    } 
    } 
} 

dev.config.js（的WebPack配置用於DEV）

require('babel-polyfill'); 

    // Webpack config for development 
    var fs = require('fs'); 
    var path = require('path'); 
    var webpack = require('webpack'); 
    var assetsPath = path.resolve(__dirname, '../static/dist'); 
    var host = (process.env.HOST || 'localhost'); 
    var port = parseInt(process.env.PORT) + 1 || 3001; 
    var themePath = path.join(__dirname, '../src/theme'); 

    // https://github.com/halt-hammerzeit/webpack-isomorphic-tools 
    var WebpackIsomorphicToolsPlugin = require('webpack-isomorphic-tools/plugin'); 
    var webpackIsomorphicToolsPlugin = new WebpackIsomorphicToolsPlugin(require('./webpack-isomorphic-tools')); 

    var babelrc = fs.readFileSync('./.babelrc'); 
    var babelrcObject = {}; 

    try { 
     babelrcObject = JSON.parse(babelrc); 
    } catch (err) { 
     console.error('==>  ERROR: Error parsing your .babelrc.'); 
     console.error(err); 
    } 

    var babelrcObjectDevelopment = babelrcObject.env && babelrcObject.env.development || {}; 

    // merge global and dev-only plugins 
    var combinedPlugins = babelrcObject.plugins || []; 
    combinedPlugins = combinedPlugins.concat(babelrcObjectDevelopment.plugins); 

    var babelLoaderQuery = Object.assign({}, babelrcObjectDevelopment, babelrcObject, {plugins: combinedPlugins}); 
    delete babelLoaderQuery.env; 

    // Since we use .babelrc for client and server, and we don't want HMR enabled on the server, we have to add 
    // the babel plugin react-transform-hmr manually here. 

    // make sure react-transform is enabled 
    babelLoaderQuery.plugins = babelLoaderQuery.plugins || []; 
    var reactTransform = null; 
    for (var i = 0; i < babelLoaderQuery.plugins.length; ++i) { 
     var plugin = babelLoaderQuery.plugins[i]; 
     if (Array.isArray(plugin) && plugin[0] === 'react-transform') { 
     reactTransform = plugin; 
     } 
    } 

    if (!reactTransform) { 
     reactTransform = ['react-transform', {transforms: []}]; 
     babelLoaderQuery.plugins.push(reactTransform); 
    } 

    if (!reactTransform[1] || !reactTransform[1].transforms) { 
     reactTransform[1] = Object.assign({}, reactTransform[1], {transforms: []}); 
    } 

    // make sure react-transform-hmr is enabled 
    reactTransform[1].transforms.push({ 
     transform: 'react-transform-hmr', 
     imports: ['react'], 
     locals: ['module'] 
    }); 

    module.exports = { 
     devtool: 'inline-source-map', 
     context: path.resolve(__dirname, '..'), 
     entry: { 
     'main': [ 
      'webpack-hot-middleware/client?path=http://' + host + ':' + port + '/__webpack_hmr', 
      `bootstrap-loader?configFilePath=${themePath}/bs3.yml`, 
      'font-awesome-webpack!./src/theme/font-awesome.config.js', 
      './src/client.js' 
     ] 
     }, 
     output: { 
     path: assetsPath, 
     filename: '[name]-[hash].js', 
     chunkFilename: '[name]-[chunkhash].js', 
     publicPath: 'http://' + host + ':' + port + '/dist/' 
     }, 
     module: { 
     rules: [ 
      { 
      test: /\.jsx$/, 
      exclude: /node_modules/, 
      use: [ 
       { 
       loader:'babel-loader?' + JSON.stringify(babelLoaderQuery) 
       }, 
       'eslint-loader'] 
      }, 
      { 
      test: /\.css$/, 
      use: [ 
       'style-loader', 
       { 
       loader: 'css-loader', 
       options: { importLoaders: 1 } 
       }, 
       'postcss-loader' 
      ] 
      }, 
      { 
      test: /\.less$/, 
      use: [ 
       'style-loader', 
       { 
       loader: 'css-loader', 
       options: { modules: true, importLoaders: 2, sourceMap: true, localIdentName: 'local]___[hash:base64:5]' } 
       }, 
       'postcss-loader', 
       { 
       loader: 'less-loader', 
       options: { outputStyle: "expanded", sourceMap: 'true' } 
       }] 
      }, 
      { 
      test: /\.scss$/, 
      use: [ 
       { loader: 'style-loader' }, { 
       loader: 'css-loader?sourceMap', 
       options: { sourceMap: true, importLoaders: 2 } 
       }, 
       'postcss-loader', 
       { 
       loader: 'sass-loader', 
       options: { outputStyle: "expanded", sourceMap: 'true' } 
       }] 
      }, 
      { 
      test: /.(woff(2)?)(\?[a-z0-9=\.]+)?$/, 
      use: [ 
       { 
       loader: 'url-loader', 
       options: { limit: 10000, mimetype: 'application/font-woff' } 
       } 
      ] 
      }, 
      { test: /.(eot)(\?[a-z0-9=\.]+)?$/, loader: 'file-loader' }, 
      { 
      test: /.(ttf)(\?[a-z0-9=\.]+)?$/, 
      use: [ 
       { 
      loader: 'url-loader', 
      options: { limit: 10000, mimetype: 'application/octet-stream' } 
      } 
     ] 
     }, 
     { 
     test: /.(svg)(\?[a-z0-9=\.]+)?$/, 
     use: [ 
      { 
      loader: 'url-loader', 
      options: { limit: 10000, mimetype: 'image/svg+xml' } 
      } 
     ] 
     }, 
     // {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'}, 
     // {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'}, 
     // {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}, 
     // {test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'}, 
     { test: webpackIsomorphicToolsPlugin.regular_expression('images'), loader: 'url-loader?limit=10240' } 
    ] 
    }, 
    resolve: { 
    modules: [ 
     'src', 
     'node_modules' 
    ], 
    extensions: ['.json', '.js', 'jsx'] 
    }, 
    plugins: [ 
    // hot reload 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.IgnorePlugin(/webpack-stats\.json$/), 
    new webpack.DefinePlugin({ 
     __CLIENT__: true, 
     __SERVER__: false, 
     __DEVELOPMENT__: true, 
     __DEVTOOLS__: true // <-------- DISABLE redux-devtools HERE 
    }), 
    webpackIsomorphicToolsPlugin.development() 
    ] 
}; 

誤差給定爲：

SyntaxError: Unexpected token import 
at exports.runInThisContext (vm.js:53:16) 
at Module._compile (module.js:404:25) 
at loader (/Users/stevenhawley/Dev/com.fdc.app.ui/node_modules/babel-register/lib/node.js:144:5) 
at Object.require.extensions.(anonymous function) [as .js] (/Users/stevenhawley/Dev/com.fdc.app.ui/node_modules/babel-register/lib/node.js:154:7) 
at Module.load (module.js:356:32) 
at Module._load (module.js:313:12) 
at Function.module._load (/Users/stevenhawley/Dev/com.fdc.app.ui/node_modules/piping/lib/launcher.js:32:16) 
at Module.require (module.js:366:17) 
at require (module.js:385:17) 
at Object.<anonymous> (/Users/stevenhawley/Dev/com.fdc.app.ui/src/routes.js:4:1) 

個

routes.js

import React from 'react'; 
import {IndexRoute, Route} from 'react-router'; 
import { isLoaded as isAuthLoaded, isLoading as isAuthLoading, load as loadAuth, hasRolesFetchData } from 'redux/modules/auth'; 
import { 
    AddressValidation, 
    App, 
    Carriers, 
    CarrierMethods, 
    Home, 
    Inventory, 
    Login, 
    Merchants, 
    Merchant, 
    Orders, 
    Order, 
    Printers, 
    Products, 
    Users, 
    User, 
    ReportSubscriptions, 
    ReturnsTool, 
    Skus, 
    NotFound, 
    NotForYou, 
    WarehouseHolidays, 
    Warehouses, 
    WeighStation, 
    ShipMethods, 
    ACL 
} from 'containers'; 

export default (store) => { 
    const requireLogin = (nextState, replace, cb) => { 
    function checkAuth() { 
     const { auth: { account }} = store.getState(); 
     if (!account) { 
     // oops, not logged in, so can't be here! 
     const query = nextState.location.query; 
     query.nextPath = nextState.location.pathname; 
     // {nextPath: nextState.location.pathname, nextQuery: nextState.location.search} 
     replace({pathname: `/login`, query: query}); 
     } else if (!hasRolesFetchData(store.getState(), ['fdc', 'admin', 'developer'])) { 
     replace({pathname: '/sorry'}); 
     } 
     cb(); 
    } 
    const state = store.getState(); 
    if (!isAuthLoaded(state) && !isAuthLoading(state)) { 
     console.log('==== requireLogin, auth not loaded ==='); 
     store.dispatch(loadAuth()).then((resolved) => { 
     // console.log('[Router] loadAuth resolved!'); 
     // console.log(resolved); 
     checkAuth(); 
     }, (rejected) => { 
     // console.log('[Router] loadAuth rejected!'); 
     // console.log(rejected); 
     checkAuth(); 
     }); 
    } else { 
     checkAuth(); 
    } 
    }; 

    /** 
    * Please keep routes in alphabetical order 
    */ 
    return (
    <Route path="/" component={App}> 
     { /* Home (main) route */ } 
     <IndexRoute component={Home}/> 

     { /* Routes requiring login */ } 
     <Route onEnter={requireLogin}> 
     <Route path="addressValidation" component={AddressValidation}/> 
     <Route path="carriers" component={Carriers}/> 
     <Route path="carrierMethods" component={CarrierMethods}/> 
     <Route path="inventory" component={Inventory}/> 
     <Route path="merchants/shippingMethods" component={ShipMethods}/> 
     <Route path="merchants/:id" component={Merchant}/> 
     <Route path="merchants" component={Merchants}/> 
     <Route path="orders" component={Orders}/> 
     <Route path="orders/:id" component={Order}/> 
     <Route path="printers" component={Printers}/> 
     <Route path="products" component={Products}/> 
     <Route path="reportSubscriptions" component={ReportSubscriptions}/> 
     <Route path="returnsTool" component={ReturnsTool}/> 
     <Route path="skus" component={Skus}/> 
     <Route path="users" component={Users}/> 
     <Route path="users/:id" component={User}/> 
     <Route path="warehouseHolidays" component={WarehouseHolidays}/> 
     <Route path="warehouses" component={Warehouses}/> 
     <Route path="weighStation" component={WeighStation}/> 
     <Route path="acl" components={ACL} /> 
     </Route> 

     { /* Routes */ } 
     <Route path="login" component={Login}/> 
     <Route path="sorry" component={NotForYou}/> 

     { /* Catch all route */ } 
     <Route path="*" component={NotFound} status={404}/> 
    </Route> 
); 
}; 

斌/ server.js

#!/usr/bin/env node 
require('../server.babel'); // babel registration (runtime transpilation for node) 
var path = require('path'); 
var rootDir = path.resolve(__dirname, '..'); 
/** 
* Define isomorphic constants. 
*/ 
global.__CLIENT__ = false; 
global.__SERVER__ = true; 
global.__DISABLE_SSR__ = false; // <----- DISABLES SERVER SIDE RENDERING FOR ERROR DEBUGGING 
global.__DEVELOPMENT__ = process.env.NODE_ENV !== 'production'; 

if (__DEVELOPMENT__) { 
    if (!require('piping')({ 
     hook: true, 
     ignore: /(\/\.|~$|\.json|\.scss$)/i 
    })) { 
    return; 
    } 
} 

// https://github.com/halt-hammerzeit/webpack-isomorphic-tools 
var WebpackIsomorphicTools = require('webpack-isomorphic-tools'); 
global.webpackIsomorphicTools = new WebpackIsomorphicTools(require('../webpack/webpack-isomorphic-tools')) 
    .server(rootDir, function() { 
    require('../src/server'); 
    }); 

Answer 1

感謝大家我已經想通了這個問題。在我的.babelrc文件中，我必須刪除transform-runtime插件。這固定它，因爲我已經使用了babel-polyfill。我在某處讀到他們可能會相互衝突，所以不應該一起使用。

我會發布我的.babelrc文件以供參考，如果有人碰巧遇到這個問題。或者只是使用一個例子。

{ 
    "presets": [ 
    "es2015", 
    "react", 
    "stage-0" 
    ], 
    "plugins": [ 
    "add-module-exports", 
    "transform-decorators-legacy", 
    "transform-react-display-name" 
    ], 
    "env": { 
    "development": { 
     "plugins": [ 
     "typecheck", 
     [ 
      "react-transform", 
      { 
      "transforms": [ 
       { 
       "transform": "react-transform-catch-errors", 
       "imports": [ 
        "react", 
        "redbox-react" 
       ] 
       } 
      ] 
      } 
     ] 
     ] 
    } 
    } 
}