Hello,
I added the folowing dependency; https://splitting.js.org/
By doing this;
yarn add -D splitting
So my package.json looks like this;
"devDependencies": {
"@roots/bud": "6.11.0",
"@roots/bud-tailwindcss": "6.11.0",
"@roots/sage": "6.11.0",
"@studio-freight/lenis": "^1.0.4",
"@tailwindcss/typography": "^0.5.9",
"gsap": "^3.11.5",
"splitting": "^1.0.6"
},
I imported JS in app.js;
import Splitting from 'splitting';
Whenever I try import the CSS in app.css, this happens;
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import '~splitting/dist/splitting.css';
@import '~splitting/dist/splitting-cells.css';
Error;
│ Failed to find '~splitting/dist/splitting.css'
│ in [
│ ./resources/styles
│ ]
But when I click on the .css link I get redirected to the file I want to import. What am I doing wrong :)?
Thanks!
I can reproduce this issue with latest Sage 10.
One workaround is to specify the relative path:
@import '../../node_modules/splitting/dist/splitting.css';
@import '../../node_modules/splitting/dist/splitting-cells.css';
Possibly similar/related issues:
opened 07:34PM - 24 Jan 22 UTC
closed 02:43AM - 25 Jan 22 UTC
bug
@roots/bud
@roots/bud-build
### Agreement
- [X] This is not a duplicate of an existing issue
- [X] I have r… ead the [guidelines for Contributing to Roots Projects](https://github.com/roots/.github/blob/master/CONTRIBUTING.md)
- [X] This is not a personal support request that should be posted on the [Roots Discourse](https://discourse.roots.io/) community
### Expected Behavior
Sage 10 build process with `bud` should run without hanging/freezing.
### Actual Behavior
Sage 10 build process with `bud` hangs/freezes unexpectedly and has to be manually cancelled (e.g. using `Ctrl`+`c`, twice btw.).
### Steps To Reproduce
1. Create an empty Sage 10 project from `main` branch (`composer create-project roots/sage sage10 dev-main`).
2. Ensure all dependencies are installed (`npm install`; `composer install`).
3. Run the build (`yarn build`), note that the build runs fine.
4. Add the `npm` package [`box-sizing-border-box`](https://www.npmjs.com/package/box-sizing-border-box) (`yarn add box-sizing-border-box`) (for replicating this bug, it doesn't matter whether it is a `development` dependency or not).
For replicating this bug, there is no need for an `import` or similar reference, the package just has to be installed.
5. Run the build again (`yarn build`). Note that the build now hangs/freezes indefinitely and has to be terminated manually.
Running the build with the `--no-dashboard` flag (just learned about it from this bug report form),
the build doesn't hang but fails with an error (see the `Logs` section below).
6. As additional proof that it is indeed this package that causes this bug, uninstall/remove that package again (`yarn remove box-sizing-border-box`).
7. Re-run the build a third time, note that the build now run completes normally again.
Note: Why this particular package [`box-sizing-border-box`](https://www.npmjs.com/package/box-sizing-border-box) is "cryptonite" to the build runner is a mystery to me. I also manually stripped fields and files from that installed package, but this doesn't help.
Maybe some metadata about this package when it is installed that causes issues with the build process?
There may be other packages that are similar structured and would also cause this issue.
The issue occurred the first time with the latest Sage 10 release `v2.0.0-beta.8`,
but hadn't happen before as with `v2.0.0-beta.7`.
### version
`@roots/bud/5.1.0 wsl-x64 node-v16.9.1` (`./node_modules/.bin/bud --version`)
### What package manager are you using?
yarn classic
### version
1.22.17
### Are you using pnpm?
- [ ] yes
- [X] no
### Logs
```shell
[compiler] › ✖ ModuleNotFoundError: Module not found: Error: Can't resolve '@wordpress/blocks' in '[secure]/resources/scripts'
at [secure]/node_modules/webpack/lib/Compilation.js:2011:28
at [secure]/node_modules/webpack/lib/NormalModuleFactory.js:795:13
at eval (eval at create ([secure]/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
at [secure]/node_modules/webpack/lib/NormalModuleFactory.js:275:22
at eval (eval at create ([secure]/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
at [secure]/node_modules/webpack/lib/NormalModuleFactory.js:431:22
at [secure]/node_modules/webpack/lib/NormalModuleFactory.js:124:11
at [secure]/node_modules/webpack/lib/NormalModuleFactory.js:667:25
at [secure]/node_modules/webpack/lib/NormalModuleFactory.js:852:8
at [secure]/node_modules/webpack/lib/NormalModuleFactory.js:972:5
```
### Configuration
```shell
No configuration changes. The newly created Sage 10 theme is used as-is.
```
### Relevant .budfiles
No changes to the `.budfile`s. The newly created Sage 10 theme is used as-is.
https://github.com/roots/bud/issues/1622
But it should be working like I tried right? If i’m doing something wrong I would like to know.
Are you using the latest @roots/bud(-*)
dependencies?
Do you still have the same issue?
erip2
April 17, 2023, 5:40pm
5
Firstly, you shouldn’t add the package as a dev dependecy. This is a package that will be used on the user so it needs to be added in the dependency list. Please, try to remove it and add it again without the -D
keyword.
Now, for the css to be known by the local CSS file you also need to add the css-loader
to the bud configuration, eg:
First, install the css-loader
: yarn add -D css-loader
Then, on the bud.config.js
you can add:
export default async (app) => {
app
/** ..... **/
.hooks.on(`build.module.rules.oneOf`, (rules = []) => {
rules.push({
test: /\.css$/,
use: [
{
loader: `css-loader`,
},
],
})
return rules
})
Now, on the main css file remove the ~
from the imports:
@import 'splitting/dist/splitting.css';
@import 'splitting/dist/splitting-cells.css';
and now hopefully it should work.
1 Like
I’m not sure that’s correct. splitting
is for frontend, but it will be compiled into a runtime / chunk by Webpack via Bud. This is why we put extensions like bud-vue
in devDependencies
.
Bud contains a working setup for css-loader
out-of-the-box, and in Sage 10 it’s used for Tailwind.
Sounds like @strarsis ’ idea that splitting
does not expose exports correctly is the issue here, to me. But I could be wrong. As a side note, splitting
hasn’t had a release since 2018.
erip2
April 17, 2023, 7:21pm
7
I don’t think that’s correct. devDependencies
are packages that are used for testing and other development processes, there’s no need to ship them to the client since their only purpose is on the development process. That’s why bud-vue
is in the devDependecies
list; what it does is get the .vue
files and makes them to a .js
file (and a lot of other processes) so the browser can run. At the end, only the .js
files are shipped to the client.
This package on the other hand is used for doing changes on HTML, it should go to the client. That’s why even in its documentation the installing is without the -D
.
Yes, this confused me as well, but I did make tests locally and what I’ve written above worked.