Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Error: Objects are not valid as a React child #268

Closed
Treast opened this issue Oct 28, 2021 · 1 comment
Closed

Error: Objects are not valid as a React child #268

Treast opened this issue Oct 28, 2021 · 1 comment

Comments

@Treast
Copy link

Treast commented Oct 28, 2021

Hello ! Thanks for your project ! I try to go back to NextJS with the version 12 out, but got some issues with the plugin. Thanks for your help

Node version : 16.9.1
NextJS version: 12.0.1
next-optimized-images version : 3.0.0-canary.10

Steps to reproduce :

  • Create new project using NextJS 12
  • Add next-optimized-images
  • Setup next.config.js & .babelrc
  • Set index.js content to :
import Head from 'next/head';
import Image from 'next-optimized-images';
import styles from '../styles/Home.module.css';

import bigImage from '../images/1500.jpeg';

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="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/favicon.ico" />
      </Head>

      <main>
        <Image src={bigImage} />
      </main>
    </div>
  );
}

Actual result :
Error: Objects are not valid as a React child (found: object with keys {src, webpack}). If you meant to render a collection of children, use an array instead.

Expected result :
A page with the image displayed
@Treast
Copy link
Author

Treast commented Oct 28, 2021

Fixed.

If anybody got the same problem, the Image component has to be imported from react-optimized-images, and not from next-optimized-images.

import Img from 'react-optimized-image';

@Treast Treast closed this as completed Oct 28, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Treast