Imported css is duplicated during ember serve development build with fastboot

[truumahn]

Hi!

Using embroider with fastboot in a fresh project results in the <link rel="stylesheet"> tags that are injected in the built dist/index.html file to be duplicated when importing css with import statements.

Reproduction steps:

1. ember new css-repro --embroider ~ embroider@2.1.1
2. cd css-repro
3. ember install ember-cli-fastboot
4. Create random.css in ./app
5. Add import './random.css' in ./app/app.js
6. Run ember serve
7. Open ./app/random.css and save it a couple of times
8. Check ./dist/index.html, there will be multiple duplicate <link>s for stylesheets

Repro repo: https://github.com/truumahn/embroider-css-inject-repro/tree/main ~ embroider@unstable

The issue occurs both with embroider@2.1.1 and embroider@3.0.x

This only happens during ember serve.

I suppose the issue is somewhere around the MiniCssExtract webpack plugin, css-loader or maybe the ember-auto-import configuraton.

Also, manually removing the duplicate links and then triggering a rebuild results in all the previously duplicated links to be added again, so the links to inject is stored somewhere during the build and instead of replacing them they are readded each time.

[mansona]

Hey 👋 thanks for the issue report! We just tried to confirm this using your reproduction repo and we got a different error about ember-cli-head 🤔

runtime.js:4985 

Error occurred:

- While rendering:
  -top-level
    application

index.js:153 Uncaught Error: Assertion Failed: [ember-page-title]: Multiple title elements found. Check for other addons like ember-cli-head updating <title> as well.
    at assert (index.js:153:1)
    at PageTitleListService._validateExistingTitleElement (page-title-list.js:230:125)
    at new PageTitleListService (page-title-list.js:58:10)
    at PageTitleListService.create (core.js:382:1)
    at InternalFactoryManager.create (index.js:384:1)
    at Proxy.create (index.js:208:1)
    at instantiateFactory (index.js:287:1)
    at lookup (index.js:230:1)
    at Container.lookup (index.js:125:1)
    at ApplicationInstance.lookup (container_proxy.js:19:1)

Can you take a look at your reproduction repo and make sure that it's working? thanks 👍

[truumahn]

I'm not sure how how you got to that error message, I just cloned the repo, ran npm install then ember serve.

I did get an entirely different error though which wasn't there at the time I posted this issue:

Error: Unable to require module 'crypto' in Fastboot because its package 'crypto' was not explicitly allowed in 'fastbootDependencies' in your package.json.
    at Object.require (/home/tibor/Work/jeti/embroider-css-inject-repro/node_modules/fastboot/src/fastboot-schema.js:199:11)
    at eval (webpack://css-repro/./node_modules/@ember-data/store/-private.js?:200:39)
    at Object../node_modules/@ember-data/store/-private.js (/tmp/broccoli-368306CQD03Mfx4AkB/out-763-packager_runner_embroider_webpack/assets/chunk.be651e2d30becea7598f.js:348:1)
    at __webpack_require__ (/tmp/broccoli-368306CQD03Mfx4AkB/out-763-packager_runner_embroider_webpack/assets/chunk.fe0c8ba2ffe5c37e3955.js:31:41)
    at eval (webpack://css-repro/./node_modules/@ember-data/store/index.js?:12:66)
    at Object../node_modules/@ember-data/store/index.js (/tmp/broccoli-368306CQD03Mfx4AkB/out-763-packager_runner_embroider_webpack/assets/chunk.be651e2d30becea7598f.js:359:1)
    at __webpack_require__ (/tmp/broccoli-368306CQD03Mfx4AkB/out-763-packager_runner_embroider_webpack/assets/chunk.fe0c8ba2ffe5c37e3955.js:31:41)
    at eval (webpack://css-repro/./node_modules/@ember-data/debug/setup.js?:6:75)
    at Object../node_modules/@ember-data/debug/setup.js (/tmp/broccoli-368306CQD03Mfx4AkB/out-763-packager_runner_embroider_webpack/assets/chunk.be651e2d30becea7598f.js:183:1)
    at __webpack_require__ (/tmp/broccoli-368306CQD03Mfx4AkB/out-763-packager_runner_embroider_webpack/assets/chunk.fe0c8ba2ffe5c37e3955.js:31:41)

However this could be fixed by using the solution provided here: emberjs/data#6690 (comment), practically just adding crypto to fastbootDependencies in package.json, I updated the repo with this and the original issue still persists.

The node version I'm using is 16.

[truumahn]

@mansona have you had a chance to look at this since then?

[jknight12882]

Somewhat related, but we are getting duplicated css and js lines in our index.html when using ember build --environment=development --output-path ./some/path --watch. Only happens on changes, works fine on the initial build

[void-mAlex]

Somewhat related, but we are getting duplicated css and js lines in our index.html when using ember build --environment=development --output-path ./some/path --watch. Only happens on changes, works fine on the initial build

my bet is that you're on 3.4.0 version of embroider core and ran into #1660

if that is the case your report is unrelated to the initial reported issue here
please confirm if that is the case; 3.4.1 will be going our shortly to address this.
in the meantime you can downgrade @embrodier/core to 3.3.0

[jknight12882]

Yup, confirmed, using 3.4.0 of embroider core. I'll wait for the dot release

[mansona]

@jknight12882 patch release is out 👍