Skip to content

react-dev-utils: InlineChunkHtmlPlugin doesn't include other script attributes #10977

@muskuloes

Description

@muskuloes

Describe the bug

InlineChunkHtmlPlugin removes all attributes from script tags created by the HtmlWebpackPlugin, including type="module" and defer="defer" which are sometimes necessary. This can be seen here: https://github.com/facebook/create-react-app/blob/7bdeced8495370b683c08b86bc84b66af83f2f0a/packages/react-dev-utils/InlineChunkHtmlPlugin.js#L30

I am using this plugin with a vuejs app. I haven't tried with a react app. The issue can be fixed by updating the plugin. See pull request.

Did you try recovering your dependencies?

yarn --version
1.22.5

Which terms did you search for in User Guide?

https://www.npmjs.com/package/react-dev-utils, InlineChunkHtmlPlugin

Environment

Environment Info:

  current version of create-react-app: 4.0.1
  running from /home/xxx/.config/yarn/global/node_modules/create-react-app

  System:
    OS: Linux 5.4 Linux Mint 20.1 (Ulyssa)
    CPU: (4) x64 Intel(R) Core(TM) i7-6600U CPU @ 2.60GHz
  Binaries:
    Node: 12.22.1 - /usr/bin/node
    Yarn: 1.22.5 - /usr/bin/yarn
    npm: 6.14.12 - /usr/bin/npm
  Browsers:
    Chrome: 90.0.4430.93
    Firefox: 88.0
  npmPackages:
    react:  17.0.2 (16.14.0)
    react-dom:  17.0.2 (16.14.0)
    react-scripts:  4.0.3
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

From the repoducible example:

  1. yarn install
  2. yarn build
  3. open the html file in the browser, (you'd see a blank page => that's the issue)
  4. open the html file in a text editor and manually add the type="module" attribute to the inlined script)
  5. open the html file in the browser once more (this time you'd see the page's content).

I'll add a pull request that fixes the issue for review.

Expected behavior

<script type="module">...</script>

Actual behavior

<script>...</script>

Reproducible demo

https://github.com/muskuloes/inlinechunk-issue-reproducible

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions