NextJS Use 'import' with ESM packages instead

Question

I'm getting this error:

Module not found: ESM packages (remark) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals
  2 | import path from 'path'
  3 | //import matter from 'gray-matter'
> 4 | import remark from 'remark'
    |                           ^
  5 | import html from 'remark-html'

Even though the module is being imported correctly.

When I change it to a name which doesn't exist I get:

./lib/posts.js:4:28
Module not found: Can't resolve 'remarke'
  2 | import path from 'path'
  3 | //import matter from 'gray-matter'
> 4 | import remark from 'remarke'
    |                            ^
  5 | import html from 'remark-html'

So I know that it is imported.

I also tried adding this to next.config.js:

experimental: {
        esmExternals: "loose",
    },

But then I get this error:

TypeError: (0 , _remark).default is not a function

This has something to do with the switch to ESM module of the remark library.

Does anyone know what I can do to get rid of this error?