Change in import method. (v4)

[tiste]

Describe the bug

Hello, thanks for the update for Next 14. It seems that a loader is mandatory.

For instance, when I try:

<Image
  className="is-light-mode"
  src={require("@/public/images/favicon.svg")}
  alt="Logo"
  width={68}
  height={68}
/>

I have an error as: "Error: Image with src "[object Module]" is missing "loader" prop.
Read more: https://nextjs.org/docs/messages/next-image-missing-loader"

To solve it I can add a loader such as loader={({ src }) => src}.

Thanks again.

[jdamner]

+1

[dc7290]

Could you try this?
The import destination has changed since v4!

import Image from 'next-export-optimize-images/image'

[tiste]

Hey @dc7290, it works great actually!
I was using Image from next/image.

[AoSankaku]

I ran into the same issue.
Changing import to import Image from 'next-export-optimize-images/image' should be more emphasized in docs 😭

[AoSankaku]

Also:

import Image from 'next-export-optimize-images'

This import line itself has no error, but causes

'Image' cannot be used as a JSX component.
  Its type '(nextConfig?: NextConfig | undefined, options?: { __test?: boolean | undefined; } | undefined) => Promise<NextConfig>' is not a valid JSX element type.
    Type '(nextConfig?: NextConfig | undefined, options?: { __test?: boolean | undefined; } | undefined) => Promise<NextConfig>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
      Type 'Promise<NextConfig>' is not assignable to type 'ReactNode'.
        Type 'Promise<NextConfig>' is not assignable to type 'Promise<AwaitedReactNode>'.
          Type 'NextConfig' is not assignable to type 'AwaitedReactNode'.
            Type 'NextConfig' is missing the following properties from type 'ReactPortal': children, type, props, keyts(2786)
(alias) const Image: (nextConfig?: NextConfig, options?: {
    __test?: boolean;

and returns

Build Error
Next.js (15.0.3) (Turbopack)
Failed to compile

./node_modules/graceful-fs/graceful-fs.js:1:10
Module not found: Can't resolve 'fs'
> 1 | var fs = require('fs')
    |          ^^^^^^^^^^^^^
  2 | var polyfills = require('./polyfills.js')
  3 | var legacy = require('./legacy-streams.js')
  4 | var clone = require('./clone.js')

https://nextjs.org/docs/messages/module-not-found
This error occurred during the build process and can only be dismissed by fixing the error.

on development environment.

They might also be confusing for beginners...maybe?