Parcel: Getting `Cannot read property 'js' of null`
Choose one: is this a 馃悰 bug report or 馃檵 feature request?
馃悰
Getting Cannot read property 'js' of null on initial run with npm start but the error goes aways if I make change to any file. But when trying to create a production build with npm run build the same error shows up and fails the build.
馃帥 Configuration (.babelrc, package.json, cli command)
"scripts": {
"start": "parcel ./src/index.html",
"build": "parcel build ./src/index.html",
"test": "echo \"Error: no test specified\" && exit 1"
},
"devDependencies": {
"node-sass": "^4.8.3",
"parcel-bundler": "^1.7.0"
}
馃 Expected Behavior
The build process should complete without any error.
馃槸 Current Behavior
Build fails with the following error:
馃毃 Cannot read property 'js' of null
at JSPackager.addAsset (/Users/sabbirrahman/project/node_modules/parcel-bundler/src/packagers/JSPackager.js:38:41)
at JSPackager.addAssetToBundle (/Users/sabbirrahman/project/node_modules/parcel-bundler/src/packagers/JSPackager.js:125:16)
at JSPackager.writeBundleLoaders (/Users/sabbirrahman/project/node_modules/parcel-bundler/src/packagers/JSPackager.js:141:18)
at JSPackager.end (/Users/sabbirrahman/project/node_modules/parcel-bundler/src/packagers/JSPackager.js:197:20)
at <anonymous>
馃拋 Possible Solution
馃敠 Context
The error happened after I added a new html file and linked it in my index.html file. See the code sample bellow. If I remove index.js from other.html the error goes away but I can't do that since index.js contains the scss file import which is required for the styling of the other.html page.
馃捇 Code Sample
index.html
<html>
<body>
<a href="./other.html">Link to another page</a>
<script src="./index.js"></script>
</body>
</html>
other.html
<html>
<body>
<a href="./index.html">Link to home page</a>
<script src="./index.js"></script>
</body>
</html>
index.js
import './index.scss';
馃實 Your Environment
| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.7.0
| Node | v9.2.0
| npm/Yarn | 5.2.0
| Operating System | MacOS High Sierra 10.13.3
sabbirrahman
All 29 comments
I have the same error.
morehardy
on 9 Apr 2018
The almost same bug here after renaming a GitHub project.
Rajan
on 10 Apr 2018
Perhaps try removing the cache and rebuild?
DeMoorJasper
on 10 Apr 2018
I tried that already. The problem is gone if I remove two entry points from two different files and put it back in once the HMR is running. I've login.html and register.html and I've to remove
<script src="./js/index.js"></script>
from one of them and it works but I've to put it back to see CSS taking effect (once running).
Rajan
on 10 Apr 2018
Yes it's a bug I've encountered too.
In my case it happens when I use background-image: url('...') in a .scss file and then run parcel serve with HMR activated. I've narrowed it down to the javascript code generated to reload the css (css-loader among others), that seems to generate buggy code whenever url('...') is in the scss file.
I have several guesses as to what might be causing it, the main one being that the bug might be caused by the quotes inside the url declaration, which might not be properly escaped during code generation. Removing those quotes, while breaking the css behaviour, solve the bug, which is why I'm fairly sure it is caused by something among those lines.
Also if you make a change in the code and trigger the HMR then it removes the error, and the error will come back when you make a change to the scss file containing the background or in any file that imports it, basically whenever it's parsed again and generates new faulty js code.
dolma
on 11 Apr 2018
Not sure why, but in my case I added the -t node option to parcel and it got passed the issue.
jgentes
on 18 Apr 2018
Same problem here. Can a maintainer have a look ?
pgn-vole
on 27 Apr 2018
Does this still occur on v1.8.1?
DeMoorJasper
on 8 May 2018
Yep.
kisjula
on 9 May 2018
I started getting this issue after combining my four separate bundles into one bundle with multiple entry points. I tried splitting it up into 1 bundle for my main app, and a separate bundle for the other 3 smaller apps and afterwards the error stopped occurring. I'm not sure what the significance of this change would be though.
jwarning
on 10 May 2018
Is anyone still having this issue?
devongovett
on 6 Jan 2019
It's stopped happening in my case. Not sure about the other ones though.
jwarning
on 6 Jan 2019
@devongovett I had a similiar issue, but instead of 'js' of null it was 'html' of null... The issue was the use of %PUBLIC_URL% (<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">) in an app generated by create-react-app. Removing that resolved the issue.
Not sure if it's related, but it might help someone down the road.
mdchristians
on 18 Feb 2019
I'm having this issue currently. It started after adding a Rust/WASM module to one of my subtrees. My setup involves a "root" index.html with links to other html files (each with links to their own js/css). One of those other html files' js bundle imports a Cargo.toml 鈥β燼nyway, here's the error output:
$ parcel build src/lab/{index.html,README.md} --public-url /
馃毃 Cannot read property 'js' of null
at JSPackager.dedupeKey (/Users/matt/Sites/fartts/fartts/node_modules/parcel-bundler/src/packagers/JSPackager.js:110:40)
at JSPackager.addAsset (/Users/matt/Sites/fartts/fartts/node_modules/parcel-bundler/src/packagers/JSPackager.js:42:22)
at JSPackager.addAssetToBundle (/Users/matt/Sites/fartts/fartts/node_modules/parcel-bundler/src/packagers/JSPackager.js:145:16)
at JSPackager.writeBundleLoaders (/Users/matt/Sites/fartts/fartts/node_modules/parcel-bundler/src/packagers/JSPackager.js:161:18)
at JSPackager.end (/Users/matt/Sites/fartts/fartts/node_modules/parcel-bundler/src/packagers/JSPackager.js:221:20)
at Bundle._package (/Users/matt/Sites/fartts/fartts/node_modules/parcel-bundler/src/Bundle.js:199:20)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
I'm still digging around. Will report back if I find anything.
mysterycommand
on 7 Mar 2019
Weird, but if I run parcel build src/lab/{index.html,README.md} --public-url / again immediately after the above it appears to work 鈥β爏ome sort of race condition, or like a cache order thing?
mysterycommand
on 7 Mar 2019
Just my 2 cents worth... I have this issue when parcel is run from a directory other than the project directory (such as global). If it is installed in the project, and I run that version, then I have no issues.
tarwich
on 11 Mar 2019
https://github.com/quasicomputational/parcel-1158 is a reproducer that's as small as I could get it. Removing any of the imports makes the symptom vanish, likewise removing any more of generator.mjs or chunk.js.
quasicomputational
on 20 Mar 2019
@quasicomputational
What was your intention/original code with importing html in JS (causing a circular dependency)?
import "./lister.html";
mischnic
on 20 Mar 2019
In the actual code, it's actually importing the HTML asset as a URL reference so that it can be navigated to using my (admittedly hackish) plugin. But, as demonstrated by the reduced example, the plugin's not relevant to the bug at hand.
Where is the circular dependency? The assets form a DAG, and Parcel happily worked on the actual code. (Well, until this bug bit me, but that happened after some apparently unrelated changes...)
quasicomputational
on 20 Mar 2019
I've done a little bit of investigation into this and I've come out still confused, but I did manage to get a working build.
There are at least two bugs going on here.
First, the bundle-loader.js asset doesn't seem to have its process called by the time that writeBundleLoaders is called. I put in await bundleLoader.process() before this line:
But I don't know if this is the right thing or not; I have no idea when process should be called for this magic internal asset. Maybe this is just papering over a deeper bug? I'm very puzzled by how it doesn't happen reliably.
Second, observe the return value of the generate method of JSAsset (which was changed to this current form in #2489; ping @mischnic):
But look at how .generated is accessed in JSPackager:
And elsewhere it's also treated as an object (picking two arbitrary use sites):
This definitely doesn't seem right.
As an experiment, I changed the return value JSAsset.process back to how it was before the PR (and also backed out a related change to the terser transform that it broke). And, suddenly, my build worked!
This is the diff I wound up applying to Parcel to get it working.
So, yeah. I don't understand Parcel's internals well enough to say whether these are proper fixes or not (very likely not). Hopefully, this is enough to go on for someone who does know them well enough to make a real fix.
quasicomputational
on 21 Apr 2019
Sweet! I'll try that out as soon as I can and see if it fixes my issues.
tarwich
on 21 Apr 2019
Don't get too excited. The build succeeds, but the bundles are coming out broken. I guess some internal invariant is getting broken somewhere and this issue's just one symptom of it...
quasicomputational
on 21 Apr 2019
I have a similar issue that appeared out of the blue:
I had a knee-jerk reaction that upgrading npm was the culprit, but after full uninstall and clean install with prior versions (node v11.14.0 & npm 6.9.0) the problem persists. I tried removing node_modules, clearing cache, and building previously working branches--no luck.
Looking at JSPackager, it seems the problem is the first asset (id ../main.js) has an empty generated property, so two of the arguments in writeModule are coming in undefined. asset.generated.js gets passed into lineCounter, where undefined.length is called and error is thrown:
https://github.com/parcel-bundler/parcel/blob/c2760fd300919552d97722e913ff36e19dbe3771/packages/core/parcel-bundler/src/packagers/JSPackager.js#L88-L94
I tried adding a return statement if asset.generated is empty object (as suggest in #1227), which made the error go away, but the client complained Error: Cannot find module '../main.js'
Anyone have a fix or workaround for this?
ark234
on 23 Apr 2019
I've found a workaround! At least for my case - I don't know about anyone else.
The bug is something to do with how Parcel's traversing the dependency graph when one of the non-entry nodes is a HTML file that has scripts. There's almost certainly more to it than that, but explicitly lifting the HTML asset to be an entry makes the problem go away.
Concretely, on the reproduction repo, If I invoke it as parcel build src/background.mjs, it breaks. Likewise for parcel build src/background.mjs src/lister.html. But if, instead, I invoke it as parcel build src/lister.html src/background.mjs, it works!
Hopefully this gives someone a clue about where the bug might be.
quasicomputational
on 25 Apr 2019
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.
![github-actions[bot] picture](https://avatars2.githubusercontent.com/in/15368?v=4&s=40)
github-actions[bot]
on 18 Jan 2020
Auto-closing is not good, a problem not resolved should not simply disappear. It still occurs to me, and removing the .cache folder is not working.
In my case, I'm using natural and it writes:
var _ = require('underscore')._;
This is just as specified in the underscore.js documentation (of v1.10.2), however in the parcel build, the result of require('underscore') is the underscore object, and its _ attribute is undefined.
Hope this can be of help.
std4453
on 26 Apr 2020
Removing the .cache folder fixed it for me, but still that's pretty annoying bug.
Hopefully parcel 2 will be functional soon. Had v2 fail profoundly in two different projects recently, so it doesn't seem to be ready for prime time yet. :(
TimMensch
on 12 May 2020
Still experiencing this issue
srolfe26
on 4 Jun 2020
I get the error ("parcel-bundler": "^1.12.4"), if a have a inline style in html :(
error: <span class="badge badge-secondary font-weight-normal" style="font-size: 20px;">14</span>
Uncaught (in promise) Error: Cannot find module '../../../node_modules/parcel-bundler/src/builtins/css-loader.js'
solution: <span class="badge badge-secondary font-weight-normal">14</span>
JonathanSchndr
on 28 Aug 2020
Related issues
humphd
路
3Comments
algebraic-brain
路
3Comments
adamreisnz
路
3Comments
philipodev
路
3Comments
jsftw86
路
3Comments
Most helpful comment
I have the same error.
