search

reduxjs / react-redux

Official React bindings for Redux
https://react-redux.js.org
MIT License
23.37k stars 3.37k forks source link

Warning: React.createElement: type is invalid -- expected a string (for built-in components) after update from 5.0.6 #1666

Closed romanown closed 3 years ago

romanown commented 3 years ago

after update react-redux to 7.2.1 after compiling i have Warning: React.createElement: type is invalid -- expected a string (for built-in components) and Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. npm install --save redux@4.0.5 npm install --save react-redux@7.2.1 npm install --save-dev redux-devtools@3.6.1 other changes do not.

romanown commented 3 years ago

when i updated only react-redux error Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

timdorr commented 3 years ago

The issue tracker here on GitHub is reserved for bug reports and feature requests. For usage questions (which is what I believe this is), please use Stack Overflow or Reactiflux where there are a lot more people ready to help you out. Thanks!

Please feel free to reply if you think this issue was closed prematurely.

romanown commented 3 years ago

but if I use the old version there are no errors. if i use react-redux@5.1.2 no problem. but if go to react-redux@6.0.1 i have this issue. Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

react@16.13.1
react-dom@16.13.1
markerikson commented 3 years ago

@romanown Ideally, we'd need to see a project that reproduces the issue to have any way of knowing what's going on here, or at a bare minimum, an actual stack trace. Just pasting that error message is not enough info.

However, this is almost definitely not a bug in React-Redux. Per Tim's advice, your best option is to go ask for help in Reactiflux.

romanown commented 3 years ago

thank You. stack trace

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at invariant (/var/www/dev.site.ru/node-server/node_modules/fbjs/lib/invariant.js:42:15)
    at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (/var/www/dev.site.ru/node-server/node_modules/react-dom/lib/instantiateReactComponent.js:77:5
    at ReactCompositeComponentWrapper.performInitialMount (/var/www/dev.site.ru/node-server/node_modules/react-dom/lib/ReactCompositeComponent.js:367:22)
    at ReactCompositeComponentWrapper.mountComponent (/var/www/dev.site.ru/node-server/node_modules/react-dom/lib/ReactCompositeComponent.js:258:21)
    at Object.mountComponent (/var/www/dev.site.ru/node-server/node_modules/react-dom/lib/ReactReconciler.js:46:35)
    at ReactCompositeComponentWrapper.performInitialMount (/var/www/dev.site.ru/node-server/node_modules/react-dom/lib/ReactCompositeComponent.js:371:34)
    at ReactCompositeComponentWrapper.mountComponent (/var/www/dev.site.ru/node-server/node_modules/react-dom/lib/ReactCompositeComponent.js:258:21)
    at Object.mountComponent (/var/www/dev.site.ru/node-server/node_modules/react-dom/lib/ReactReconciler.js:46:35)
    at /var/www/dev.site.ru/node-server/node_modules/react-dom/lib/ReactServerRendering.js:45:36
    at ReactServerRenderingTransaction.perform (/var/www/dev.site.ru/node-server/node_modules/react-dom/lib/Transaction.js:140:20)
    at renderToStringImpl (/var/www/dev.site.ru/node-server/node_modules/react-dom/lib/ReactServerRendering.js:43:24)
    at renderToString (/var/www/dev.site.ru/node-server/node_modules/react-dom/lib/ReactServerRendering.js:73:10)
    at exports.renderer (/var/www/dev.site.ru/node-server/app/lib/render.jsx:12:10)

upgrading from react-redux@5.1.2 to react-redux@6.0.1 have not bracking changes. uptading 5.0.6 to 5.1.2 have not problem. but to 6.0.1 have the problem.

first state package.json

 "dependencies": {
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
    "@babel/polyfill": "^7.0.0",
    "axios": "^0.21.0",
    "eslint": "^4.11.0",
    "font-awesome": "^4.7.0",
    "jquery": "^3.2.1",
    "lodash": "^4.17.4",
    "moment": "^2.19.2",
    "react": "^16.13.1",
    "react-datepicker": "^0.61.0",
    "react-dom": "^16.13.1",
    "react-input-mask": "^1.0.7",
    "react-modal": "^3.12.1",
    "react-redux": "^5.0.6",
    "react-slick": "^0.27.10",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0",
    "tiny-slider": "^2.9.3",
    "urijs": "^1.19.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-syntax-object-rest-spread": "^7.0.0",
    "@babel/preset-env": "^7.12.7",
    "@babel/preset-react": "^7.12.7",
    "babel-loader": "^8.0.0-beta.0",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.2",
    "node-sass": "^4.14.1",
    "reactify": "^1.1.1",
    "redux-devtools": "^3.4.1",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.0",
    "ts-loader": "^3.5.0",
    "typescript": "^4.1.2",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "webpack": "^3.8.1",
    "webpack-merge": "^4.1.1"
  }
}

app

let {Provider} = require('react-redux');
let React = require('react');

exports = (Component, store) => {
return (
<Provider store={store}>
<Component />
</Provider>
);
};
timfisher commented 3 years ago

I'm seeing this same issue, how did you solve this @romanown ?

romanown commented 3 years ago

it was a long time ago and I don't really remember how I solved the problem. but as far as I remember, after I updated all the packages, the problem disappeared. my new the package.json


"dependencies": {
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
    "@babel/polyfill": "^7.0.0",
    "axios": "^0.21.0",
    "bluebird": "^3.4.7",
    "body-parser": "^1.16.1",
    "cookie-parser": "^1.4.3",
    "dotenv": "^4.0.0",
    "eslint": "^4.11.0",
    "express": "^4.14.1",
    "font-awesome": "^4.7.0",
    "jquery": "^3.2.1",
    "lodash": "^4.17.4",
    "moment": "^2.19.2",
    "path": "^0.12.7",
    "react": "^16.13.1",
    "react-datepicker": "^0.61.0",
    "react-dom": "^16.13.1",
    "react-input-mask": "^1.0.7",
    "react-modal": "^3.12.1",
    "react-redux": "^7.2.1",
    "react-slick": "^0.27.10",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "request": "^2.79.0",
    "request-promise": "^4.1.1",
    "tiny-slider": "^2.9.3",
    "urijs": "^1.19.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-syntax-object-rest-spread": "^7.0.0",
    "@babel/preset-env": "^7.12.7",
    "@babel/preset-react": "^7.12.7",
    "babel-loader": "^8.0.0-beta.0",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.2",
    "node-sass": "^4.14.1",
    "reactify": "^1.1.1",
    "redux-devtools": "^3.6.1",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.0",
    "ts-loader": "^3.5.0",
    "typescript": "^4.1.2",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "webpack": "^3.8.1",
    "webpack-bundle-analyzer": "^4.4.0",
    "webpack-merge": "^4.1.1"
  }
timfisher commented 3 years ago

@romanown thanks for your fast reply, in my case it seems sass files were being loaded as components as they have the same name, not sure how. They were being passed as objects hence the error so don't think it's a redux problem