Next 12 - ESM Support - SyntaxError: Cannot use import statement outside a module

[DaniAkash]

What version of Next.js are you using?

12.0.1

What version of Node.js are you using?

14.18.1

What browser are you using?

Chrome

What operating system are you using?

Linux

How are you deploying your application?

Vercel / CodeSandbox

Describe the Bug

Trying to import a ES Module in Next.js 12 throws the following error:

Example based on Tree shakable ESM export of validator library but happens with any other esm package

Server Error
SyntaxError: Cannot use import statement outside a module

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown>
file:///sandbox/node_modules/validator/es/lib/isEmail.js (1)
wrapSafe
internal/modules/cjs/loader.js (1001:16)
Module._compile
internal/modules/cjs/loader.js (1049:27)
Object.Module._extensions..js
internal/modules/cjs/loader.js (1114:10)
Module.load
internal/modules/cjs/loader.js (950:32)
Function.Module._load
internal/modules/cjs/loader.js (790:12)
Module.require
internal/modules/cjs/loader.js (974:19)
require
internal/modules/cjs/helpers.js (93:18)
Object.validator/es/lib/isEmail
file:///sandbox/.next/server/pages/index.js (318:18)
__webpack_require__
file:///sandbox/.next/server/webpack-runtime.js (33:42)
eval
webpack-internal:///./pages/index.js (9:82)

Expected Behavior

ES Modules should work in Next.js 12

To Reproduce

Visit the following codesandbox:

https://codesandbox.io/s/next-12-esm-issue-nlew9?file=/pages/index.js:62-110

[rinarakaki]

Seems Next.js 12 doesn't yet exist on the CodeSandbox environment.

[julen]

It doesn't look like validator has a type="module" in its package.json, so the modules will be interpreted as CommonJS like suggested by the traceback you shared.

[CompuIves]

Hm, I've tried running this example locally, but I get the same error back. I indeed think this is a change that needs to happen in validator to make it work.

[paambaati]

@DaniAkash Does this work if you temporarily patch the package.json of the validator package to include “type”: “module”?

[DaniAkash]

@DaniAkash Does this work if you temporarily patch the package.json of the validator package to include “type”: “module”?

Tried the same project with lodash-es which has a module type in it's package.json & things seem to work fine

Working codesandbox: https://codesandbox.io/s/next-12-esm-issue-forked-q4l8f?file=/pages/index.js

Seems like, modules exposing ESM files without specifying entry in package.json must be the issue. Is there anyway we can detect ESM without having to manually patch other libraries?

[kodermax]

I have the same problems, the package swiper/react doesn't load.

https://stackblitz.com/edit/github-a252xz?file=pages/index.tsx

[balazsorban44]

Indeed, it looks like the validator package bundle is incorrect. Being fixed here validatorjs/validator.js#1869

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.