undefined error at runtime while using react-redux along with ASP.NET Core

Question

I'm using react/redux in an ASP.NET Core application and everything goes smooth if i don't include redux but after adding redux and change current components to connect to the store, i get following errors in the browser (after publish the website t wwwroot folder):

ReferenceError: Provider is not defined

or

ReferenceError: connect is not defined

...

Note that in my wwwwroot folder i have added the react-redux.js file which exists in dist folder of react-redux module in node-modules.

---node_modules\react-redux\dist\react-redux.js----

in the following i put the code of one of my containers which shows me error at runtime in the browser:

declare var { connect }: typeof import("react-redux");

import { addTodo } from '../redux/actions/todo-actions.js';
import AddTodoForm from '../components/AddTodoForm.js';

const mapDispatchToProps = {
    handleSubmit: addTodo
};

export default connect<any, any, any>(null, mapDispatchToProps)(AddTodoForm)

To me it sounds like, the reaxt-redux.js that i have added to the wwwroot folder isn't exporting its interfaces (specifically connect interface) into the window properly!

Consider that i'm not having node-modules and npm on my servers so i prefer to reference the react,redux and react-redux javascript files manually in my pages.

Can you please let me know what i'm doing wrong?

Thanks in advance

Answer 1

I found the issue. As i was using Webpack, as i had more than one component on the page, the redux store was bundled and added more than once. Needed to change the store.tsx to prevent it.