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

[JacobDel]

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]

fix: add a next.config.js file with

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

[swapnilgarg7]

Thank you @JacobDel for telling the fix to the issue !

[CodeBlastr]

I get the same error. I created the next.config.js file with those contents above at /frontend/next.config.js and I still get the error.

[CodeBlastr]

okay got it working...

1. had to add the next.config.js as part of the volumes being mounted during composer build. In case anyone else finds it helpful here's the relevant part of my compose.yaml

  frontend:
    build: ./frontend
    ports:
      - "3000:3000"  # Map Next.js development server to port 3000
    volumes:
      - ./frontend/components:/app/components
      - ./frontend/pages:/app/pages
      - ./frontend/public:/app/public
      - ./frontend/src:/app/src
      - ./frontend/styles:/app/styles
      - ./frontend/utils:/app/utils
      - ./frontend/next.config.js:/app/next.config.js
    networks:
      - djangocmsnet  # Connect to the shared network
    environment:
      - CHOKIDAR_USEPOLLING=true  # Required for file changes in Docker
      - HOST=0.0.0.0  # Bind Next.js to all interfaces

2. Then inside my container I had to run yarn add -D @svgr/webpack.