Question

我正在尝试为我现有的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在服务器端渲染react组件。请在下面找到服务器文件：

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!');
});

Answer 1

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

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

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

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

import { connect } from 'react-redux';

SyntaxError：在node_modules中意外的令牌导入

1 个答案: