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

External styles added to project.json with inject=false is being injected into html #20049

Closed
1 of 4 tasks
kryaksy opened this issue Nov 4, 2023 · 2 comments · Fixed by #23444
Closed
1 of 4 tasks

External styles added to project.json with inject=false is being injected into html #20049

kryaksy opened this issue Nov 4, 2023 · 2 comments · Fixed by #23444
Assignees
@Coly010
Labels
outdated scope: bundlers Issues related to webpack, rollup type: bug

Comments

@kryaksy
Copy link

kryaksy commented Nov 4, 2023

Current Behavior

When I set the 'inject' property to 'false' for an external style added in project.json, it is still being injected into the HTML.

apps/test-app/project.json

        "styles": [
          "apps/test-app/src/styles.less",
          {
            "input": "shared/src/styles/themes/dark.less",
            "inject": false,
            "bundleName": "assets/styles/themes/dark"
          }
        ],

dist/apps/test-app/index.html

(after running nx run-many --target=build --all --configuration=development --verbose)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>TestApp</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
  <link rel="stylesheet" href="styles.css"><link rel="stylesheet" href="assets/styles/themes/dark.css"></head>
  <body>
    <div id="root"></div>
  <script src="runtime.js" type="module"></script><script src="styles.js" type="module"></script><script src="assets/styles/themes/dark.js" type="module"></script><script src="vendor.js" type="module"></script><script src="main.js" type="module"></script></body>
</html>

Expected Behavior

I expected that when I set the 'inject' property to 'false' for an external style added in project.json, it should not be injected into the HTML. The 'inject' property set to 'false' should prevent the style from being included in the final HTML output.

GitHub Repo

https://github.com/kryaksy/nx-external-styles-issue-poc.git

Steps to Reproduce

  1. I already pushed the dist folder in example repo. But if you wanna try, you can just run nx run-many --target=build --all --configuration=development and check the index.html inside the dist/apps/test-app/index.html file if the external style element is injected.

Before steps:

  1. Run npx create-nx-workspace@latest
  2. Run npx nx generate @nx/js:library --name=shared --unitTestRunner=none --minimal=true --projectNameAndRootFormat=as-provided --strict=false --no-interactive
  3. Add dark.less dummy style file into shared/src/styles/themes/
  4. Add external style configuration in project.json of the test-app
          {
            "input": "shared/src/styles/themes/dark.less",
            "inject": false,
            "bundleName": "assets/styles/themes/dark"
          }
  1. Run nx run-many --target=build --all --configuration=development

Nx Report

Node   : 18.12.1
   OS     : darwin-arm64
   npm    : 8.19.2
   
   nx                 : 17.0.3
   @nx/js             : 17.0.3
   @nx/jest           : 17.0.3
   @nx/linter         : 17.0.3
   @nx/eslint         : 17.0.3
   @nx/workspace      : 17.0.3
   @nx/cypress        : 17.0.3
   @nx/devkit         : 17.0.3
   @nx/eslint-plugin  : 17.0.3
   @nx/playwright     : 17.0.3
   @nx/react          : 17.0.3
   @nrwl/tao          : 17.0.3
   @nx/web            : 17.0.3
   @nx/webpack        : 17.0.3
   typescript         : 5.1.6

Failure Logs

No response

Package Manager Version

No response

Operating System

  • macOS
  • Linux
  • Windows
  • Other (Please specify)

Additional Information

Note: I'm not entirely sure if I've made a mistake in my configuration or if the issue might not be related to Nx
@FrozenPandaz FrozenPandaz added the scope: bundlers Issues related to webpack, rollup label Nov 10, 2023
@mauschepano
Copy link

mauschepano commented Mar 19, 2024 •
edited
Loading

Hi there!
I just ran into the same error, are there any updates here?

Coly010 added a commit that referenced this issue May 16, 2024
@Coly010
fix(webpack): only add entrypoints if they are intentionally injected #…
01a5486 
…20049
@Coly010 Coly010 mentioned this issue May 16, 2024
Merged
Coly010 added a commit that referenced this issue May 16, 2024
@Coly010
fix(webpack): only add entrypoints if they are intentionally injected #…
504d048 
…20049 (#23444)

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

## Current Behavior
<!-- This is the behavior we have today -->
We are still injecting `styles` and `scripts` even if `inject=false` in
`project.json`.


## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->
Do not inject styles and scripts if `inject=false`

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #20049
FrozenPandaz pushed a commit that referenced this issue May 21, 2024
@Coly010 @FrozenPandaz
fix(webpack): only add entrypoints if they are intentionally injected #…
1d147f1 
…20049 (#23444)

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

## Current Behavior
<!-- This is the behavior we have today -->
We are still injecting `styles` and `scripts` even if `inject=false` in
`project.json`.

## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->
Do not inject styles and scripts if `inject=false`

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #20049

(cherry picked from commit 504d048)
@github-actions GitHub Actions
Copy link

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jun 17, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@Coly010 Coly010

Labels
outdated scope: bundlers Issues related to webpack, rollup type: bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(webpack): only add entrypoints if they are intentionally injected #20049 nrwl/nx
4 participants
@FrozenPandaz @Coly010 @kryaksy @mauschepano