✘ [ERROR] Could not resolve "lightningcss" ONLY when running remix dev

[samuelmburu]

Reproduction

Getting this error when i run the dev server:

❯ npx remix dev

 💿  remix dev

 info  building...
✘ [ERROR] Could not resolve "lightningcss"

    node_modules/vite/dist/node/chunks/dep-B-u6xNiR.js:33134:59:
      33134 │ ...ightningCSS = createCachedImport(() => import('lightningcss'));
            ╵                                                  ~~~~~~~~~~~~~~

  You can mark the path "lightningcss" as external to exclude it from the bundle, which will remove this error. You can also add ".catch()" here to handle this failure at run-time instead of bundle-time.

When i add lightningcss as a dependency, i get this error:

❯ npx remix dev

 💿  remix dev

 info  building...
✘ [ERROR] Could not resolve "../pkg"

    node_modules/lightningcss/node/index.js:16:27:
      16 │   module.exports = require(`../pkg`);
         ╵                            ~~~~~~~~

Even weirder is that it builds fine, it's only when running the dev server that this issue comes up

---

What I've done

• I've nuked my node_modules and package-lock.json multiple times,
• switched to node 20.11.1
• cleared node cache clear --force and npm cache verify
• tried working a fix through patch-package, but don't know what to change to fix the issue

I found this issue on the lightningcss github - parcel-bundler/lightningcss#701 (comment)

Is there a way to externalize deps when using remix-classic? (i migrated to remix-vite, but it was super buggy and switche back)

--
Any and all help is greatly appreciated - I've been working through vite/remix build issues for the last couple of days and it is blocking my other sprint work :/

System Info

System:
    OS: macOS 14.3.1
    CPU: (12) arm64 Apple M3 Pro
    Memory: 258.16 MB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.5.0 - ~/.nvm/versions/node/v18.19.0/bin/npm
  Browsers:
    Chrome: 122.0.6261.129
    Firefox Nightly: 126.0a1
    Safari: 17.3.1
  npmPackages:
    @remix-run/css-bundle: ^2.3.1 => 2.3.1
    @remix-run/dev: ^2.3.1 => 2.3.1
    @remix-run/eslint-config: ^2.0.1 => 2.8.1
    @remix-run/node: ^2.3.1 => 2.3.1
    @remix-run/react: ^2.3.1 => 2.3.1
    @remix-run/serve: ^2.3.1 => 2.3.1

Used Package Manager

npm

Expected Behavior

npx remix dev should work like npx remix build and not throw errors

Actual Behavior

npx remix dev throws errors on lightningcss

npx remix build works just fine

... but since npx remix dev isn't working, i can't dev :(

[samuelmburu]

I'm gonna close this -- it seems like this was caused by my jumping to remix v2.8.1 ---

I should have done better due diligence when it came to upgrading

However, it does feel like if there are breaking changes, it should be a major version or come with more flags or big red command line warnings after installing... Or call it out on the documentation pages