React template import package failed to load #368

New Issue

fergalmoran · 2025-08-09T17:16:01Z

fergalmoran commented

2025-08-09 17:16:01 +00:00

Originally created by @origami-z on 10/11/2017

Trying to use this in a .Net Core 2.0 React template application, and the component can not be created. Tried both on a Windows and a Mac, and same error is shown in the browser console

Warning: React.createElement: type is invalid -- expected a string (for built-in components)
or a class/function (for composite components) but got: undefined. You likely forgot to
export your component from the file it's defined in. Check the render method of
FetchData.

What are the steps to reproduce the issue?

Create a new project with .Net Core react template, dotnet new react
Install all packages from the template npm install
Install React table npm install --save react-table
Install React table typescript npm install --save-deve @types/react-table
Edit ClientApp/components/FetchData.tsx
1. Add import {ReactTable} from 'react-table'; at the top
2. Update renderForecastsTable function with the following

        const columns = [
            {
                Header: 'Date formatted',
                accessor: 'dateFormatted'
            }, {
                Header: 'Summary',
                accessor: 'summary'
            }
        ];

        return (
            <ReactTable data={forecasts} columns={columns} />
        );

Run the app
The error appears in the browser console

I'm pretty sure that this applies to almost all npm installed packages I've tried. But I can't work out what's the difference between existing react packages came with the template and the ones I'm trying to use.

I guess there's some webpack setting made this happening. react-table.js doesn't seems to be loaded when I inspect in Chrome resource tab.

*Originally created by @origami-z on 10/11/2017* Trying to use this in a .Net Core 2.0 React template application, and the component can not be created. Tried both on a Windows and a Mac, and same error is shown in the browser console > Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `FetchData`. ## What are the steps to reproduce the issue? 1. Create a new project with .Net Core react template, `dotnet new react` 2. Install all packages from the template `npm install` 3. Install React table `npm install --save react-table` 4. Install React table typescript `npm install --save-deve @types/react-table` 5. Edit `ClientApp/components/FetchData.tsx` 1. Add `import {ReactTable} from 'react-table';` at the top 2. Update `renderForecastsTable` function with the following ``` const columns = [ { Header: 'Date formatted', accessor: 'dateFormatted' }, { Header: 'Summary', accessor: 'summary' } ]; return ( <ReactTable data={forecasts} columns={columns} /> ); ``` 6. Run the app 7. The error appears in the browser console ## I'm pretty sure that this applies to almost all `npm` installed packages I've tried. But I can't work out what's the difference between existing `react` packages came with the template and the ones I'm trying to use. I guess there's some webpack setting made this happening. `react-table.js` doesn't seems to be loaded when I inspect in Chrome resource tab.

fergalmoran closed this issue

2025-08-09 17:16:01 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#368