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

Question

我收到以下错误 - “模块构建失败：错误：最终加载器没有 return 缓冲区或字符串”，当我尝试使用 Webpack 2 和 ReactJS.NET。我已按照 here as well as in 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。

Answer 1

解决方案是取消 /Content/server.js 文件，而是使用 webpack 中的 expose-loader。这是更新后的 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']
    }
}

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

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

asp.net-mvc

reactjs

reactjs.net

webpack-2