themesberg / flowbite-react

Official React components built for Flowbite and Tailwind CSS
https://flowbite-react.com
MIT License
1.77k stars 395 forks source link

Remix Dev not running with flowbite-react 0.7.8 #1343

Closed geraldyeo closed 3 months ago

geraldyeo commented 3 months ago

Steps to reproduce

  1. Upgrade from 0.7.5 to 0.7.8
  2. Run remix in dev

Current behavior

remix dev fails to run, giving the following error

SyntaxError: Named export 'Badge' not found. The requested module 'flowbite-react' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'flowbite-react';

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
    at ModuleJob.run (node:internal/modules/esm/module_job:191:5)
    at ModuleLoader.import (node:internal/modules/esm/loader:336:24)
    at file:///Users/gerald/Code/Jan/fs/apps/webapp/server.js:25:22
Failed running 'server.js'

Expected behavior

remix dev to serve the app

Context

What are you trying to accomplish? Does this only happen on a specific browser, screen size, or operating system?

Trying to greenkeep the app, but updating to latest 0.7.8 fails the remix dev.

Downgrading back to 0.7.5, remix dev runs as normal.

If possible, provide a live example URL, screenshot, video, or a repository with the minimal reproduction of the issue.

CleanShot 2024-04-02 at 14 04 20@2x

SutuSebastian commented 3 months ago

Is ur app using the new vite dev server or the classic remix one (remix.config.js)?

geraldyeo commented 3 months ago

It is the classic one, with an Express server (https://github.com/remix-run/remix/tree/main/templates/classic-remix-compiler/express)

SutuSebastian commented 3 months ago

Gotcha, I see where the problem is. Apparently package.json exports does not work the same as for main and module fields. exports field needs explicit .cjs or .mjs file extensions for the bundler/package manager to know how to import and treat the file, derp, why can't it work just like main and module.

This might have to bring in a breaking change.

corneliusroemer commented 3 months ago

Getting the same issue when upgrading flowbite-react from 0.7.5 to 0.7.8 in an astro/vite project

07:48:01 [ERROR] file:///app/dist/server/chunks/pages/index_xBUQ-xOB.mjs:26
import { Datepicker } from 'flowbite-react';
         ^^^^^^^^^^
SyntaxError: Named export 'Datepicker' not found. The requested module 'flowbite-react' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'flowbite-react';
const { Datepicker } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:134:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:217:5)
    at async ModuleLoader.import (node:internal/modules/esm/loader:323:24)
    at async NodeApp.render (file:///app/dist/server/entry.mjs:1240:45)
    at async file:///app/dist/server/entry.mjs:1590:24
SutuSebastian commented 3 months ago

Released 0.8.0 which focuses on fixing the build step of the library and streamlining the onboarding both as a contributor and as a library user.

Please read the release changelog for the breaking changes and the steps to upgrade.