Can't resolve 'tailwindcss/version.js'

[SeeThruHead]

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

Steps to reproduce

in your webpack app
install flowbite react in yarn pnp

Current behavior

Can't resolve 'tailwindcss/version.js' in '/Users/shane.keulen/code/perpetua-web/.yarn/virtual/flowbite-react-virtual-6de92941c3/0/cache/flowbite-react-npm-0.11.7-36d98922d3-1e5b150c3f.zip/node_modules/flowbite-react/dist/helpers'

Expected behavior

this file should exist and not cause

Context

just trying to use flowbite-react, not sure what i'm doing wrong,

[SutuSebastian]

Hey there, did u update & read the latest major updates to the core library?

v0.11.0 release changelog

tailwindcss/version.js is a file created during npx flowbite-react@latest init command and more explicitly the npx flowbite-react@latest patch command.

[SeeThruHead]

i just installed flowbite yesterday
i installed it by running

npx flowbite-react@latest init

i have just run this again, and the file still does not exist

/Users/shane.keulen/code/perpetua-web/.yarn/cache/tailwindcss-npm-3.4.15-ea0b9b13fd-709058837c.zip/node_modules/tailwindcss/version.js doesn't exist

this is the path it is looking for
are you sure your init script properly handles putting the file inside the .zip?

[SutuSebastian]

are you sure your init script properly handles putting the file inside the .zip?

the init script definitely does not handle modifying the insides of a .zip file, i'll need to think of a different approach in this case.

[anna-parker]

Hi! I am also seeing this error since the update to [email protected] when I run npm run install (details in loculus-project/loculus#3989). When I downgrade the version back to [email protected] the error is not there:

09:57:49 watching for file changes...
✘ [ERROR] Could not resolve "tailwindcss/version.js"

    node_modules/flowbite-react/dist/helpers/get-tailwind-version.js:1:20:
      1 │ import version from 'tailwindcss/version.js';
        ╵                     ~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "tailwindcss/version.js" as external to exclude it from the bundle, which
  will remove this error and leave the unresolved path in the bundle.

09:57:50 [ERROR] [UnhandledRejection] Astro detected an unhandled rejection. Here's the stack trace:
Error: Build failed with 1 error:
node_modules/flowbite-react/dist/helpers/get-tailwind-version.js:1:20: ERROR: Could not resolve "tailwindcss/version.js"
    at failureErrorWithLog (/Users/aparker/Documents/Github/loculus/website/node_modules/esbuild/lib/main.js:1477:15)
    at /Users/aparker/Documents/Github/loculus/website/node_modules/esbuild/lib/main.js:946:25
    at /Users/aparker/Documents/Github/loculus/website/node_modules/esbuild/lib/main.js:1355:9
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
  Hint:
    Make sure your promises all have an `await` or a `.catch()` handler.
  Error reference:
    https://docs.astro.build/en/reference/errors/unhandled-rejection/
  Stack trace:
    at /Users/aparker/Documents/Github/loculus/website/node_modules/flowbite-react/dist/helpers/get-tailwind-version.js: ERROR: Could not resolve "tailwindcss/version.js":1:20
    [...] See full stack trace in the browser, or rerun with --verbose.

Update: I also tried running the update command npx flowbite-react@latest init and this still fails details in: loculus-project/loculus#4020 (comment)

[SutuSebastian]

@anna-parker did u follow the release migration guide?

Ref:

Migration Guide

1. Update to the latest version:

   npm install flowbite-react@latest

2. Initialize the new engine:

   npx flowbite-react@latest init

   This will:

   • Set up the .flowbite-react directory
   • Configure your bundler
   • Update VSCode settings
   • Create necessary configuration files

3. Clean up your Tailwind configuration:

   - import flowbite from 'flowbite-react/tailwind';
   
   /** @type {import('tailwindcss').Config} */
   export default {
     content: [
   -    flowbite.content(),
   +    // The init command will add the correct content paths
     ],
     plugins: [
   -    flowbite.plugin(),
   +    // The init command will add the correct plugins
     ],
   }

4. Run the migration CLI command to automatically convert compound components to simple imports (see above: Breaking Changes -> Compound Components)

   npx flowbite-react@latest migrate

[SutuSebastian]

@anna-parker working on an update for the init command that also upgrades ur flowbite-react version if its below 0.11.x, because that's where the new engine and CLI breaking change happened.

[SutuSebastian]

The next version of flowbite-react will have a more robust tailwindcss version detection & management without running the patch command, hang tight.

[anna-parker]

Yes sorry I overlooked the migration guide and it is now building after following the steps! Thanks for the help!