ReferenceError: require is not defined in ES module scope, you can use import instead

[thefubon]

Summary

file:///Users/fubon/Documents/GitHub/next-shadcn-tailwind/next.config.mjs:1
const withPWA = require('next-pwa')({
                ^

ReferenceError: require is not defined in ES module scope, you can use import instead
    at file:///Users/fubon/Documents/GitHub/next-shadcn-tailwind/next.config.mjs:1:17
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:323:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:430:15)
    at async loadConfig (/Users/fubon/Documents/GitHub/next-shadcn-tailwind/node_modules/next/dist/server/config.js:696:36)
    at async nextDev (/Users/fubon/Documents/GitHub/next-shadcn-tailwind/node_modules/next/dist/cli/next-dev.js:197:14)
    at async main (/Users/fubon/Documents/GitHub/next-shadcn-tailwind/node_modules/next/dist/bin/next:155:5)

Versions

"dependencies": {
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/react-slot": "^1.0.2",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "embla-carousel-react": "^8.0.0",
    "next": "14.1.4",
    "next-pwa": "^5.6.0",
    "next-themes": "^0.3.0",
    "react": "^18",
    "react-dom": "^18",
    "tailwind-merge": "^2.2.2",
    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.1.4",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}

How To Reproduce

[IlirEdis]

Any fix for this?

[Faraz1995]

use next.config.js instead of next.config.mjs

[agusmoles]

Just do:

import nextPwa from "next-pwa";

const withPWA = nextPwa({ ... });

// ...

[Park-Jongseok]

// next.config.mjs
/** @type {import('next').NextConfig} */
import nextPWA from "next-pwa";

const nextConfig = {};

const withPWA = nextPWA({
  dest: "public",
})(nextConfig);

export default withPWA;