[v11] missing `style` package export for webpack based asset pipelines #1184

tagliala · 2024-08-30T11:30:16Z

Describe the bug

Hello, I'm trying to upgrade a working app using shakapacker (a pre-processor based on webpack) to Choices v11 but I'm getting an error related to scss import

When updating from Choices.js 10 to Choices.js 11, shakapacker is not able
to resolve

@import "choices.js/src/styles/choices"; in Scss
import "choices.js/public/assets/styles/choices.css"; in JS

This is due to the new exports entry in package.json, which require
specific entries for webpack, such as style

To Reproduce

Tools and versions required to replicate

npm 10.8.0
Shakapacker 7/8
Node 20.15.0
Ruby 3.3.4 (should not be relevant)
Rails 7.2.1 (anything >= 6.1.0 should not be relevant)

Initial app

rails _7.2.1_ new test-choices-package-exports --skip-active-record --skip-javascript --skip-git --skip-test
cd test-choices-package-exports
echo "{ \"private\": true, \"packageManager\": \"npm@10.8.2\" }" > package.json
echo "gem 'shakapacker', '8.0.2'" >> Gemfile
bundle
rails shakapacker:install
npm add css-loader style-loader mini-css-extract-plugin css-minimizer-webpack-plugin
npm add choices.js@10.2.0
echo "module.exports = { plugins: [require('postcss-import')] }" > postcss.config.js
git add .
git commit -am "First commit"
git branch tests/scss main
git branch tests/css main

CSS import from JavaScript

git checkout tests/css
echo "import \"choices.js/public/assets/styles/choices.css\";" >> app/javascript/packs/application.js
git commit -am "CSS test"
bin/shakapacker # WORKS, CSS OUTPUT PRESENT
npm add choices.js@^11.0.0
bin/shakapacker # DOES NOT WORK

Error:

ERROR in ./app/javascript/packs/application.js 16:0-53
Module not found: Error: Package path ./public/assets/styles/choices.css is not exported from package ./node_modules/choices.js (see exports field in ./node_modules/choices.js/package.json)

Sass

git checkout tests/scss
npm add sass-loader sass
echo "@import \"choices.js/src/styles/choices.scss\";" >> app/javascript/packs/application.scss
git add .
git commit -am "Scss test"
bin/shakapacker # WORKS, CSS OUTPUT PRESENT
npm add choices.js@^11.0.0
bin/shakapacker # DOES NOT WORK

Error:

Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Can't find stylesheet to import.
  ╷
1 │ @import "choices.js/src/styles/choices.scss";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  app/javascript/packs/application.scss 1:9  root stylesheet

Suggested solution

https://github.com/ifad/Choices/tree/bugfix/style-export

npm add choices.js@ifad/choices#bugfix/style-export
Retry bin/shakapacker

Details are in the commit message

Ref: https://webpack.js.org/guides/package-exports/#reference-syntax

The text was updated successfully, but these errors were encountered:

Xon · 2024-08-31T00:08:08Z

@tagliala Can you try the webpack-css branch from this #1188 PR?

It appears to be the "sideEffects": false being an overly big hammer for webpack ref

Mimic FontAwesome's package.json Close Choices-js#1184

Mimic FontAwesome's `package.json`. - Add `style` package export - Add `styles.scss` and `styles` exports - Add `styles.scss` to "side effects" to prevent issues with tree-shaking With this commit, it is possible to import the style with the following approaches: ```scss @import "choices.js"; @import "choices.js/styles"; @import "choices.js/styles.scss"; ``` Refs: - https://webpack.js.org/guides/package-exports/ - FortAwesome/Font-Awesome#18654 Close Choices-js#1184

tagliala · 2024-08-31T07:13:16Z

Hello, unfortunately this does not work with my specific use case, but I can also see that fontawesome's package.json contains sideEffects entries for .css and .scss.

I've tried

@import "choices.js/src/styles/choices";
@import "choices.js/src/styles/choices.scss";
@import "choices.js";

And the error is always the same

Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Can't find stylesheet to import.
   ╷
30 │ @import "choices.js/src/styles/choices.scss";
   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵

Back in 2022, when Font Awesome 6 was released, we had to deal with a lot of use cases and asset pipelines. I can still provide a script to create a reproducible test case, but that would be specific to Rails, Ruby, webpack, shakapacker. Let me know if it is the case

However, according to our finding back at the times, the following commit should contain all the necessary parts to make webpack work and prevent tree-shaking issues:

ifad@6a532c0

Please also check the side effects

Xon · 2024-08-31T10:22:10Z

Can you try using the following syntax against the proposed PR?

@import '~choices.js/src/styles/choices.scss'

The ~ is a bit of webpack syntax which I believe will made it pull the stylesheet from the node_modules path. You'll need sass-loader/sass configured in webpack.

tagliala · 2024-08-31T10:59:16Z

Hi,

The ~ is a bit of webpack syntax which I believe will made it pull the stylesheet from the node_modules path. You'll need sass-loader/sass configured in webpack.

I do have those, but using ~ was an old deprecated way of referencing modules used until 2022

Ref: https://webpack.js.org/loaders/sass-loader/#resolving-import-at-rules

Using ~ is deprecated and should be removed from your code, but we still support it for historical reasons. Why can you remove it? The loader will first try to resolve @import as a relative path. If it cannot be resolved, then the loader will try to resolve @import inside node_modules.

Ref: diowa/ruby3-rails6-bootstrap-heroku@370f749

I've get rid of all ~s in my projects a couple of years ago.

Unfortunately we had a lot of struggles with exports entry and webpack. And I understand the resistance to including changes in package.json

Ref: fnando/i18n#91 (comment)

Said so, I will provide you the script that I've used in Font Awesome when we had to deal with this package.json entry and webpack(er) based asset pipelines. Please allow me some time (I will create a new comment)

EDIT: sorry, I've seen the .css files. I'm going to improve the issue description and the fix

Mimic FontAwesome's `package.json`. - Add `style` package export for webpack - Add `sass` package export for webpack - Add `styles.css` and `styles` exports for main CSS file - Add `*.scss` and `*.css` to "side effects" to prevent issues with tree-shaking With this commit, it is possible to import the style with the following approaches: ```css @import "choices.js"; @import "choices.js/styles"; @import "choices.js/styles.css"; ``` ```scss @import "choices.js"; ``` Refs: - https://webpack.js.org/guides/package-exports/ - FortAwesome/Font-Awesome#18654 Close Choices-js#1184

Xon · 2024-08-31T11:51:37Z

@tagliala Can you create a PR for your requested changes?

tagliala · 2024-08-31T12:02:26Z

@Xon Yes I can, I'm now investigating also css support, dedicated sass support, and it requires a little bit of time. I will use this issue to post updates and eventually open a PR

tagliala · 2024-08-31T16:03:45Z

WORK IN PROGRESS

Tools and versions required to replicate

npm 10.8.0
Shakapacker 7/8
Node 20.15.0
Ruby 3.3.4 (should not be relevant)
Rails 7.2.1 (anything >= 6.1.0 should not be relevant)

Actual behavior

When updating from Choices.js 10 to Choices.js 11, shakapacker is not able
to resolve

@import "choices.js/src/styles/choices"; in Scss
import "choices.js/public/assets/styles/choices.css"; in JS

This is due to the new exports entry in package.json, which require
specific entries for webpack, such as style

How to reproduce

Initial app

rails _7.2.1_ new test-choices-package-exports --skip-active-record --skip-javascript --skip-git --skip-test
cd test-choices-package-exports
echo "{ \"private\": true, \"packageManager\": \"npm@10.8.2\" }" > package.json
echo "gem 'shakapacker', '8.0.2'" >> Gemfile
bundle
rails shakapacker:install
npm add css-loader style-loader mini-css-extract-plugin css-minimizer-webpack-plugin
npm add choices.js@10.2.0
echo "module.exports = { plugins: [require('postcss-import')] }" > postcss.config.js
git add .
git commit -am "First commit"
git branch tests/scss main
git branch tests/css main

CSS import from javascript

git checkout tests/css
echo "import \"choices.js/public/assets/styles/choices.css\";" >> app/javascript/packs/application.js
git commit -am "CSS test"
bin/shakapacker # WORKS, CSS OUTPUT PRESENT
npm add choices.js@^11.0.0
bin/shakapacker # DOES NOT WORK

Error:

ERROR in ./app/javascript/packs/application.js 16:0-53
Module not found: Error: Package path ./public/assets/styles/choices.css is not exported from package ./node_modules/choices.js (see exports field in ./node_modules/choices.js/package.json)

Sass

git checkout tests/scss
npm add sass-loader sass
echo "@import \"choices.js/src/styles/choices.scss\";" >> app/javascript/packs/application.scss
git add .
git commit -am "Scss test"
bin/shakapacker # WORKS, CSS OUTPUT PRESENT
npm add choices.js@^11.0.0
bin/shakapacker # DOES NOT WORK

Error:

Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Can't find stylesheet to import.
  ╷
1 │ @import "choices.js/src/styles/choices.scss";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  app/javascript/packs/application.scss 1:9  root stylesheet

Cause

The cause is the new exports field in package.json. Apparently it is tricking
webpack and it is not able to solve choices.js's stylesheet

Suggested solution

https://github.com/ifad/Choices/tree/bugfix/style-export

npm add choices.js@ifad/choices#bugfix/style-export
For CSS in js: change import to import "choices.js"; or import "choices.js/styles";
For Scss: change @import to @import "choices.js/scss/choices";
Retry bin/shakapacker

Details are in the commit message

Ref: https://webpack.js.org/guides/package-exports/#reference-syntax

Mimic FontAwesome's `package.json`. - Add `style` package export for webpack - Add `sass` package export for webpack - Add `styles.css` and `styles` exports for main CSS file - Add `*.scss` and `*.css` to "side effects" to prevent issues with tree-shaking With this commit, it is possible to import the style with the following approaches: ```css @import "choices.js"; @import "choices.js/styles"; @import "choices.js/styles.css"; ``` ```scss @import "choices.js"; ``` Refs: - https://webpack.js.org/guides/package-exports/ - FortAwesome/Font-Awesome#18654 Close Choices-js#1184

Mimic FontAwesome's `package.json` to improve compatibility with webpack - Add `style` package export to allow main CSS import from JavaScript - Add `sass` package export to allow - Add `styles.css` and `styles` exports for main CSS file - Add `*.scss` and `*.css` to "side effects" to prevent issues with tree-shaking With this commit, it is possible to import the style with the following approaches: ```js import "choices.js"; import "choices.js/styles"; import "choices.js/styles.css"; ``` ```scss @import "choices.js"; ``` Refs: - https://webpack.js.org/guides/package-exports/ - FortAwesome/Font-Awesome#18654 Close Choices-js#1184

Add some entries to `package.json` to improve compatibility with webpack - Add `style` package export to allow main CSS import from JavaScript - Add `sass` package export to allow - Add `styles.css` and `styles` exports for main CSS file - Add `*.scss` and `*.css` to "side effects" to prevent issues with tree-shaking With this commit, it is possible to import the style with the following approaches: ```js import "choices.js"; import "choices.js/styles"; ``` ```scss @import "choices.js/scss/styles"; ``` I was expecting that `@import "choices.js";` in scss would have imported the Scss file, but it is not the case. It is taking the CSS. Refs: - https://webpack.js.org/guides/package-exports/ Close Choices-js#1184

Add some entries to `package.json` to improve compatibility with webpack - Add default `style` and `sass` exports as per webpack requirements - Add `styles/*` exports for CSS files - Add `scss/styles/*` exports for Scss files - Add `*.scss` and `*.css` to "side effects" to prevent issues with tree-shaking With this commit, it is possible to import the style with the following approaches: ```js import "choices.js/styles/choices.css"; // CSS import "choices.js/scss/styles/choices.scss"; // Scss ``` ```scss @import "choices.js/scss/styles/choices"; ``` Refs: - https://webpack.js.org/guides/package-exports/ Close Choices-js#1184

Add some entries to `package.json` to improve compatibility with webpack - Add default `style` and `sass` exports as per webpack requirements - Add `public/assets/styles/*` exports for CSS files - Add `src/styles/*` exports for Scss files. Extension can be omitted to prevent linting issues with `stylelint` - Add `*.scss` and `*.css` to "side effects" to prevent issues with tree-shaking With this commit, it is possible to import styles with the same syntax of v10 to prevent a breaking change in webpack based applications Refs: - https://webpack.js.org/guides/package-exports/ - Close Choices-js#1184

tagliala added the bug label Aug 30, 2024

tagliala changed the title ~~Upgrading to v11: missing styles package export~~ Upgrading to v11: missing style package export Aug 30, 2024

tagliala changed the title ~~Upgrading to v11: missing style package export~~ [v11]: missing style package export for webpack based asset pipelines Aug 30, 2024

tagliala changed the title ~~[v11]: missing style package export for webpack based asset pipelines~~ [v11] missing style package export for webpack based asset pipelines Aug 30, 2024

Xon added a commit that referenced this issue Aug 31, 2024

Fix regression where webpack doesn't permit importing scss/css #1184

5d9a59f

Xon linked a pull request Aug 31, 2024 that will close this issue

Fix regression where webpack doesn't permit importing scss/css #1188

Closed

tagliala added a commit to ifad/Choices that referenced this issue Aug 31, 2024

Second commit

f731bc2

Mimic FontAwesome's package.json Close Choices-js#1184

tagliala added a commit to ifad/Choices that referenced this issue Aug 31, 2024

Second commit

3bb9840

Mimic FontAwesome's package.json Close Choices-js#1184

tagliala mentioned this issue Sep 1, 2024

Fix regression where webpack doesn't permit importing scss/css #1193

Merged

10 tasks

Xon closed this as completed in #1193 Sep 2, 2024

Xon closed this as completed in 5721e9a Sep 2, 2024

tagliala mentioned this issue Sep 22, 2024

[v0.8.x]: cannot import in complex webpack-based workflows frappe/gantt#439

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[v11] missing `style` package export for webpack based asset pipelines #1184

[v11] missing `style` package export for webpack based asset pipelines #1184

tagliala commented Aug 30, 2024 •

edited

Loading

Xon commented Aug 31, 2024 •

edited

Loading

tagliala commented Aug 31, 2024 •

edited

Loading

Xon commented Aug 31, 2024

tagliala commented Aug 31, 2024 •

edited

Loading

Xon commented Aug 31, 2024

tagliala commented Aug 31, 2024

tagliala commented Aug 31, 2024 •

edited

Loading

[v11] missing style package export for webpack based asset pipelines #1184

[v11] missing style package export for webpack based asset pipelines #1184

Comments

tagliala commented Aug 30, 2024 • edited Loading

Describe the bug

To Reproduce

Tools and versions required to replicate

Initial app

CSS import from JavaScript

Sass

Suggested solution

Xon commented Aug 31, 2024 • edited Loading

tagliala commented Aug 31, 2024 • edited Loading

Xon commented Aug 31, 2024

tagliala commented Aug 31, 2024 • edited Loading

Xon commented Aug 31, 2024

tagliala commented Aug 31, 2024

tagliala commented Aug 31, 2024 • edited Loading

WORK IN PROGRESS

Tools and versions required to replicate

Actual behavior

How to reproduce

Initial app

CSS import from javascript

Sass

Cause

Suggested solution

[v11] missing `style` package export for webpack based asset pipelines #1184

[v11] missing `style` package export for webpack based asset pipelines #1184

tagliala commented Aug 30, 2024 •

edited

Loading

Xon commented Aug 31, 2024 •

edited

Loading

tagliala commented Aug 31, 2024 •

edited

Loading

tagliala commented Aug 31, 2024 •

edited

Loading

tagliala commented Aug 31, 2024 •

edited

Loading