plone / volto

React-based frontend for the Plone Content Management System
https://demo.plone.org/
MIT License
446 stars 606 forks source link

Error using a Component Library with css import #6171

Open Nimo-19 opened 1 month ago

Nimo-19 commented 1 month ago

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 (

Hello World

); }

6. Start with `yarn start`
7. 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):**
```json

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

Additional context I think the culprit is somewhere here: https://github.com/plone/volto/blob/6c4442415ac16293e48ce6e0a18c4ab7d9352abd/packages/volto/razzle.config.js#L397

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.