next.js: Upgrading from 9.2.1 --> 9.3.5 "Error: Cannot find module 'next/dist/next-server/lib/fid.js'"

Trying to upgrade from 9.2.1 to latest stable release (9.3.5). Node Version: 10.16

Compiles successfully in terminal, but when opening localhost:port, I’m getting the following:

[ ready ] compiled successfully - ready on http://localhost:7778
{ Error: Cannot find module 'next/dist/next-server/lib/fid.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:690:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.../next-server/lib/fid (C:\Users\Wade\Documents\GitHub\myodesign\dist\functions\next\server\static\development\pages\_document.js:136:18)
    at __webpack_require__ (C:\Users\Wade\Documents\GitHub\myodesign\dist\functions\next\server\static\development\pages\_document.js:23:31)     
    at Object../node_modules/next/dist/pages/_document.js (C:\Users\Wade\Documents\GitHub\myodesign\dist\functions\next\server\static\development\pages\_document.js:192:35)
    at __webpack_require__ (C:\Users\Wade\Documents\GitHub\myodesign\dist\functions\next\server\static\development\pages\_document.js:23:31)     
    at Object../node_modules/next/document.js (C:\Users\Wade\Documents\GitHub\myodesign\dist\functions\next\server\static\development\pages\_document.js:878:18)
    at __webpack_require__ (C:\Users\Wade\Documents\GitHub\myodesign\dist\functions\next\server\static\development\pages\_document.js:23:31)     
    at Module../pages/_document.js (C:\Users\Wade\Documents\GitHub\myodesign\dist\functions\next\server\static\development\pages\_document.js:895:71)
    at __webpack_require__ (C:\Users\Wade\Documents\GitHub\myodesign\dist\functions\next\server\static\development\pages\_document.js:23:31)     
    at Object.1 (C:\Users\Wade\Documents\GitHub\myodesign\dist\functions\next\server\static\development\pages\_document.js:996:18)
    at __webpack_require__ (C:\Users\Wade\Documents\GitHub\myodesign\dist\functions\next\server\static\development\pages\_document.js:23:31)     
    at module.exports.../../node_modules/common/src/assets/image/favicon-32.png.module.exports (C:\Users\Wade\Documents\GitHub\myodesign\dist\functions\next\server\static\development\pages\_document.js:91:18)
    at Object.<anonymous> (C:\Users\Wade\Documents\GitHub\myodesign\dist\functions\next\server\static\development\pages\_document.js:94:10) code: 'MODULE_NOT_FOUND' }

next.config

const withPlugins = require("next-compose-plugins");
const withTM = require("next-transpile-modules");
const withOptimizedImages = require("next-optimized-images");
const withFonts = require("next-fonts");
const withCSS = require("@zeit/next-css");
module.exports = {
  webpack: (config, { isServer }) => {
    // Fixes npm packages that depend on `fs` module
    if (!isServer) {
      config.node = {
        fs: "empty"
      };
    }

    return config;
  }
};

module.exports = withPlugins(
  [
    [
      withTM,
      {
        transpileModules: ["reusecore", "common"]
      }
    ],
    [
      withOptimizedImages,
      {
        mozjpeg: {
          quality: 90
        },
        webp: {
          preset: "default",
          quality: 90
        }
      }
    ],
    withFonts,
    withCSS
  ],
  {
    distDir: "../../dist/functions/next"
  }
);

_document.js

import Document, { Html, Head, Main, NextScript } from "next/document";
import { ServerStyleSheet } from "styled-components";
import FavIcon from "common/src/assets/image/favicon-32.png";

export default class CustomDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: App => props => sheet.collectStyles(<App {...props} />)
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        )
      };
    } finally {
      sheet.seal();
    }
  }
  render() {
    return (
      <html lang="en">
        <Head>
          <link rel="shortcut icon" type="image/x-icon" href={FavIcon} />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 15
  • Comments: 21 (4 by maintainers)

Commits related to this issue

Most upvoted comments

Here I solved by doing ctrl + shift + p > TypeScript: Restart TS server

Delete node_modules folder and run npm i again, worked for me! πŸ˜ƒ

same is happening in my app

same is happening to me

A rollback to 9.3.4 worked for me

but it seems like the Vercel team is just ignoring this.

Not ignoring it. The issue was not closed and currently has 2 πŸ‘ from other people. Note that there are 421 open issue as of currently.

You did not follow the issue template btw. It asks for a clear and concise reproduction, what was provided are 2 files.

me too 😦. worked well before but now it’s happing

My site suddenly got this issue, been on v9.3.6 for 10 days with no issue. Suddenly it happened πŸ˜•

I just want to let everyone know that I managed to solve the issue by going to the canary build (10). Give it a try. It’s not a real solution or explanation, but it seems like the Vercel team is just ignoring this.

Update : Vercel is on it πŸ˜ƒ Or, as best they can without a repo.