Parcel 2 does not generate nomodule script

[Andrew-Dyachenko]

🐛 bug report

Parcel 2 does not generate file and html code with <script nomodule src="index.[hash].nomodule.js"></script> as expected from differential-serving documentation

🎛 Configuration (.babelrc, package.json, cli command)

package.json

{
    "name": "parcel2",
    "version": "1.0.0",
    "license": "MIT",
    "devDependencies": {
        "@parcel/optimizer-cssnano": "2.0.0-nightly.612",
        "@parcel/optimizer-htmlnano": "2.0.0-nightly.612",
        "@parcel/packager-css": "2.0.0-nightly.612",
        "@parcel/packager-html": "2.0.0-nightly.612",
        "@parcel/transformer-css": "2.0.0-nightly.612",
        "@parcel/transformer-html": "2.0.0-nightly.612",
        "@parcel/transformer-postcss": "2.0.0-nightly.612",
        "@parcel/transformer-posthtml": "2.0.0-nightly.612",
        "@parcel/transformer-pug": "2.0.0-nightly.612",
        "@parcel/transformer-sass": "2.0.0-nightly.612",
        "parcel": "^2.0.0-nightly.610",
        "postcss": "^8.2.1"
    },
    "scripts": {
        "start": "parcel index.pug"
    },
    "browserslist": [
        "last 2 versions",
        "ie >= 10"
    ],
    "dependencies": {
        "bootstrap": "^4.6.0"
    }
}

Project serves with command

yarn start

🤔 Expected Behavior

Since IE10 support is indicated and in the package.json#browserslist, which does not support ES6 using in index.js, it is expected that the Parcel 2 will automatically generate HTML with <script nomodule src="index.fd532818.nomodule.js"></script> file

HTML DOM in browser inspector (Firefox)

Project tree

MacBook-Pro-andrey:parcel2 andrey$ tree -I node_modules
.
├── dist
│   ├── index.609f8ea4.css
│   ├── index.609f8ea4.css.map
│   ├── index.fd532818.js
│   ├── index.fd532818.js.map
│   ├── index.fd532818.nomodule.js
│   ├── index.fd532818.nomodule.js.map
│   └── index.html
├── index.js
├── index.pug
├── index.scss
├── package.json
└── yarn.lock

1 directory, 12 files
MacBook-Pro-andrey:parcel2 andrey$

😯 Current Behavior

HTML DOM in browser inspector (Firefox)

Project tree

MacBook-Pro-andrey:parcel2 andrey$ tree -I node_modules
.
├── dist
│   ├── index.609f8ea4.css
│   ├── index.609f8ea4.css.map
│   ├── index.fd532818.js
│   ├── index.fd532818.js.map
│   └── index.html
├── index.js
├── index.pug
├── index.scss
├── package.json
└── yarn.lock

1 directory, 10 files
MacBook-Pro-andrey:parcel2 andrey$ 

💁 Possible Solution

The solution indicated in differential-serving documentation is already looks suitable, but for some reason it does not work

🔦 Context

It is necessary to support old browsers such as IE10 in the project, on par with modern browsers, indicating them in one of the possible ways in a browserslist, so that Parcel 2 automatically determines whether it should to create a <script nomodule src="index.[hash].nomodule.js"></script> file and add it to html based on browserslist and the javascript code styles (ES[3/5/6/7/...])

💻 Code Sample

index.pug

doctype html
html(lang='en')
    head
        meta(charset='UTF-8')
        meta(http-equiv='X-UA-Compatible' content='IE=edge')
        meta(name='viewport' content='width=device-width, initial-scale=1.0')
        title Document
        link(rel='stylesheet' href='index.scss')
        script(type='module' src='index.js')
    body
        block frontdrop
            #frontdrop.frontdrop(aria-hidden='false' role='alertdialog' aria-busy='true')
                a(href='https://v2.parceljs.org/getting-started/webapp/#differential-serving' target='_blank' rel='noopener noreferrer')
                    img(src='https://v2.parceljs.org/assets/parcel@2x.png' alt='Parcel 2 logo' height='60')

index.scss

@import "./node_modules/bootstrap/scss/bootstrap-reboot";

.frontdrop {
    align-items: center;
    background-color: #fff;
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    opacity: 1;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 9;
    padding: 16px;

    &--out,
    &--in {
        transition: opacity 5s ease-out;
    }

    &--out {
        opacity: 0;
    }

    &--in {
        opacity: 1;
    }

    &--hidden {
        display: none;
    }
}

index.js

document.addEventListener('DOMContentLoaded', () => {
    const frontdrop = document.getElementById('frontdrop')

    if (frontdrop) {
        frontdrop.classList.add('frontdrop--out')

        setTimeout(() => {
            frontdrop.classList.add('frontdrop--hidden')
            frontdrop.classList.remove('frontdrop--out')
            frontdrop.setAttribute('aria-hidden', 'true')
            frontdrop.setAttribute('aria-busy', 'false')
        }, 5000)
    }
})

🌍 Your Environment

Software	Version(s)
Parcel	2.0.0-nightly.610
Node	v14.15.5
npm/Yarn	6.14.11/1.19.1
Operating System	macOS Mojave 10.14.6 (18G8022)

[mischnic]

This will unfortunately only be the case after #5398 is merged. Merging parcel-bundler/website#780 before that wasn't ideal

cc @devongovett

[Andrew-Dyachenko]

Will there be a fix? Or is there some workaround temporary option?

[mischnic]

Add both

<script nomodule src="./index.tsx"></script>
<script type="module" src="./index.tsx"></script>

[Andrew-Dyachenko]

Unfortunately, the proposed walkaround does not work. The Parcel 2 still does not create the required file. All it does is generate a layout with a link to the same javascript file.

Poject tree

MacBook-Pro-Andrey:parcel2 andrew$ tree -I node_modules
.
├── dist
│   ├── index.609f8ea4.css
│   ├── index.609f8ea4.css.map
│   ├── index.fd532818.js
│   ├── index.fd532818.js.map
│   └── index.html
├── index.js
├── index.pug
├── index.scss
├── package.json
└── yarn.lock

1 directory, 10 files

index.pug

doctype html
html(lang='en')
    head
        meta(charset='UTF-8')
        meta(http-equiv='X-UA-Compatible' content='IE=edge')
        meta(name='viewport' content='width=device-width, initial-scale=1.0')
        title Document
        link(rel='stylesheet' href='index.scss')
        script(nomodule src='index.js')
        script(type='module' src='index.js')
    body
        block frontdrop
            #frontdrop.frontdrop(aria-hidden='false' role='alertdialog' aria-busy='true')
                a(href='https://v2.parceljs.org/getting-started/webapp/#differential-serving' target='_blank' rel='noopener noreferrer')
                    img(src='https://v2.parceljs.org/assets/parcel@2x.png' alt='Parcel 2 logo' height='60')

In the screenshot below, the nomodule and the module scripts refer to the same file src="/index.fd532818.js", which makes the proposed walkaround meaningless.

HTML DOM screenshot

[Andrew-Dyachenko]

Is there any over walkaround?

[cheeaun]

I'm currently having this issue too. Using Parcel 2.0.0-beta.2.

My app has this, but nomodule script were not generated when running parcel build:

<script type="module" src="./app.js"></script>

I tried this:

<script type="module" src="./app.js"></script>
<script nomodule src="./app.js"></script>

Works fine if run with parcel serve, with both files having the same name.

But when running parcel build, it shows this error:

🚨 Build failed.
Error: Bundles must have unique filePaths
AssertionError [ERR_ASSERTION]: Bundles must have unique filePaths

[devongovett]

This is fixed in the latest nightly.