ERR_MODULE_NOT_FOUND: Cannot find module flowbite/plugin

[antonio-ivanovski]

• [x] I have searched the Issues to see if this bug has already been reported
• [x] I have tested the latest version

Steps to reproduce

1. Have ESM Tailwind config (.mjs)
2. Import flowbite-react the new way: import flowbite from 'flowbite-react/tailwind';
3. Add content and plugin

Current behavior

Getting error

[Failed to load PostCSS config: Failed to load PostCSS config (searchPath: /Users/antonioivanovski/dev/verified-os/applications/web/dashboard): [Error] Cannot find module '/Users/antonioivanovski/dev/verified-os/node_modules/.pnpm/flowbite-react@0.9.0_react-dom@18.2.0_react@18.2.0_tailwindcss@3.4.3/node_modules/flowbite/plugin' imported from /Users/antonioivanovski/dev/verified-os/node_modules/.pnpm/flowbite-react@0.9.0_react-dom@18.2.0_react@18.2.0_tailwindcss@3.4.3/node_modules/flowbite-react/dist/esm/tailwind.mjs
Did you mean to import flowbite@2.3.0/node_modules/flowbite/plugin.js?
Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/antonioivanovski/dev/verified-os/node_modules/.pnpm/flowbite-react@0.9.0_react-dom@18.2.0_react@18.2.0_tailwindcss@3.4.3/node_modules/flowbite/plugin' imported from /Users/antonioivanovski/dev/verified-os/node_modules/.pnpm/flowbite-react@0.9.0_react-dom@18.2.0_react@18.2.0_tailwindcss@3.4.3/node_modules/flowbite-react/dist/esm/tailwind.mjs
Did you mean to import flowbite@2.3.0/node_modules/flowbite/plugin.js?
    at finalizeResolution (node:internal/modules/esm/resolve:264:11)
    at moduleResolve (node:internal/modules/esm/resolve:917:10)
    at defaultResolve (node:internal/modules/esm/resolve:1130:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:396:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:365:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:240:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:85:39)
    at link (node:internal/modules/esm/module_job:84:36)] {
  code: 'ERR_MODULE_NOT_FOUND',
  url: 'file:///Users/antonioivanovski/dev/verified-os/node_modules/.pnpm/flowbite-react@0.9.0_react-dom@18.2.0_react@18.2.0_tailwindcss@3.4.3/node_modules/flowbite/plugin'
}

Node.js v20.11.0

Expected behavior

The config is loaded correctly

Context

The import in the flowbite-react/tailwind for the flowbitePlugin needs to be import flowbitePlugin from 'flowbite/plugin.js';

My current workaround is to do pnpm patch for this import.

[dhavalveera]

Hey @toteto

import { content, plugin } from "flowbite-react/tailwind"

have you tried importing this way? this one works for me in my tailwind.config.ts

[antonio-ivanovski]

Hey @toteto

import { content, plugin } from "flowbite-react/tailwind"

have you tried importing this way? this one works for me in my tailwind.config.ts

Have tried with the latest 0.10.1 version, still same issue. Still resorting to the patch.

[anshul-kai]

Running into the same error on version 0.10.2 - "Cannot find module 'flowbite-react/tailwind' or its corresponding type declarations."

It's just a typescript error and my usage of Flowbite components isn't impacted.

FWIW, I can eliminate the typescript error by updating the tailwind.config.ts like below, which causes CSS styling issues on the flowbite components.

module.exports = {
    content: [
        "./node_modules/flowbite/**/*.js"
    ],
    plugins: [
        require('flowbite/plugin')
    ]
}

[hgutierrez]

@anshul-kai same error here. In my case this resolved both the warnings and styling problems:

/** @type {import('tailwindcss').Config} */
...
import flowbitePlugin from 'flowbite/plugin';
...

export default {
    ...
    content: [
       './node_modules/flowbite-react/dist/esm/**/*.mjs',
    ],
    plugins: [
        flowbitePlugin
    ]
}

[anshul-kai]

Thanks, @hgutierrez. It certainly is another solution for eliminating typescript errors, but I still require custom style overrides.