Getting `Cannot read property 'js' of null` #1158

sabbirrahman · 2018-04-09T03:17:56Z

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

The text was updated successfully, but these errors were encountered:

morehardy · 2018-04-09T06:02:43Z

I have the same error.

Rajan · 2018-04-10T07:39:19Z

The almost same bug here after renaming a GitHub project.

DeMoorJasper · 2018-04-10T08:39:00Z

Perhaps try removing the cache and rebuild?

Rajan · 2018-04-10T08:41:26Z

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).

dolma · 2018-04-11T06:06:01Z

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.

jgentes · 2018-04-18T20:18:01Z

Not sure why, but in my case I added the -t node option to parcel and it got passed the issue.

pgn-vole · 2018-04-27T12:08:23Z

Same problem here. Can a maintainer have a look ?

DeMoorJasper · 2018-05-08T08:39:36Z

Does this still occur on v1.8.1?

kisjula · 2018-05-09T06:53:01Z

Yep.

jwarning · 2018-05-10T00:10:32Z

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.

devongovett · 2019-01-06T02:31:45Z

Is anyone still having this issue?

jwarning · 2019-01-06T20:20:31Z

It's stopped happening in my case. Not sure about the other ones though.

mdchristians · 2019-02-18T01:56:53Z

@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.

mysterycommand · 2019-03-07T19:37:37Z

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 … anyway, 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 · 2019-03-07T19:39:31Z

Weird, but if I run parcel build src/lab/{index.html,README.md} --public-url / again immediately after the above it appears to work … some sort of race condition, or like a cache order thing?

tarwich · 2019-03-11T01:13:52Z

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.

quasicomputational · 2019-03-20T16:50:06Z

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.

mischnic · 2019-03-20T18:21:47Z

@quasicomputational

What was your intention/original code with importing html in JS (causing a circular dependency)?

import "./lister.html";

quasicomputational · 2019-03-20T18:55:52Z

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 · 2019-04-21T10:24:02Z

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:

parcel/packages/core/parcel-bundler/src/packagers/JSPackager.js

Line 161 in 636bb50

await this.addAssetToBundle(bundleLoader);

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):

parcel/packages/core/parcel-bundler/src/assets/JSAsset.js

Lines 191 to 197 in 636bb50

    
           return [ 
        
             { 
        
               type: 'js', 
        
               value: code, 
        
               map: this.sourceMap 
        
             } 
        
           ];

But look at how .generated is accessed in JSPackager:

parcel/packages/core/parcel-bundler/src/packagers/JSPackager.js

Line 110 in 636bb50

return objectHash([asset.generated.js, deps]);

And elsewhere it's also treated as an object (picking two arbitrary use sites):

parcel/packages/core/parcel-bundler/src/Asset.js

Lines 254 to 269 in 636bb50

    
           for (let key in this.generated) { 
        
             let value = this.generated[key]; 
        
             if (typeof value === 'string') { 
        
               // Replace temporary bundle names in the output with the final content-hashed names. 
        
               let newValue = value; 
        
               for (let [name, map] of bundleNameMap) { 
        
                 newValue = newValue.split(name).join(map); 
        
               } 
        
               // Copy `this.generated` on write so we don't end up writing the final names to the cache. 
        
               if (newValue !== value && !copied) { 
        
                 this.generated = Object.assign({}, this.generated); 
        
                 copied = true; 
        
               } 
        
               this.generated[key] = newValue;

parcel/packages/core/parcel-bundler/src/Bundler.js

Lines 709 to 715 in 636bb50

    
           if (asset.type && asset.generated[asset.type]) { 
        
             for (let t in asset.generated) { 
        
               if (asset.generated[t]) { 
        
                 bundle.getSiblingBundle(t).addAsset(asset); 
        
               } 
        
             } 
        
           }

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.

tarwich · 2019-04-21T11:30:45Z

Sweet! I'll try that out as soon as I can and see if it fixes my issues.

quasicomputational · 2019-04-21T13:44:43Z

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...

ark234 · 2019-04-23T21:06:36Z

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:

parcel/packages/core/parcel-bundler/src/packagers/JSPackager.js

Lines 88 to 94 in c2760fd

    
             await this.writeModule( 
        
               asset.id, 
        
               asset.generated.js, 
        
               deps, 
        
               asset.generated.map 
        
             ); 
        
           }

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?

quasicomputational · 2019-04-25T11:31:54Z

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.

Fixes the same error as reported [here](parcel-bundler/parcel#1158). Also ignores some TS warnings.

github-actions · 2020-01-17T23:03:13Z

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.

std4453 · 2020-04-26T13:43:59Z

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.

TimMensch · 2020-05-12T00:25:43Z

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. :(

srolfe26 · 2020-06-04T20:55:22Z

Still experiencing this issue

JonathanSchndr · 2020-08-28T14:28:02Z

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>

github-actions · 2021-02-25T00:19:04Z

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.

yashsway · 2022-06-12T19:12:02Z

Cleaning the .pacel-cache folder (for Parcel 2), and re-running parcel fixed it for me as well as @TimMensch mentioned.

DeMoorJasper added the 🐛 Bug label Apr 9, 2018

sephi-dev mentioned this issue Apr 11, 2018

temporary fix WebFaker/3DSI#3

Merged

eliandoran mentioned this issue Apr 21, 2018

Intermittent Cannot read property 'js' of null #1227

Closed

80245089 mentioned this issue Apr 27, 2018

fix:Cannot read property js of null #1248

Closed

devongovett added the Needs Verification label Jan 6, 2019

mischnic removed the Needs Verification label Mar 21, 2019

quasicomputational mentioned this issue Apr 25, 2019

Cannot read property 'length' of undefined #2957

Closed

nokome added a commit to stencila/thema that referenced this issue Sep 5, 2019

build(*): FIx build

35da3cc

Fixes the same error as reported [here](parcel-bundler/parcel#1158). Also ignores some TS warnings.

github-actions bot added the Stale Inactive issues label Jan 17, 2020

github-actions bot closed this as completed Feb 3, 2020

nickbabcock mentioned this issue Mar 28, 2020

Migrate to webpack, scss, and hugo nickbabcock/rl-web#157

Merged

github-actions bot removed the Stale Inactive issues label Apr 26, 2020

mischnic reopened this Apr 26, 2020

github-actions bot added the Stale Inactive issues label Feb 25, 2021

github-actions bot closed this as completed Mar 11, 2021

github-actions bot removed the Stale Inactive issues label Jun 12, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Getting `Cannot read property 'js' of null` #1158

Getting `Cannot read property 'js' of null` #1158

sabbirrahman commented Apr 9, 2018

morehardy commented Apr 9, 2018

Rajan commented Apr 10, 2018

DeMoorJasper commented Apr 10, 2018

Rajan commented Apr 10, 2018 •

edited

Loading

dolma commented Apr 11, 2018 •

edited

Loading

jgentes commented Apr 18, 2018

pgn-vole commented Apr 27, 2018

DeMoorJasper commented May 8, 2018

kisjula commented May 9, 2018

jwarning commented May 10, 2018

devongovett commented Jan 6, 2019

jwarning commented Jan 6, 2019

mdchristians commented Feb 18, 2019

mysterycommand commented Mar 7, 2019

mysterycommand commented Mar 7, 2019

tarwich commented Mar 11, 2019

quasicomputational commented Mar 20, 2019

mischnic commented Mar 20, 2019 •

edited

Loading

quasicomputational commented Mar 20, 2019

quasicomputational commented Apr 21, 2019

tarwich commented Apr 21, 2019

quasicomputational commented Apr 21, 2019

ark234 commented Apr 23, 2019 •

edited

Loading

quasicomputational commented Apr 25, 2019

github-actions bot commented Jan 17, 2020

std4453 commented Apr 26, 2020

TimMensch commented May 12, 2020

srolfe26 commented Jun 4, 2020

JonathanSchndr commented Aug 28, 2020 •

edited

Loading

github-actions bot commented Feb 25, 2021

yashsway commented Jun 12, 2022

Getting Cannot read property 'js' of null #1158

Getting Cannot read property 'js' of null #1158

Comments

sabbirrahman commented Apr 9, 2018

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

🤔 Expected Behavior

😯 Current Behavior

💁 Possible Solution

🔦 Context

💻 Code Sample

🌍 Your Environment

morehardy commented Apr 9, 2018

Rajan commented Apr 10, 2018

DeMoorJasper commented Apr 10, 2018

Rajan commented Apr 10, 2018 • edited Loading

dolma commented Apr 11, 2018 • edited Loading

jgentes commented Apr 18, 2018

pgn-vole commented Apr 27, 2018

DeMoorJasper commented May 8, 2018

kisjula commented May 9, 2018

jwarning commented May 10, 2018

devongovett commented Jan 6, 2019

jwarning commented Jan 6, 2019

mdchristians commented Feb 18, 2019

mysterycommand commented Mar 7, 2019

mysterycommand commented Mar 7, 2019

tarwich commented Mar 11, 2019

quasicomputational commented Mar 20, 2019

mischnic commented Mar 20, 2019 • edited Loading

quasicomputational commented Mar 20, 2019

quasicomputational commented Apr 21, 2019

tarwich commented Apr 21, 2019

quasicomputational commented Apr 21, 2019

ark234 commented Apr 23, 2019 • edited Loading

quasicomputational commented Apr 25, 2019

github-actions bot commented Jan 17, 2020

std4453 commented Apr 26, 2020

TimMensch commented May 12, 2020

srolfe26 commented Jun 4, 2020

JonathanSchndr commented Aug 28, 2020 • edited Loading

github-actions bot commented Feb 25, 2021

yashsway commented Jun 12, 2022

Getting `Cannot read property 'js' of null` #1158

Getting `Cannot read property 'js' of null` #1158

Rajan commented Apr 10, 2018 •

edited

Loading

dolma commented Apr 11, 2018 •

edited

Loading

mischnic commented Mar 20, 2019 •

edited

Loading

ark234 commented Apr 23, 2019 •

edited

Loading

JonathanSchndr commented Aug 28, 2020 •

edited

Loading