import customized Document from library causes 'Constructor invoked without 'new'' error

Bug report

1. Make a library which included a customized Document(_document.js).
2. import the customized Document into another project. throws TypeError: Class constructor Document cannot be invoked without 'new' error.

There’s no error before next9

To Reproduce

https://github.com/thundermiracle/next-lib-bug

Screenshots

System information

• OS: [Windows]
• Browser (if applies) [chrome,]
• Version of Next.js: [9.0.2 and canary]

[Timer]

I just took a deeper look at this.

The reason this issue is happening is because next must be compiled by webpack.

When you import it indirectly in next-mui-helper (which is not bundled, as it’s in node_modules), webpack doesn’t get the chance to bundle or compile next/**. This package then just gets handled with typical Node imports.

To solve this, you’ll need to customize your webpack configuration to ensure that next-mui-helper is compiled by webpack and not externalized, such that next imports are properly seen by the build.

Do note that this extension of Document is not a supported behavior and is very prone to break release-by-release.

[jaslakson]

Note: I had this error this morning when upgrading to 9.0.3, but removed @babel/preset-env from presets in my .babelrc file and I am no longer receiving this error.

{
  "presets": [
-    "@babel/preset-env",
    "next/babel",
  ],
  "compact": true,
...(other config options for styled components, etc)

In retrospect, not really sure why we had @babel/preset-env in there. EDIT: Our project has a custom _document and custom _app, but we don’t export it to other projects.