尝试使用 ReactJS.NET 和 MVC 5 编译 React 服务器端组件时，Webpack 错误“错误：最终加载程序没有返回缓冲区或字符串”答案

【问题标题】：Webpack error 'Error: Final loader didn't return a Buffer or String' when trying to compile React server side components using ReactJS.NET and MVC 5尝试使用 ReactJS.NET 和 MVC 5 编译 React 服务器端组件时，Webpack 错误“错误：最终加载程序没有返回缓冲区或字符串”
【发布时间】：2017-11-23 15:32:05
【问题描述】：

在尝试使用 Webpack 2 和 ReactJS.NET 编译 JSX 组件以进行服务器端渲染时，我收到以下错误消息：“模块构建失败：错误：最终加载程序没有返回缓冲区或字符串”。我已经按照here 和this example. 中描述的示例进行了操作

我的文件夹结构类似于 Github 示例，我有一个 React 组件、一个 index.js 文件和一个 server.js 文件。以下是内容：

/Content/components/TestComponent.jsx

var React = require('react');

class Test extends React.Component {
    getInitialState() {
        return { data: this.props.greeting };
    }
    render() {
        return (
            <div>
                <h1>{this.props.greeting}</h1>
            </div>);
    }
}

module.exports = Test;

/Content/components/index.js

module.exports = {
    Test: require('./TestComponent.jsx')
}

/Content/server.js

var Components = require('expose?Components!./components');

这是我完整的 webpack.config.js：

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: './Content/server',
    output: {
        path: __dirname + '/resources/dev/scripts/server',
        filename: 'test.js'
    },
    module: {
        rules: [
            {
                test: /\.js$|.jsx$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['env', 'react'],
                }
            }
            {
                test: require.resolve('react'),
                loader: 'expose?React'
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    externals: {
        react: 'React'
    }
}

我创建了一个示例项目here 有同样的问题。

【问题讨论】：

标签： asp.net-mvc reactjs webpack-2 reactjs.net

【解决方案1】：

解决方案是取消 /Content/server.js 文件，而是使用 webpack 中的暴露加载器。这是更新后的 webpack.config.js：

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: './Content/components/index',
    output: {
        path: __dirname + '/resources/dev/scripts/server',
        filename: 'test.js'
    },
    module: {
        rules: [
            {
                test: /\.js$|.jsx$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['env', 'react'],
                }
            },
            {
                test: require.resolve('./Content/components/index'),
                use: [{
                    loader: 'expose-loader',
                    options: 'Components'
                }]
            },
            {
                test: require.resolve('react'),
                use: [{
                    loader: 'expose-loader',
                    options: 'React'
                }]
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx']
    }
}

【讨论】：