Question

我正在我的React visual studio项目中尝试使用新的React上下文。

我在codeandbox https://codesandbox.io/s/1ox35o4l9q上的工作非常不错，但是-当我将完全相同的代码复制到Visual Studio中到我的React项目中时，我收到一条错误消息。

vendor.js？v = OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE：118未捕获的错误：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到了：对象。不变（vendor.js？v = OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE：118）在ReactCompositeComponentWrapper.instantiateReactComponent上[作为_instantiateReactComponent]（vendor.js？v = OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE：20273）在ReactCompositeComponentWrapper.performInitialMount（vendor.js？v = OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE：29799）在ReactCompositeComponentWrapper.mountComponent（vendor.js？v = OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE：29690）在Object.mountComponent（vendor.js？v = OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE：12868）在ReactCompositeComponentWrapper.performInitialMount（vendor.js？v = OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE：29803）在ReactCompositeComponentWrapper.mountComponent（vendor.js？v = OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE：29690）在Object.mountComponent（vendor.js？v = OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE：12868）在ReactCompositeComponentWrapper.performInitialMount（vendor.js？v = OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE：29803）在ReactCompositeComponentWrapper.mountComponent（vendor.js？v = OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE：29690）

我正在使用webpack，我想这可能是罪魁祸首，但我真的不知道我在寻找什么。我真的希望有人在我完全茫然的情况下能有所作为。我将以下代码从codeandbox复制到boot.js脚本文件中。

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const bundleOutputDir = './wwwroot/dist';

module.exports = (env) => {
    const isDevBuild = !(env && env.prod);
    return [
        {
            stats: { modules: false },
            entry: { main: "./ClientApp/boot.js" },
            resolve: { extensions: [".js", ".jsx"] },
            output: {
                path: path.join(__dirname, bundleOutputDir),
                filename: "[name].js",
                publicPath: "dist/"
            },
            module: {
                rules: [
                    {
                        test: /\.js$/,
                        exclude: /(node_modules|bower_components)/,
                        use: {
                            loader: "babel-loader",
                            options: {
                                presets: ["babel-preset-env", "react"],
                                plugins: [
                                    "react-hot-loader/babel",
                                    "transform-class-properties"
                                ]
                            }
                        }
                    },
                    {
                        test: /\.css$/,
                        use: isDevBuild
                            ? ["style-loader", "css-loader"]
                            : ExtractTextPlugin.extract({ use: "css-loader?minimize" })
                    },
                    { test: /\.(png|jpg|jpeg|gif|svg)$/, use: "url-loader?limit=25000" }
                ]
            },
            plugins: [
                new webpack.DllReferencePlugin({
                    context: __dirname,
                    manifest: require("./wwwroot/dist/vendor-manifest.json")
                })
            ].concat(
                isDevBuild
                    ? [
                        // Plugins that apply in development builds only
                        new webpack.SourceMapDevToolPlugin({
                            filename: "[file].map", // Remove this line if you prefer inline source maps
                            moduleFilenameTemplate: path.relative(
                                bundleOutputDir,
                                "[resourcePath]"
                            ) // Point sourcemap entries to the original file locations on disk
                        })
                    ]
                    : [
                        // Plugins that apply in production builds only
                        new webpack.optimize.UglifyJsPlugin(),
                        new ExtractTextPlugin("site.css")
                    ]
            )
        }
    ];
};

ReactJs上下文-不适用于Visual Studio React模板

0 个答案: