Question

我正在尝试在NetCore2上添加ReactJS.NET。我将使用net core应用程序通过令牌和类似的东西检索一些json信息。

我遇到了很多问题（即使我遵循有关其实现的教程）。

此刻我遇到诸如React.Exceptions.ReactScriptLoadException: Error while loading "~/React/main.js": SyntaxError: Module import or export statement unexpected here

之类的错误

我不知道为什么会这样，但是我确实有几个问题（除了如何解决问题）。

目前，我的反应来源位于-> wwwwroot / React / Components。该文件夹还包含一个“ main.js”，我想用它来加载我的应用程序。因为webpack已经在wwwroot / dist / bundle.js中建立了文件，有没有办法将源添加到wwwroot之后（用户无法访问）？

也...任何人都有关于如何将手表添加到NetCore2的任何文章/教程？我真的忘了怎么做...

关于我的问题，这里是我的配置->

webpack.config.js

const path = require('path');

module.exports = {
    // This is our entry point containing the code 
    // required to perform server-side rendering.
    entry: './wwwroot/React/main.js',
    output: {
        path: path.resolve(__dirname, 'wwwroot/dist'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        // Transform .jsx files.
        rules: [
            {
                loader: 'file-loader?name=[name].[ext]',
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    "presets": [
                        "@babel/preset-react",
                        "@babel/preset-env"
                    ],
                    "plugins": [
                        "@babel/plugin-proposal-class-properties"
                    ]
                },

            },
        ],
    },
    resolve: {
        // Ensure we can deal with .js and .jsx and require files.
        extensions: ['.js', '.jsx']
    },
    // Set mode for development, production or none.
    mode: 'none'
};

Startup.cs

        app.UseReact(config =>
        {
            config
                .SetLoadReact(true)
                .SetLoadBabel(true)
                .AddScriptWithoutTransform("~/dist/bundle.js")
                .AddScript("~/React/main.js");
        });
        services.AddJsEngineSwitcher(options => options.DefaultEngineName = ChakraCoreJsEngine.EngineName)
                .AddChakraCore();
        services.AddReact();

main.js-引发错误的代码-我添加了IF，因为在某个时候我遇到了诸如“未定义文档”之类的错误

import ReactDOM from 'react-dom';
import React from 'react';
import App from './Components/App';


if (typeof window !== 'undefined') {
    ReactDOM.render(<App />, document.getElementById('content'));
}

最后是我的观点ReactTest.cshtml

@{
    ViewData["Title"] = "ReactTest";
}
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin="true"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin="true"></script>



@Html.ReactInitJavaScript()
@Html.React("App", new { initialComments = Model.SPOResponse })
<h2>ReactTest</h2>

<div id="content"></div>

关于如何清理/更好地配置它的任何提示？

非常感谢。

更新：

通过遵循此示例-> https://github.com/reactjs/React.NET/tree/master/src/React.Sample.Webpack.CoreMvc

，我设法清理了一下代码

但是...不，我有另一个问题。 React.Exceptions.ReactServerRenderingException: Error while rendering "RootComponent" to "react_0HLI7923A7GRL": Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

我的main.js看起来像这样->

require('expose-loader?React!react');
require('expose-loader?ReactDOM!react-dom');
require('expose-loader?ReactDOMServer!react-dom/server');

require('expose-loader?RootComponent!./App.jsx');

我的看法已更改为

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin="true"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin="true"></script>


@Html.React("RootComponent", new { initialComments = Model.SPOResponse })
<script src="~/dist/bundle.js"></script>
@Html.ReactInitJavaScript()

如果我尝试将App.jsx内容直接添加到main.js中，则会出现错误消息，告诉我我需要用于此类内容的加载程序，即使我的webpack.config.js确实包含{{1} }

无法在NetCore 2上添加ReactJS.NET

0 个答案: