Module not found: Can't resolve '@/prismicio'

Question

I've started a project using Prismic + NextJS with this template: https://vercel.com/templates/next.js/prismic-blog. I've set everything up as required, and I'm getting the following error: Module not found: Can't resolve '@/prismicio'.

I haven't changed any of the important pages. Has anyone experienced this problem before?

Thanks!

I've looked at all the forums, but couldn't find an answer!

Answer 1

The @ import alias requires a jsconfig.json (if using JavaScript) or tsconfig.json (if using TypeScript) in the root of your project.

Include a compilerOptions.paths value that maps @ to ./src, like this:

// jsconfig.json OR tsconfig.json

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

This option can be combined with other jsconfig.json/tsconfig.json options.

Note: The @ alias is recommended by default when creating a new Next.js app with create-next-app.

If your editor still cannot resolve the @ import, restart your editor to restart the TypeScript server process (tsserver).