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:
Bootstrap a new volto project yo @plone/volto volto-test; cd volto-test; ...
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"
}
}
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.
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.To Reproduce Steps to reproduce the behavior:
yo @plone/volto volto-test; cd volto-test; ...
yo @plone/volto:addon
yarn workspace test-addon add @adobe/react-spectrum
yarn install
export default function TestView(props) { return (
); }
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 theyarn 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.