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.

Sign up for GitHub

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

Jump to bottom

Experiments.css reliance on fact that css should be loaded before js is a huge breaking change #17611

Closed
IdeaHunter opened this issue Aug 20, 2023 · 7 comments
Closed

Experiments.css reliance on fact that css should be loaded before js is a huge breaking change #17611

IdeaHunter opened this issue Aug 20, 2023 · 7 comments
Labels
inactive

Comments

@IdeaHunter
Copy link

IdeaHunter commented Aug 20, 2023 •
edited

Bug report/breaking change

Im trying experimental feature: #14893

Imagine you have following code
index.js:

import './index.css'
addEventListener("DOMContentLoaded", (event) => {
     //do something useful here
})

index.html:

<!DOCTYPE html>
<html>
    <head>
        <script src="./main.js"></script>
        <link rel="stylesheet" href="./main.css"></link>
    </head>
    <body>

    </body>
</html>

What is the current behavior?
This code would fail:

Uncaught TypeError: __webpack_modules__[moduleId] is not a function
    at __webpack_require__

If the current behavior is a bug, please provide the steps to reproduce.
Here I made a repo to reproduce:

  1. Clone https://github.com/IdeaHunter/webpack-serve-css-modules-repro
  2. yarn install
  3. yarn webpack or yarn webpack serve

What is the expected behavior?
No error should happen or if its intended behavior there should be a friendly error message and there should be a breaking change entry in migration docs for webpack 6

Other relevant information:
webpack version: 5.88.2
Node.js version: 18.16.0
Operating System: windows
Additional tools: yarn
@IdeaHunter
Copy link
Author

Bump

@mems
Copy link

mems commented Sep 28, 2023 •
edited

I've got the same issue with an HTML fragment (which contains styles and scripts of pure CSS entry) loaded (with jQuery) in the document. The script try to find the CSS module, but can't find any because the stylesheet it's not loaded yet (non blocking?).

I think it's related to how entry startup work that consider the stylesheet not a chunk, means all modules should be available synchronously when the entry start.
Maybe the CSS loading runtime should wait/watch each stylesheet loading to detect if the CSS module is loaded (via the custom CSS variable).
Or use additional attributes that describe the file content (and optionally need to detect if the file load or fail to load)

@webpack-bot
Copy link
Contributor

This issue had no activity for at least three months.

It's subject to automatic issue closing if there is no activity in the next 15 days.

@alexander-akait
Copy link
Member

Close #14893, I added it and we need improve it

@alexander-akait
Copy link
Member

Also you should use link not <script src="./main.css"></script>, but I think it is just a typo, feel free to feedback

@IdeaHunter
Copy link
Author

Ok, thanks, closing it

@alexander-akait im curretly using workaround that embeds part of css with variable --webpack-bla-bla via pluing into js.
It would be nice if expements.css could give it as an option right out of the box to flip some flag. this option is best for me since i dont use css export at all

@alexander-akait
Copy link
Member

We can do it, please write about it here #14893 with examples so we don't forget about it, there are a lot of good improvements too

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
inactive
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@mems @alexander-akait @IdeaHunter @webpack-bot