Reactjs - postcss Package subpath './tailwind' is not defined by "exports" in .....node-modulesflowbite-reactpackage.json

LiorMorali
May 27, 2024
232 views
0 votes
2 Answers

13:44:51 [vite] Internal server error: [postcss] Package subpath ‘./tailwind’ is not defined by "exports" in D:LiorMoraliProgramming(D)MERN-Blogclientnode_modulesflowbite-reactpackage.json
Plugin: vite:css
File: D:/LiorMorali/Programming(D)/MERN-Blog/client/src/index.css:undefined:NaN
at new NodeError (node:internal/errors:405:5)
at exportsNotFound (node:internal/modules/esm/resolve:366:10)
at packageExportsResolve (node:internal/modules/esm/resolve:713:9)
at resolveExports (node:internal/modules/cjs/loader:590:36)
at Module._findPath (node:internal/modules/cjs/loader:664:31)
at Module._resolveFilename (node:internal/modules/cjs/loader:1126:27)
at Function.resolve (node:internal/modules/helpers:188:19)
at _resolve (D:LiorMoraliProgramming(D)MERN-Blogclientnode_modulesjitidistjiti.js:1:251148)
at jiti (D:LiorMoraliProgramming(D)MERN-Blogclientnode_modulesjitidistjiti.js:1:253746)
at D:LiorMoraliProgramming(D)MERN-Blogclienttailwind.config.js:1:93

everything worked fine in my project then this error showed up
tried everything and nothing is working 🙁

D:LiorMoraliProgramming(D)MERN-Blogclientnode_modulesflowbite-reactpackage.json :

{
  "name": "flowbite-react",
  "version": "0.7.8",
  "description": "Official React components built for Flowbite and Tailwind CSS",
  "keywords": [
    "design-system",
    "flowbite",
    "flowbite-react",
    "react",
    "tailwind",
    "tailwindcss",
    "tailwind-css"
  ],
  "homepage": "https://flowbite-react.com",
  "bugs": "https://github.com/themesberg/flowbite-react/issues",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/themesberg/flowbite-react.git",
    "directory": "packages/ui"
  },
  "license": "MIT",
  "exports": {
    ".": {
      "types": "./lib/types/index.d.ts",
      "import": "./lib/esm/index.js",
      "require": "./lib/cjs/index.js"
    },
    "./components/*": {
      "types": "./lib/types/components/*/index.d.ts",
      "import": "./lib/esm/components/*/index.js",
      "require": "./lib/cjs/components/*/index.js"
    },
    "./package.json": "./package.json"
  },
  "main": "lib/cjs/index.js",
  "module": "lib/esm/index.js",
  "types": "lib/types/index.d.ts",
  "files": [
    "lib"
  ],
  "scripts": {
    "postpublish": "clean-package restore"
  },
  "dependencies": {
    "@floating-ui/core": "1.6.0",
    "@floating-ui/react": "0.26.10",
    "classnames": "2.5.1",
    "debounce": "2.0.0",
    "flowbite": "2.3.0",
    "react-icons": "5.0.1",
    "tailwind-merge": "2.2.2"
  },
  "peerDependencies": {
    "react": ">=18",
    "react-dom": ">=18",
    "tailwindcss": "^3"
  }
}

tried npm i
installing react-flowbite
installing tailwindcss

Answers

- Steffen
- May 15, 2024 at 1:41 pm
- 0 votes
0
flowbite-react/tailwind doesn’t exist, flowbite-react has no export for tailwind. According to the documentation (https://flowbite.com/docs/getting-started/react/), you need to do the following:

tailwind.config.js:
```
/** 
 * @type {import('tailwindcss').Config} 
 */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}", 
    flowbite.content()
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('flowbite/plugin'), 
    require("tailwind-scrollbar")
  ],
};
```
I removed const flowbite = require("flowbite-react/tailwind"); and flowbite.plugin() from your plugins list and added require('flowbite/plugin').
Login or Signup to reply.

- Dwight
- May 27, 2024 at 9:30 am
- 0 votes
0
I have faced the same issue. You will need to install/upgrade your flowbite-react package to version 0.8.0

That way you can use const flowbite = require("flowbite-react/tailwind"); as what they have stated in their github page

From then you can implement:
```
const flowbite = require("flowbite-react/tailwind");

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // ...
    flowbite.content(),
  ],
  plugins: [
    // ...
    flowbite.plugin(),
  ],
};
```
Login or Signup to reply.