Module Not Found Error During Vercel Deployment (DaisyUI)

It should be deployed properly without errors.
Currently I get an error saying that it can’t resolve import "daisyui"; in my CSS file, src/app/globals.css.

Source code is on GitHub here, and I have a branch called “preview” for preview builds so I can test the app online.

tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "forceConsistentCasingInFileNames": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    },
    "types": ["node", "jest", "@testing-library/jest-dom"]
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/types/**/*.d.ts", "./*.mjs", "./**.*.mjs", "./jest.config.js"],
  "exclude": ["node_modules"]
}

Tailwind config:

import type { Config } from "tailwindcss";
import daisyui from "daisyui";

const config: Config = {
  content: [
    "./src/app/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}"
  ],
  theme: {
    extend: {
      colors: {
        background: "var(--color-primary)",
        foreground: "var(--color-secondary)"
      }
    },
    screens: {
      xs: "500px",
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1280px",
      "2xl": "1536px"
    },
    plugins: [
      daisyui
    ]
  }
};
export default config;

Next.js config:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  reactStrictMode: true,
  basePath: "",
  experimental: {
    turbo: {
      resolveExtensions: [
        ".tsx",
        ".ts",
        ".js",
        ".jsx",
        ".json",
        ".mdx"
      ]
    }
  }
};

export default nextConfig;

ESLint config:

{
  "extends": [
    "next/core-web-vitals",
    "next/typescript"
  ],
  "plugins": [
    "react",
    "jsx-a11y",
    "react-hooks",
    "@next/next",
    "@typescript-eslint"
  ],
  "env": {
    "browser": true,
    "node": true
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "projectService": true,
    "ecmaFeatures": {
      "jsx": true,
      "arrowFunctions": true,
      "destructuring": true,
      "templateStrings": true
    }
  },
  "rules": {
    "yoda": "error",
    "prefer-const": "error",
    "space-before-function-paren": "off",
    "@typescript-eslint/await-thenable": "warn",
    "no-undef": "warn",
    "no-unused-vars": "warn",
    "@typescript-eslint/no-unused-expressions": "warn",
    "@typescript-eslint/no-unused-vars": "warn",
    "quotes": [
      "error",
      "double",
      {
        "allowTemplateLiterals": true
      }
    ],
    "semi": "error",
    "no-extra-semi": "error",
    "comma-dangle": "error"
  }
}

Framework: Next.js 15
URL: https://personal-library-wmjc.vercel.app
IDE: Visual Studio Code on Windows 10 laptop
Project settings on Vercel: All default, along with env variables.

Note: I did do a search for similar topics, and while I did find some, I don’t think I can use them.

Could you share the error logs with us too? That would be super helpful :pray:

These are the deployment logs from the latest attempt:

at finishWithoutResolve (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:1:188884)
at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:1:189781
at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:1:190414
at eval (eval at create (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:13:9218), <anonymous>:16:1)
at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:1:190414
at eval (eval at create (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:13:9218), <anonymous>:27:1)
at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:1:172322
at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:1:190414
at eval (eval at create (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:13:9218), <anonymous>:16:1)
at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:1:206027
https://nextjs.org/docs/messages/module-not-found
> Build failed because of webpack errors
Error: Command "npm run build" exited with 1

@pawlean I have these logs from my latest preview deployment attempt:

at finishWithoutResolve (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:1:188884)
at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:1:189781
at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:1:190414
at eval (eval at create (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:13:9218), <anonymous>:16:1)
at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:1:190414
at eval (eval at create (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:13:9218), <anonymous>:27:1)
at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:1:172322
at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:1:190414
at eval (eval at create (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:13:9218), <anonymous>:16:1)
at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:1:206027
https://nextjs.org/docs/messages/module-not-found
> Build failed because of webpack errors
Error: Command "npm run build" exited with 1

Do you want me to edit my opening post with this as well? Or is this much fine?

Hey, Osman!

It looks like that a module is not found which is why you’re seeing the error. Could you go through the following docs? Might be helpful to debug!

I also wanted to share our community post on how to get good answers, it’d help us help you faster with more information.

@pawlean It works just fine locally, so the problem seems to only be there when trying to deploy to Vercel.

But I think I got it. The reason for the problem was apparently me adding @import "daisyui" in my CSS file; just having a line to import it in the tailwind.config.ts file is enough.

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.