SyntaxError：node_modules 中的意外令牌导入答案

【问题标题】：SyntaxError: Unexpected token import in node_modulesSyntaxError：node_modules 中的意外令牌导入
【发布时间】：2018-07-25 06:24:17
【问题描述】：

我正在尝试为我现有的 React 项目设置服务器端渲染。编译 react-redux 节点模块时抛出以下错误：

SyntaxError: Unexpected token import
at createScript (vm.js:56:10)
at Object.runInThisContext (vm.js:97:10)
at Module._compile (module.js:549:28)
at Object.Module._extensions..js (module.js:586:10)
at Module.load (module.js:494:32)
at tryModuleLoad (module.js:453:12)
at Function.Module._load (module.js:445:3)
at Module.require (module.js:504:17)
at require (internal/module.js:20:19)
at Object.module.exports.Object.defineProperty.value (server.js:737:18)

我的 webpack 配置如下所示：

const nodeExternals = require('webpack-node-externals'); 
const path = require('path');
module.exports = {
target: 'node',
externals: [nodeExternals()],
entry: path.resolve(__dirname, '..', 'src/server/index.js'),
output: {
    path: path.resolve(__dirname, '..', 'dist'),
    publicPath: '/dist/',
    filename: 'server.js',
    library: 'app',
    libraryTarget: 'commonjs2'
},
resolve: {
    extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
    alias: {
        components: path.resolve(__dirname, '..', 'src/components')
    }
},
module: {
    rules: [
        {
            test: /\.(js|jsx|mjs)$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
              presets: ['es2015', 'react', 'stage-0']
            }
        },
        {
            test: /\.scss$/,
            loader: 'css-loader/locals'
        },
        {
            test: /\.(ttf|eot|otf|svg|png)$/,
            loader: 'file-loader?emitFile=false'
        },
        {
            test: /\.(woff|woff2)$/,
            loader: 'url-loader?emitFile=false'
        }
    ]
}

};

我在我的服务器中使用上面的 webpack 在服务器端呈现反应组件。请在下面找到服务器文件：

const express = require('express');
const webpack = require('webpack');
const path = require('path');
const requireFromString = require('require-from-string');
const MemoryFS = require('memory-fs');
const serverConfig = require('../config/webpack.server.js');
const fs = new MemoryFS();
const outputErrors = (err, stats) => {
    if (err) {
         console.log('************ERRORS************');
         console.error(err.stack || err);
         if (err.details) {
              console.error(err.details);
         }
         return;
    }

    const info = stats.toJson();
    if (stats.hasErrors()) {
        console.error(info.errors);
    }
    if (stats.hasWarnings()) {
        console.warn(info.warnings);
    }
};
console.log('(☺)Initializing server application');
const app = express();
console.log('(☺)Compiling bundle');
const serverCompiler = webpack(serverConfig);
console.log('(☺)Compiler initialized');
serverCompiler.outputFileSystem = fs;
console.log('(☺)Output filestream defined');
serverCompiler.run((err, stats) => {
    outputErrors(err, stats);
    const contents = fs.readFileSync(path.resolve(serverConfig.output.path, serverConfig.output.filename), 'utf8');
    const app1 = requireFromString(contents, serverConfig.output.filename);
    app.get('*', app1.default);
    app.listen(3000);
    console.log('(☺)Server listening on port 3000!');
});

【问题讨论】：

你运行的是什么版本的节点？
我正在运行 v6.14.3
import 似乎不支持该版本：stackoverflow.com/questions/39436322
我也用 node v10.7.0 试过了，但是好像不行。
它在 10.7 中仍处于试验阶段：nodejs.org/api/esm.html - 您需要使用标志启用它们。

标签： reactjs webpack react-redux babeljs server-side-rendering

【解决方案1】：

我发现了问题！这是因为我们使用绝对路径从 react-redux 导入 connect 方法：

import connect from 'react-redux/es/connect/connect';

这将始终指向您未编译的节点模块。因此我们看到了上面的 ES6 错误。

我用下面的语句替换了它，它开始正常工作了。

import { connect } from 'react-redux';

【讨论】：