adobe / css-tools

CSS parser / stringifier for Node.js
MIT License
44 stars 10 forks source link

Issue when using module indirectly using Create-React-App and import #285

Open edi9999 opened 8 months ago

edi9999 commented 8 months ago

I've struggled with this issue for several hours already, so I'm going to summarize my findings so far and maybe there is something you could help me with.

I currently am providing a package to some other users who are using my package using import syntax.

In the package I provide, I'm using require to load the @adobe/css-tools package, as it seemed to me that it supports both import or require.

I've published a very simple library, called css-wrapper-xxx.

In the css-wrapper-xxx library, I simply wrote, in order to compare how lodash and @adobe/css-tools behave :

const adobe = require("@adobe/css-tools");
const lodash = require("lodash");
module.exports = {adobe, lodash};

I then want to use my "css-wrapper-xxx" library from a Create-React-App project, which you can get up and running using following commands :

git clone https://github.com/edi9999/repro-adobe-css-tools.git
cd repro-adobe-css-tools
npm install
npm start
# open browser on localhost:3000/

When I log the values returned by the css-wrapper-xxx library, for some strange reason, the value for "adobe" is a path and not the object that should've been exported.

Selection_001 Selection_002 assets/2071336/563cf962-6ea0-4be0-8e79-2c94a207d79e)

Expected Behaviour

I would expect the require to work

Actual Behaviour

The require (from css-wrapper-xxx) inside then import (from the create-react-app project) returns a string

Notes / Solutions

I'm not sure whether this issue is directly related to css-tools, or if this is a webpack or even a CreateReactApp issue.

edi9999 commented 8 months ago

It might be linked to this issue :

https://github.com/facebook/create-react-app/issues/11889

edi9999 commented 8 months ago

The exact same package is working correctly with Vite.JS