Upgrading to Nextjs12 breaks build (module resolution issue)

[Pipe-Runner]

Pardon me for my ignorance if I have missed something obvious: Note: This worked just fine before Next12

Today I bumped up NextJS from 11 to 12 and since then, this is what I get while building my app.

My configurations are as follows:

package.json

{
  "name": "plantation-gamma",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "export": "next export",
    "pre-deploy": "mv out/404/index.html out/404.html && rm -rf out/404",
    "ssg": "npm run build && npm run export && npm run pre-deploy",
    "deploy": "firebase deploy",
    "start": "next start",
    "lint": "eslint --fix .",
    "format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"
  },
  "dependencies": {
    "@headlessui/react": "^1.0.0",
    "classname": "0.0.0",
    "firebase": "^9.4.1",
    "fuzzy-search": "^3.2.1",
    "got": "^11.8.2",
    "lqip-modern": "^1.2.0",
    "motion": "^10.3.1",
    "next": "^12.0.4",
    "notion-client": "^4.9.3",
    "notion-types": "^4.8.2",
    "notion-utils": "^4.8.6",
    "p-map": "^4.0.0",
    "prism-react-renderer": "^1.2.0",
    "query-string": "^7.0.0",
    "react": "17.0.2",
    "react-custom-scrollbars-2": "^4.4.0",
    "react-dom": "^17.0.2",
    "react-hotkeys": "^2.0.0-pre9",
    "react-icons": "^4.2.0",
    "react-intersection-observer": "^8.32.0",
    "react-katex": "^2.0.2",
    "react-notion-x": "^4.11.0",
    "react-toastify": "^7.0.4",
    "use-sound": "^4.0.1",
    "zustand": "^3.6.5"
  },
  "devDependencies": {
    "@svgr/webpack": "^5.5.0",
    "@types/node": "^14.14.41",
    "@types/react": "^17.0.3",
    "@types/react-dom": "^17.0.9",
    "@typescript-eslint/eslint-plugin": "^4.22.0",
    "@typescript-eslint/parser": "^4.22.0",
    "autoprefixer": "^10.2.5",
    "eslint": "^7.24.0",
    "eslint-config-airbnb-typescript": "^12.3.1",
    "eslint-config-next": "^11.0.0",
    "eslint-config-prettier": "^8.2.0",
    "eslint-plugin-import": "^2.25.2",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-react": "^7.23.2",
    "eslint-plugin-react-hooks": "^1.7.0",
    "postcss": "^8.2.10",
    "prettier": "^2.2.1",
    "tailwindcss": "^2.1.1",
    "typescript": "^4.4.4"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNEXT",
    "lib": [
      "DOM",
      "DOM.Iterable",
      "ESNext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "baseUrl": ".",
    "paths": {
      "@/assets/*": [
        "assets/*"
      ],
      "@/components/*": [
        "components/*"
      ],
      "@/configs/*": [
        "configs/*"
      ],
      "@/hooks/*": [
        "hooks/*"
      ],
      "@/libs/*": [
        "libs/*"
      ],
      "@/pages/*": [
        "pages/*"
      ],
      "@/styles/*": [
        "styles/*"
      ],
      "@/constants/*": [
        "constants/*"
      ],
      "@/store/*": [
        "store/*"
      ]
    },
  },
  "include": [
    "custom.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "configs/*.js",
    "tailwind.config.js"
  ],
  "exclude": [
    "node_modules",
    "next-env.d.ts"
  ]
}

next.config.js

const nextConfig = {
  trailingSlash: true,
  swcMinify: true,
  experimental: {
    urlImports: ['https://cdn.skypack.dev']
  },
  eslint: {
    ignoreDuringBuilds: true
  },
  webpack: (config, options) => {
    const fileLoaderRule = config.module.rules.find((rule) => rule.test && rule.test.test('.svg'));
    fileLoaderRule.exclude = /\.svg$/;

    /**
     * Loading svg as react components
     */
    config.module.rules.push({
      loader: '@svgr/webpack',
      options: {
        prettier: false,
        svgo: true,
        svgoConfig: {
          plugins: [{ removeViewBox: false }]
        },
        titleProp: true
      },
      test: /\.svg$/
    });

    /**
     * Loading audio files
     */
     config.module.rules.push({
      test: /\.(mp3)$/,
      type: "asset/resource",
      generator: {
        filename: "static/chunks/[path][name].[hash][ext]",
      },
    });

    return config;
  }
};

module.exports = nextConfig;

[dai-shi]

Hm, I wonder if anyone has succeeded with nextjs 12.

[Brucbbro]

This is just off the top of my head, but I remember them shipping an odd bug with the latest v12 minor update, which is temporarily fixed by adding experimental: { esmExternals: false, }, to your nextConfig object. They acknowledged the issue so i expect it to be solved soon (or already, haven't checked yet). Hopefully this helps you!

[dsacramone]

@AakashMallik You solve this issue?

[Pipe-Runner]

This is just off the top of my head, but I remember them shipping an odd bug with the latest v12 minor update, which is temporarily fixed by adding experimental: { esmExternals: false, }, to your nextConfig object. They acknowledged the issue so i expect it to be solved soon (or already, haven't checked yet). Hopefully this helps you!

This fixed the build. Thanks.