Next.js: Cannot find module `pages/_document` after upgrading to Next.js 9

[szpasztor]

Bug report

Describe the bug

After upgrading from version 8 to 9, the development server broke down with the following error.

To Reproduce

• Upgrade to Next.js 9
• Use custom _document component
• Might be needed to reproduce: we use typescript in the app so in order to make use of the new default typescript support, we removed @zeit/next-typescript from package.json and @zeit/next-typescript/babel from babel.config.js.

Expected behavior

yarn dev should work as expected.

Actual behavior

yarn dev fails with:

{ Error: Cannot find module 'app_dir/app/.next/server/static/development/pages/_document'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15)
    at Function.Module._load (internal/modules/cjs/loader.js:529:25)
    at Module.require (internal/modules/cjs/loader.js:657:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.loadComponents (app_dir/node_modules/next-server/dist/server/load-components.js:17:25)
    at DevServer.findPageComponents (app_dir/node_modules/next-server/dist/server/next-server.js:298:40)
    at DevServer.renderErrorToHTML (app_dir/node_modules/next-server/dist/server/next-server.js:362:35)
    at DevServer.renderErrorToHTML (app_dir/node_modules/next/dist/server/next-dev-server.js:16:466)
    at process.internalTickCallback (internal/process/next_tick.js:77:7) code: 'MODULE_NOT_FOUND' }
{ Error: Cannot find module 'app_dir/app/.next/server/static/development/pages/_document'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15)
    at Function.Module._load (internal/modules/cjs/loader.js:529:25)
    at Module.require (internal/modules/cjs/loader.js:657:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.loadComponents (app_dir/node_modules/next-server/dist/server/load-components.js:17:25)
    at DevServer.findPageComponents (app_dir/node_modules/next-server/dist/server/next-server.js:298:40)
    at DevServer.renderErrorToHTML (app_dir/node_modules/next-server/dist/server/next-server.js:362:35)
    at DevServer.renderErrorToHTML (app_dir/node_modules/next/dist/server/next-dev-server.js:16:466) code: 'MODULE_NOT_FOUND' }

System information

• OS: macOS 10.14.5
• Browser Chrome 75
• Version of Next.js: 9.0.2

Additional context

• _document.js exists in app_dir/app/ and was working fine before the upgrade. It handles some configuration and renders the page given to it.
• Next's root directory is set to /app, not /.
• When attempting to start the server with yarn dev, next doesn't even generate .next/server. The only generated directory is .next/cache.

[Timer]

Hey @szpasztor! Could you please provide a code repository with this issue?
A reproduction would help us a lot in diagnosing this issue.

[szpasztor]

I've tried doing that and my observation has been that the Next build breaks with Cannot find module [...] whenever there's a compile-time error in an already loaded file (type errors when transpiling typescript in this case). I'll investigate this further. If this is the case, an improvement could be to make the error message more understandable - current one is rather misleading. Make it clear that modules cannot be loaded unless all compile-time errors are fixed, or perhaps even stop the build process at that point. What do you think?

[rizkiandrianto]

did you custom your webpack configuration?
I fix my problem with:

configuration.resolve = { ...config.resolve, // this line will fixed modules: ['node_modules', './src'] };

[sombreroEnPuntas]

Facing the same issue, made a reproduction project on code sandbox:

https://codesandbox.io/s/next-js-9-babel-module-resolution-vtskd

The component About is located on src/components. When the About link is clicked, it fails with the bug mentioned on this issue.

Let me know if this makes enough sense :)

[timneutkens]

@sombreroEnPuntas https://nextjs.org/docs#customizing-babel-config

Specifically:

The next/babel preset includes everything needed to transpile React applications. This includes:

• preset-env
• preset-react
• preset-typescript
• plugin-proposal-class-properties
• plugin-proposal-object-rest-spread
• plugin-transform-runtime
• styled-jsx

These presets / plugins should not be added to your custom .babelrc. Instead, you can configure them on the next/babel preset:

[sombreroEnPuntas]

@sombreroEnPuntas https://nextjs.org/docs#customizing-babel-config

Specifically:

The next/babel preset includes everything needed to transpile React applications. This includes:

• preset-env
• preset-react
• preset-typescript
• plugin-proposal-class-properties
• plugin-proposal-object-rest-spread
• plugin-transform-runtime
• styled-jsx

These presets / plugins should not be added to your custom .babelrc. Instead, you can configure them on the next/babel preset:

I'm sorry, didn't quite get your comment :)

The reproduction sandbox I provided is not using those packages...
And i'm using .babelrc to configure the module resolver so I can have shorter relative paths to the files on the project.

Is there a better way to do this @timneutkens ?

[timneutkens]

You're adding "@babel/preset-env", in the babelrc, and as per the docs These presets / plugins should not be added to your custom .babelrc.

[sombreroEnPuntas]

I see, that makes sense @timneutkens !
Solves the issue on the reproduction sandbox :)