Issue with lightningcss dependency in Vite 5.0 affecting Serverless deployment - Missing ../pkg

mercer08 commented 3 months ago

https://github.com/parcel-bundler/lightningcss/blob/baa1a2b7fa52eeb3827f8edcc2e14de33cd69ad0/node/index.js#L16

Description

After upgrading to Vite 5.0 for our Serverless application, we encountered an issue related to the lightningcss dependency. Specifically, lightningcss tries to require a module using a relative path (../pkg), which does not exist in its package structure. This issue is causing our Serverless deployment process to fail, displaying the following error:

This problem seems to stem from the new version of Vite's dependency on lightningcss, which is now causing issues during the Serverless deployment phase.

Steps to Reproduce

Upgrade Vite to version 5.0 in a Serverless project that uses lightningcss either directly or indirectly.
Attempt to deploy the project using Serverless Framework (serverless deploy) or during the build process triggered by Serverless.
Observe the error as the deployment or build process fails.

/bin/sh: line 1:  6615 Terminated              npm run deploy:testdev
ERROR Error: Command failed: cd fdnode && npm run deploy:testdev

Deploying fdssr to stage dev (ap-northeast-1)
��� [ERROR] Could not resolve "../pkg"

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

Expected Behavior

The Serverless deployment process should complete successfully without encountering errors related to missing modules in lightningcss.

Actual Behavior

The deployment process fails due to an unresolved module path in lightningcss, specifically pointing to the missing ../pkg module. This prevents the Serverless application from being deployed successfully.

Environment

OS: linux
Node Version: Node.js v20.10.0
Vite Version: ^5.1.5
lightningcss Version: ^1.24.0
Serverless Framework Version: "serverless": "^3.30.1", "serverless-esbuild": "^1.44.0",
Package Manager: npm

Attempts to Resolve

Reinstalled all project dependencies.
Directly installed @lightningcss/core.
Searched for similar issues in both Vite and lightningcss repositories and community forums.
Checked and attempted to adjust Serverless packaging configurations to bypass the issue.

None of the above steps have resolved the issue, which seems specific to the integration of Vite 5.0 and lightningcss in the context of Serverless deployments.

Additional Context

This issue is critically impacting our ability to deploy updates to our Serverless application. We rely on the Serverless Framework for deploying our application to AWS Lambda, and the current issue with lightningcss is blocking our deployment pipeline.

Any insights, workarounds, or fixes for this problem would be greatly appreciated. Thank you for your time and support.

useEffects commented 3 months ago

same issue with turborepo

cayquesilva commented 2 months ago

same with expo / react-native.

aralroca commented 2 months ago

same issue with Bun.build

aralroca commented 2 months ago

@mercer08 did you find some workaround?

aralroca commented 2 months ago

@devongovett can be related with the files in package.json?

https://github.com/parcel-bundler/lightningcss/blob/baa1a2b7fa52eeb3827f8edcc2e14de33cd69ad0/package.json#L35-L40

In this code, looks that there are dependencies of other files:

https://github.com/parcel-bundler/lightningcss/blob/baa1a2b7fa52eeb3827f8edcc2e14de33cd69ad0/node/index.js#L15-L23

At least:

pkg/*
node/*.node

However, I see that these files do not exist in the repo either... Are they generated during the build or how does it work? Thanks

devongovett commented 2 months ago

The problem is that your package manager (eg npm) is not installing the optional dependencies in the package. There is a dependency per os/cpu architecture that should be installed. The error you see here is because we attempt to fall back to a local version if the those packages are not found (for local development).

You'll need to check why your package manager is not working properly. It could be:

You have the --no-optional flag enabled, which would prevent installing optional dependencies.
You're running on an unsupported platform.
A bug in your package manager (eg https://github.com/npm/cli/issues/4828). Try deleting node_modules and your package lock file and installing again.

aralroca commented 2 months ago

Probably is more related with 2. You're running on an unsupported platform.. This happens after build a CLI, and this CLI can be used on any platform to build the files using Bun.build and lightningcss, but lightningcss lib is included in the bundle, and the problems comes after this CLI build.

Running Bun.build with lightningcss in runtime without the CLI it works.

Probably the same is happening to @mercer08 that comments that is happening in the build process.

devongovett commented 2 months ago

What platform are you running on? That means operating system/cpu.

aralroca commented 2 months ago

What platform are you running on? That means operating system/cpu.

uname -mprs: Darwin 23.4.0 arm64 arm
Chip: Apple M1 Pro
Memory: 16 GB
macOS: 14.4.1 (23E224)

devongovett commented 2 months ago

Then you're definitely on a supported platform. Your package manager isn't working properly. It should be installing lightningcss-darwin-arm64.

aralroca commented 2 months ago

I'm using bun as a package manager, and it install all dependencies, devDependencies, andoptionalDependencies. Without doing the build of my CLI, it works. The problem comes when generating the build that probably does not add the optionalDependencies inside the final code. I'm still investigating and see if this is it, but thanks for your feedback @devongovett.

usamasulaiman commented 1 month ago

I am using Yarn berry with pnp. It does install the optional dependencies appropriately (lightningcss-darwin-arm64 for m1 mac) but I still get the error on the relative ../pkg path line. Is getting the optional dependencies installed enough here in this case. Would you recommend doing something more? @devongovett

devongovett commented 1 month ago

hmm now looking at the code, it seems that is also behind an environment variable check. Is that somehow set on your system?

https://github.com/parcel-bundler/lightningcss/blob/baa1a2b7fa52eeb3827f8edcc2e14de33cd69ad0/node/index.js#L15C5-L15C37

Jon-a-than commented 1 month ago

I have same problem.

I'm not sure if this is a problem with lightningcss. I can reproduce the problem in the following way.

It seems to be caused by the side effects of the vite package.

$ pnpm ls
Legend: production dependency, optional only, dev only

vite-lightningcss@0.0.0 F:\...\vite-lightningcss (PRIVATE)

devDependencies:
lightningcss 1.25.0
typescript 5.4.5
vite 5.2.11

$ pnpm -v
9.1.2

th-m commented 1 month ago

I am seeing this issue using nx and react / vite apps.

brsc2909 commented 3 weeks ago

Anyone have a workaround for this yet?

DominicDolan commented 3 weeks ago

I had this issue and I found it was caused from importing from lightningcss in a runtime file

I accidentally had this in a file that was running in the browser:

import {transform} from "lightningcss"

When I removed it, it worked

maxpatiiuk commented 3 weeks ago

hmm now looking at the code, it seems that is also behind an environment variable check. Is that somehow set on your system?

I am having the same error (when esbuild tries to bundle-in lightningcss) I don't think it has to do with an env variable (which is not set) The Could not resolve "../pkg" error is emitted when code is being built, not executed. I am building on m1 mac with yarn package manager - lightningcss-darwin-arm64 is correctly present.

Manually commenting out this line in node_modules/lightningcss/node/index.js makes the build go though fine:

module.exports = require(`../pkg`);

The error you see here is because we attempt to fall back to a local version if the those packages are not found (for local development).

Could you try stripping out the local development code from the package that get's published to npm (i.e replace the import with throwing an exception saying that platform specific lightningcss package was not found)?

Even if this particular require() call should not invoked at runtime, the fact that it is present confuses static checkers in build tools.

devongovett commented 3 weeks ago

Wait, why are you running esbuild over the lightningcss code in node_modules?

maxpatiiuk commented 3 weeks ago

I have an internal package that is used for authoring libraries. To deduplicate the runtime code between libraries using this package, it is installed as a "dependency" rather than "devDependency". Besides runtime code, the internal package contains several build-time plugins (including lightningcss) in a separate bundle. To not have to declare "lightningcss" as a dependency (and thus avoid lightningcss being installed for anyone consuming the public library), I am trying to bundle it inside my plugins bundle. If this is not possible, I will end up splitting my internal package into separate "runtime" and "plugins" packages

aralroca commented 3 weeks ago

In my case, it happens because I want to add it with the Bun bundler as a plugin.

parcel-bundler / lightningcss