Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – NextJS Image Error – React.jsx: type is invalid

I recently updated my app to enforce ES6 by adding "type:module" to my package.json. In addition, I changed the following to accommodate this change.

next.config.js -> next.config.cjs

tailwind.config.js -> tailwind.config.cjs

postcss.config.js -> postcss.config.cjs

The problem is since doing so, I get the following error on all of my Image components :

Warning: React.jsx: 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, or you might have mixed up default and named imports.

Example of the Image component I’m using to render

  <Image
      src="/next.svg"
      fill
      style={{
        objectFit: "contain",
      }}
      alt="Your Company"
   />

It’s imported like import Image from "next/image";

If I remove all of the Image components from my app, it will load fine. It’s important to note I never had an issue before enforcing ES6.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    It turns out that this was an issue with the NextJS Image component. Currently, it seems like the Image component does not support ES Modules. As a result, I was getting the above error.

    Instead of importing it like import Image from "next/image"; import it as

    import ImageModule from 'next/image';
const Image = ImageModule.default;

    You can find more detail on this issue at https://github.com/vercel/next.js/issues/54777


  2. 0

    The error or warning you encountered is typically related to mistakes in import/export, such as using an incorrect path or using a variable as a JSX component. Ensure that you use the correct path and follow proper import/export conventions to avoid this issue.

    ( Check Your Image Component Is this Component Import/export Correct? Read all this and simply use Image Component )

    1. Mixing up default and named imports and exports:-

    When we export default, mean only one component export then use import simple_component name. If export component_named then import {Component_named}

    Example :-

    Header.js

    export default function Header() {
  return <h2>Hello world</h2>;
}

    App.js

     import Header from './Header';
    export default function App() {
      return (
        <div>
          <Header />
        </div>
      );
    }

    2. Declared a variable with JSX code instead of a function

    The below code will throw the error.

    function App() {
    // This line throws error: 
    // Element type is invalid: expected a string (for built-in components) 
    // or a class/function (for composite components) but got: object.
    const Message = <label>Hello world!</label>;
    return (
        <div>
            <Message/>      
        </div>
    );
}

export default App;

    However, the Message variable cannot be used as a component unless it is not a function. React components should be a function or class that returns HTML. To solve the error, change the Message variable to a function that returns JSX code as given below.

    function App() {
    const Message = () => <label>Hello world!</label>;
    return (
        <div>
            <Message/>      
        </div>
    );
}

export default App;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search