Next/Image not found?

[helloimalastair]

Can I use the Image component from a separate folder? When I use it in the Components folder, it says "Module not found: Can't resolve 'next/image'", and I can't figure out if it is the wrong folder, or something else.

[jamesmosier]

You can use it in any folder within your Next.js project. What version are you running of Next?

[helloimalastair]

Thank You! Sorry I hadn't updated this earlier, but I found out that my problem was that I had not updated Next in a while, and so it didn't work as expected. It works fine now!

[hpachy]

Hello I got the same problem since 1 day... I'm sharing with you my json package to figured out what's going on

{
  "name": "showcase-front",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "10.0.7",
    "react": "17.0.1",
    "react-device-detect": "^1.15.0",
    "react-dom": "17.0.1",
    "react-modal": "^3.12.1",
    "react-use": "^17.1.1"
  },
  "devDependencies": {
    "@types/node": "^14.14.31",
    "@types/react": "^17.0.2",
    "typescript": "^4.1.5"
  }
}

$ next build

Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
info - Creating an optimized production build
Failed to compile.

ModuleNotFoundError: Module not found: Error: Can't resolve 'next/image' in '/Users/me///components/HomePage'

Build error occurred
Error: > Build failed because of webpack errors
at build (/usr/local/lib/node_modules/next/dist/build/index.js:15:918)
at runMicrotasks ()
at processTicksAndRejections (node:internal/process/task_queues:93:5)

[helloimalastair]

No guarantees on this, but you can try reloading all your modules. Start by removing all of your modules from your package.json file, like so:

{
  "name": "showcase-front",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {},
  "devDependencies": {}
}

Next, delete your node_modules folder, using either a folder explorer or command. Lastly, reinstall all of your modules using this command: npm install next react react-device-detect react-dom react-modal react-use, and for your dev dependencies, run
npm install -D @types/node @types/react typescript. This assumes you have not added any further modules since you posted your package.json file. If this works, you should be good to go!

[hpachy]

it's Not fixing my problem... I think it's because I got svgs names changed the case on my git... That's the origin of my problem

[zooeyking]

you can try this.

[hamed-iam]

Unfortunately I had the same issue and I couldnt fix it, and I was running the latest next 10.0.9, react 17.0.2 I removed the modules and .next and reinstall them all and still got the same error " Module not found: Can't resolve 'next/images' ". I had to go manual and not use this feature .

[hpachy]

My problem was because I changed some of my files names (only the case, ex: EXEMPLE.tsx => Exemple.tsx) and github not recognize this kind of changes

you maybe have the same problem as me

[kanlancb]

@hpachy How did you fix it?

[hpachy]

because github doesn't case about camelCase :

• you must change the file name "exemple.js" to "ExempleBis.js"
• you must push changes
• to finish rename your file "ExempleBis.js" to "Exemple.js" and repush

Not the best technic but it's work

[abhinavakhil]

Solution that worked for me is by updating nextjs to the latest version. try this -> npm install next@latest

[PolarCoding85]

This fixed my issue! Thanks.

[abhinavakhil]

glad it helped fix your problem.

[lukaskf]

Had this same issue was very confused since everything ran locally but failed on deployment.
The issue was I capitalized Image.

Wrong:
import Image from "next/Image"

Right:
import Image from "next/image"

[jakepow07]

This worked for me. Thanks!

[danielangelo]

If somebody still has this issue and none of the above worked try this:

Open tsconfig.json and add "moduleResolution": "node" inside compilerOptions

[davdleet]

this worked for me thanks!