Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Duplicate <link rel='preload'> and <script>

See original GitHub issue

Bug report

Describe the bug

When using Webpack’s magic comment (/* webpackChunkName: "balabala" */) to specify several modules bundling into one chunck, the output html contains duplicated <link rel='preload'> and <script> for the same chunck

To Reproduce

a simple respository to reproduce the bug:

https://github.com/xboy2012/nextjs-duplicate-dynamic-reproduce

In the respository I defined two modules, Module1 and Module2, using /* webpackChunkName: "allModules" */ to make them bundling into chunck allModules.

Just execute npm run dev, open http://localhost:3000/ in your browser.

Inspect the result HTML, then you’ll see duplicated <link rel='preload'> and <script> such as follows:

<!DOCTYPE html>
<html>
    <head>
        <meta charSet="utf-8" class="next-head"/>
        <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" class="next-head"/>
        <link rel="preload" href="/_next/static/development/pages/index.js?ts=1558408463129" as="script"/>
        <link rel="preload" href="/_next/static/development/pages/_app.js?ts=1558408463129" as="script"/>
        <link rel="preload" href="/_next/static/chunks/allModules.js?ts=1558408463129" as="script"/>
        <link rel="preload" href="/_next/static/chunks/allModules.js?ts=1558408463129" as="script"/>
        <link rel="preload" href="/_next/static/runtime/webpack.js?ts=1558408463129" as="script"/>
        <link rel="preload" href="/_next/static/runtime/main.js?ts=1558408463129" as="script"/>
    </head>
    <body>
        <div id="__next">
            <div>
                <div>This is module1</div>
                <div>This is module2</div>
            </div>
        </div>
        <script src="/_next/static/development/dll/dll_2011977376de5c4d4cfb.js?ts=1558408463129"></script>
        <script id="__NEXT_DATA__" type="application/json">
            {"dataManager":"[]","props":{"pageProps":{}},"page":"/","query":{},"buildId":"development","dynamicBuildId":false,"dynamicIds":["./components/Module1.js","./components/Module1.js"]}
        </script>
        <script async="" id="__NEXT_PAGE__/" src="/_next/static/development/pages/index.js?ts=1558408463129"></script>
        <script async="" id="__NEXT_PAGE__/_app" src="/_next/static/development/pages/_app.js?ts=1558408463129"></script>
        <script async="" src="/_next/static/chunks/allModules.js?ts=1558408463129"></script>
        <script async="" src="/_next/static/chunks/allModules.js?ts=1558408463129"></script>
        <script src="/_next/static/runtime/webpack.js?ts=1558408463129" async=""></script>
        <script src="/_next/static/runtime/main.js?ts=1558408463129" async=""></script>
    </body>
</html>

Obviously, allModules.js is preloaded and loaded twice.

Expected behavior

There should be no duplicated <link rel='preload'> and <script> for the same file.

Screenshots

See the above description

System information

OS: macOS
Browser Chrome
Version of Next.js:

I wrote the repository to reproduce the bug using Next 8.x

In my company project I face the same bug using Next 7.x

So it’s likely all version have the bug

Additional context

Not yet.

Issue Analytics

State:
Created 4 years ago
Reactions:3
Comments:23 (8 by maintainers)

Top GitHub Comments

8reactions

wushaobocommented, Jan 7, 2021

@Timer , I am afraid the reproduction has been there on the index page of next.js official website.

4reactions

wushaobocommented, Dec 30, 2020

Please, is this a feature or a bug to be fixed? I bet it is a bug, or would you please point out a way to disable this feature?

Top Results From Across the Web

Duplicate <link rel='preload'> and <script>, Browser ...

This behaviour is a bug in NUXT Bridge and will be fixed by NUXT when they upgrade to the new version of vue-bundle-renderer...

3578.30 Safari/537.36 Steps to reproduce: 1. Go to `about:config`, enable `network.preload` flag. 2. Open devtools, go to Network panel, toggle "disable cache" ...

Duplicate file load due to preload

Hi,. I noticed an issue with the preload feature. GTMetrix reports the error: Serve resources from a consistent URL The following resources have...

Code Splitting

When a page which uses the ChartComponent is requested, the charting-library-chunk is also requested via <link rel="preload"> . Assuming the page-chunk is ...

Preload

or, preload stylesheet resource via JavaScript --> <script> var res = document.createElement("link"); res.rel = "preload"; res.as = "style"; ...