Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error using a Component Library with css import #6171

Open
Nimo-19 opened this issue Jul 18, 2024 · 0 comments
Open

Error using a Component Library with css import #6171

Nimo-19 opened this issue Jul 18, 2024 · 0 comments
Labels
01 type: bug 30 needs: triage New issue that needs confirmation before work begins

Comments

@Nimo-19
Copy link

Nimo-19 commented Jul 18, 2024

Describe the bug
Currently I am struggling to use a component library with a css import.

I tried creating an addon and installing @adobe/react-spectrum
At first all worked fine, but after a yarn install in the base project I get the following error.

[...]/volto-test/node_modules/@react-spectrum/actiongroup/dist/vars.406b82f3.css:1
.Dniwja_i18nFontFamily {
^

SyntaxError: Unexpected token '.'
    at wrapSafe (node:internal/modules/cjs/loader:1281:20)
    at Module._compile (node:internal/modules/cjs/loader:1321:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
    at Module.load (node:internal/modules/cjs/loader:1208:32)
    at Function.Module._load (node:internal/modules/cjs/loader:1024:12)
    at Module.require (node:internal/modules/cjs/loader:1233:19)
    at require (node:internal/modules/helpers:179:18)
    at Object.<anonymous> (/home/nimo/workspace/hrz/plone/frontend/volto-test/node_modules/@react-spectrum/actiongroup/dist/ActionGroup.main.js:1:1)
    at Module._compile (node:internal/modules/cjs/loader:1358:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
sswp> !!! Script exited with code 1

To Reproduce
Steps to reproduce the behavior:

  1. Bootstrap a new volto project yo @plone/volto volto-test; cd volto-test; ...
  2. Create a addon test-addon yo @plone/volto:addon
  3. Add @adobe/react-spectrum yarn workspace test-addon add @adobe/react-spectrum
  4. Install with yarn install
  5. In the addon create a simple Block like in the plone training with:
import { ActionButton } from '@adobe/react-spectrum';

export default function TestView(props) {
  return (
    <div>
      <ActionButton>Hello World</ActionButton>
    </div>
  );
}
  1. Start with yarn start
  2. The aforementioned server side error

Expected behavior
The installed package should go through the bundler to be picked up by the css-loader

Software (please complete the following information):

{
[...]
  "peerDependencies": {
    "@plone/volto": "^17.0.0"
  },
  "dependencies": {
    "@adobe/react-spectrum": "3.35.1"
  }
}

Additional context
I think the culprit is somewhere here:

CSS must go trought the bundling step, for the css-loader to pick up the require([...].css).
At first this is covered by the addon name.
But the yarn install puts it out of the addon context and installs it in the base project. After that the files are no longer bundled and the server cannot handle .css files.
Would be great to have some way to add packages to this allowlist besides addons.

@Nimo-19 Nimo-19 changed the title Installing Component Library with css import Error using a Component Library with css import Jul 18, 2024
@ichim-david ichim-david added the 30 needs: triage New issue that needs confirmation before work begins label Aug 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
01 type: bug 30 needs: triage New issue that needs confirmation before work begins
Projects
None yet
Development

No branches or pull requests

2 participants