🐛 watch generates invalid bundles

[jdoubleu]

🐛 bug report

When I run the watch command (npm run dev in my case), parcel sometimes generates invalid bundles.

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

package.json:

{
  "name": "my-project",
  "main": "index.js",
  "scripts": {
    "dev": "parcel watch path/to/assets/*.{js,scss} --out-dir path/to/dist --public-url ./",
    "production": "parcel build path/to/assets/*.{js,scss} --out-dir path/to/dist --public-url ./"
  },
  "devDependencies": {
    "parcel-bundler": "^1.12.3",
    "sass": "^1.22.9"
  },
  "dependencies": {
    "bootstrap": "^4.3.1",
    "jquery": "^3.4.1",
    "popper.js": "^1.15.0"
  }
}

.babelrc: none

🤔 Expected Behavior

The bundle created by the watch command generates JavaScript code without any errors.

😯 Current Behavior

The JavaScript console prints an error message (e.g. TypeError), because the bundle contains invalid code. It looks like a new file is added inside the bundle (compare code below).

💁 Possible Solution

When I change the file while watching, the error disappears and is not reproducible in the future. However if I restart the watch command, the issue appears again, even with the latest modifications which have previously worked while watching the files.

🔦 Context

💻 Code Sample

Repository: https://github.com/jdoubleu/parcel-bug-3472

assets/app.js:

/**  Main js
 *
 * @package my-package
 */

import 'bootstrap';

( function ($) {

}( jQuery ));

dist/app.js:

...
},{}]},{},["../../../../node_modules/parcel-bundler/src/builtins/hmr-runtime.js"], null)
//# sourceMappingURL=app.js.mapupport: Firefox 64+, Edge 18+
				// Some browsers don't support the "nonce" property on scripts.
				// On the other hand, just using `getAttribute` is not enough as
				// the `nonce` attribute is reset to an empty string whenever it
				// becomes browsing-context connected.
				// See https://github.com/whatwg/html/issues/2369
				// See https://html.spec.whatwg.org/#nonce-attributes
				// The `node.getAttribute` check was added for the sake of
				// `jQuery.globalEval` so that it can fake a nonce-containing node
				// via an object.
				val = node[ i ] || node.getAttribute && node.getAttribute( i );
				if ( val ) {
					script.setAttribute( i, val );
				}
			}
		}
		doc.head.appendChild( script ).parentNode.removeChild( script );
	}

Notice the code after the source map here. This does not look right and seems to be the content of another file not from the start.

After changing the source file while watching, as described above, the dist/app.js looks totally different at the same position in file:

...
var indexOf = arr.indexOf;

var class2type = {};

var toString = class2type.toString;

var hasOwn = class2type.hasOwnProperty;
...

🌍 Your Environment

Software	Version(s)
Parcel	1.12.3
Node	v12.5.0
npm/Yarn	6.9.0
Operating System	macOS 10.14.6

[jdoubleu]

Multiple entry points should be supported by #1119

[rik]

I've seen the same issue and worked around the issue by disabling HMR. It seems the HMR code is producing invalid JS for the first compile.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.

[mephinet]

@jdoubleu if you're still hit by this issue: can you please comment whether any two files in path/to/assets/*.{js,scss} have the same basename - e.g. there is an app.js and an app.scss? If so, you might see the same issue as I did, and reported as #5890.

[jdoubleu]

Thanks for the notice! After a quick look at your issue, I believe they are connected.

I can confirm, as you can see in the reproduction repository, that the basenames of the entry files are the same.

I'm not using parcel with this configuration anymore. I figured that it's not how parcel is intended to be used. One should rather provide it a single (.html) entry file, and parcel would figure out the rest.

[mephinet]

Thanks for the confirmation, @jdoubleu!