naufaldi / next-landing-vpn

An Open Source Landingpage For VPN or Apps. Build using NextJS 12 and Tailwind v3.0
https://next-landing-vpn.vercel.app/
MIT License
455 stars 269 forks source link

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. #36

Open JacobDel opened 1 month ago

JacobDel commented 1 month ago

Reproduce:

  1. cloned repo
  2. yarn install
  3. yarn dev

error:

ano@anos-MacBook-Pro frontpage % yarn dev
yarn run v1.22.19
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 180 ms (179 modules)
wait  - compiling /_error (client and server)...
event - compiled client and server successfully in 66 ms (180 modules)
warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works
wait  - compiling / (client and server)...
event - compiled client and server successfully in 115 ms (572 modules)
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check your code at Pricing.js:195.
    at Pricing (webpack-internal:///./components/Pricing.js:32:75)
    at Layout (webpack-internal:///./components/Layout/Layout.js:15:19)
    at Home
    at MyApp (webpack-internal:///./pages/_app.js:14:18)
    at StyleRegistry (/Users/ano/gitrepo/node_modules/styled-jsx/dist/index/index.js:448:36)
    at AppContainer (/Users/ano/gitrepo/node_modules/next/dist/server/render.js:298:29)
    at AppContainerWithIsomorphicFiberStructure (/Users/ano/gitrepo/node_modules/next/dist/server/render.js:327:57)
    at div
    at Body (/Users/ano/gitrepo/node_modules/next/dist/server/render.js:614:21)
error - Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at ReactDOMServerRenderer.render (/Users/ano/gitrepo/node_modules/react-dom/cjs/react-dom-server.node.development.js:4053:17)
    at ReactDOMServerRenderer.read (/Users/ano/gitrepo/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
    at Object.renderToString (/Users/ano/gitrepo/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
    at Object.renderPage (/Users/ano/gitrepo/node_modules/next/dist/server/render.js:680:46)
    at Object.defaultGetInitialProps (/Users/ano/gitrepo/node_modules/next/dist/server/render.js:350:67)
    at Document.getInitialProps (webpack-internal:///./node_modules/next/dist/pages/_document.js:19:20)
    at MyDocument.getInitialProps (webpack-internal:///./pages/_document.js:13:89)
    at Object.<anonymous> (/Users/ano/gitrepo/node_modules/next/dist/shared/lib/utils.js:75:33)
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/Users/ano/gitrepo/node_modules/@swc/helpers/lib/_async_to_generator.js:23:28) {
  page: '/'
}
JacobDel commented 1 month ago

fix: add a next.config.js file with

module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"],
    });
    return config;
  },
};