ReactInvalidComponentException: Could not find a component named 'Components.CommentsBox'. Did you forget to add it to App_Start\ReactConfig.cs?

Thanks for filing a bug! To save time, if you're having trouble using the library, please check off the items you have tried. If you are just asking a question, skip right to the bottom.

Please verify these steps before filing an issue, and check them off as you go

[x ] The relevant native JavascriptEngineSwitcher library packages are installed (such as JavaScriptEngineSwitcher.V8.Native.win-x64)
[ x] The VC++ 2017 runtime is installed
[ x] The value of SetUseReact and SetUseBabel is correct in ReactConfig.cs or Startup.cs
[ x] I've looked at the sample projects in this repo to verify that my app is configured correctly

I'm using these library versions:

-ReactJS.NET: React.Core 5.2.11, React.AspNet 5.2.11 -JavaScriptEngineSwitcher: JavaScriptEngineSwitcher.V8 3.12.15 -react and react-dom: (N/A if using bundled react, or version number) N/A -webpack: (N/A if using bundled react) 4.43.0 -node: (N/A if using bundled react) N/A

Runtime environment:

OS: (Mac, Windows, Linux flavor. Include 32-bit/64-bit and version)
.NET Framework or .NET Core Version:

Steps to reproduce

Install files for React JS Net. Add assets to web project. Complete webpack installation process using node and npm. Add components folder and relevant files from sample. Add views and models to home controller for testing purposes and add initial code to render root component.

I cannot render components to the view the same as I can render the RootComponent from my home.jsx file similar to the webpack demo.

I am adding to the expose-components.js file as such:


import React from 'react';
import ReactDOM from 'react-dom';
import ReactDOMServer from 'react-dom/server';

import RootComponent from './home.jsx';
import Emotion from './emotion.jsx'
import CommentsBox from './comments/Sample.jsx'

// any css-in-js or other libraries you want to use server-side
import { ServerStyleSheet } from 'styled-components';
import { renderStylesToString } from 'emotion-server';
import Helmet from 'react-helmet';

global.React = React;
global.ReactDOM = ReactDOM;
global.ReactDOMServer = ReactDOMServer;

global.Styled = { ServerStyleSheet };
global.Helmet = Helmet;

global.Components = { RootComponent };
global.Emotion = { Emotion };
global.CommentsBox = { CommentsBox };

Then I am attempting to call my component in the view as such:

@using React.AspNet
@{
    ViewData["Title"] = "Comments";
}
<div class="text-center">
    <h1 class="display-4">Comments</h1>
    @Html.React("Components.CommentsBox", new { someProp = "some value from .NET" })
</div>
@Html.ReactInitJavaScript();

I am getting the following error: ReactInvalidComponentException: Could not find a component named 'Components.CommentsBox'. Did you forget to add it to App_Start\ReactConfig.cs?

My web pack file is here:

const path = require('path');
const ManifestPlugin = require('webpack-manifest-plugin');

module.exports = {
    entry: './components/expose-components.js',
    output: {
        filename: '[name].[contenthash:8].js',
        globalObject: 'this',
        path: path.resolve(__dirname, 'wwwroot/dist'),
        publicPath: '/dist/'
    },
    mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
    optimization: {
        runtimeChunk: {
            name: 'runtime', // necessary when using multiple entrypoints on the same page
        },
        splitChunks: {
            cacheGroups: {
                commons: {
                    test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
                    name: 'vendor',
                    chunks: 'all',
                },
            },
        },
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
            },
        ],
    },
    plugins: [
        new ManifestPlugin({
            fileName: 'asset-manifest.json',
            generate: (seed, files) => {
                const manifestFiles = files.reduce((manifest, file) => {
                    manifest[file.name] = file.path;
                    return manifest;
                }, seed);

                const entrypointFiles = files.filter(x => x.isInitial && !x.name.endsWith('.map')).map(x => x.path);

                return {
                    files: manifestFiles,
                    entrypoints: entrypointFiles,
                };
            },
        }),
    ]
};

And I'm able to reference the home.jsx file as such in my index file:

@using React.AspNet
@{
    ViewData["Title"] = "Home Page";
}
<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    @Html.React("Components.RootComponent", new
    {
  someProp = "some value from .NET"
})
</div>
@Html.ReactInitJavaScript();

The above code renders fine but my comments box code does not work.

Any insight is appreciated on this.

reactjs / React.NET