[v6] getting ES module error on nextjs

I’m using the alpha version in nextjs. But I am getting this error when trying to use the module.

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/username/Projects/prismic/node_modules/@prismicio/client/dist/index.js
require() of ES modules is not supported.
require() of /Users/username/Projects/prismic/node_modules/@prismicio/client/dist/index.js from /Users/username/Projects/prismic/.next/server/pages/blog.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/username/Projects/prismic/node_modules/@prismicio/client/package.json.

    at new NodeError (node:internal/errors:363:5)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1126:13)
    at Module.load (node:internal/modules/cjs/loader:989:32)
    at Function.Module._load (node:internal/modules/cjs/loader:829:14)
    at Module.require (node:internal/modules/cjs/loader:1013:19)
    at require (node:internal/modules/cjs/helpers:93:18)
    at Object.@prismicio/client (/Users/username/Projects/prismic/.next/server/pages/blog.js:88:18)
    at __webpack_require__ (/Users/username/Projects/prismic/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./config/client.ts:5:75)
    at Object../config/client.ts (/Users/username/Projects/prismic/.next/server/pages/blog.js:44:1)
    at __webpack_require__ (/Users/username/Projects/prismic/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./config/api.ts:8:65)
    at Object../config/api.ts (/Users/username/Projects/prismic/.next/server/pages/blog.js:33:1)
    at __webpack_require__ (/Users/username/Projects/prismic/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./pages/blog/index.tsx:8:68)
    at Object../pages/blog/index.tsx (/Users/username/Projects/prismic/.next/server/pages/blog.js:66:1) {
  code: 'ERR_REQUIRE_ESM'
}

Removing the type property in package.json solved the problem for me. But it would great to know how this issue could be solved without touching the source files.

Version: next: 10.2.3 react: 17.0.2 typescript: 4.3.2 @prismicio/client: ^6.0.0-alpha.0 @prismicio/types: ^0.0.7

[deebov]

Hey hey, thanks for the quick response!

I started using the alpha version mostly because of typescript as the old version wasn’t very typescript friendly. But overall I really like it. It’s very easy and simple to use. As you can see I implemented the official next-with-prismic example with @alpha version without any help. I think it would be awesome to have a tool that generates typescript types from content model json in the future (contentful has something like this). But I’m also really interested in this topic so I can try to build a tool for that over the weekend. Also, I really like that you can choose what to fetch with client api. It’s very useful in cases where you just need slugs of all posts to pre-render them.

Thanks, very good job!!!

Ps. I’ve never used the prismic api before (I did but it was years ago and it was graphql haha)

[lihbr]

Closed as fixed, happy to continue the discussion there!