🐛 Loading local fonts via CSS returns error

[darita92]

🐛 bug report

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

{
  "presets": [
    "env",
    "vue"
  ]
}

{
  ...
  "dependencies": {
    "axios": "^0.17.1",
    "vue": "^2.5.13",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@storybook/addon-actions": "^3.3.10",
    "@storybook/addon-links": "^3.3.10",
    "@storybook/addons": "^3.3.10",
    "@storybook/vue": "^3.3.10",
    "babel-core": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-vue": "^2.0.0",
    "css-loader": "^0.28.9",
    "eslint": "^4.16.0",
    "eslint-plugin-vue": "^4.2.0",
    "node-sass": "^4.7.2",
    "parcel-bundler": "^1.5.0",
    "parcel-plugin-eslint": "^1.0.3",
    "parcel-plugin-vue": "^1.5.0"
  }
}

🤔 Expected Behavior

I have a css file that references some local fonts:

@font-face{
font-family:example;
src:url(..\fonts\example.eot?6kxrs1);
src:url(..\fonts\example.eot?#iefix6kxrs1) format("embedded-opentype"),
url(..\fonts\example.ttf?6kxrs1) format("truetype"),
url(..\fonts\example.woff?6kxrs1) format("woff"),
url(..\fonts\example.svg?6kxrs1#example) format("svg");
font-weight:400;
font-style:normal}

I import this file in my main.js file so it is bundled in the app.

😯 Current Behavior

When trying to import the css file in my main.js I get the following error:

Cannot read property 'add' of undefined
    at JSPackager.addAsset (...\node_modules\parcel-bundler\src\packagers\JSPackager.js:56:28)
    at Bundle._addDeps (...\node_modules\parcel-bundler\src\Bundle.js:146:20)
    at <anonymous>

💁 Possible Solution

Looking at the file with the error JSPackager I put it a validation before the this.bundleLoaders.add(mod.type);:

if(!this.bundleLoaders){
    this.bundleLoaders = new Set();
}
this.bundleLoaders.add(mod.type);

🔦 Context

💻 Code Sample

🌍 Your Environment

Software	Version(s)
Parcel	1.5.0
Node	8.9.3
npm/Yarn	5.5.1
Operating System	Windows 10

[bulatie]

I have the similar problem.

When I comment the line of following, it will build pass.

html,
body {
  height: 100%;
  /* background-image: url('../img/bg.png'); */
  background-position: 50% 50%;
  background-size: cover;
}

This a demo repository

Software	Version(s)
Parcel	1.51
Node	8.9.0
npm/Yarn	5.5.1
Operating System	Windows 10

[bulatie]

×  Cannot read property 'add' of undefined
    at JSPackager.addAsset (..\node_modules\parcel-bundler\src\packagers\JSPackager.js:64:32)
    at Bundle._addDeps (..\node_modules\parcel-bundler\src\Bundle.js:146:20)
    at <anonymous>

[bulatie]

I also put it a validation before the this.externalModules.add(mod);

It works!

[FalkoJoseph]

How did you resolve this @darita92 I'm running into the same problem.

[darita92]

hey @FalkoJoseph, I went to the actual code of parcel to do this. On the file \node_modules\parcel-bundler\src\packagers\JSPackager.js on line 56 you will see this line:

this.bundleLoaders.add(mod.type);

So what I did to get rid of the error is put a validation before that line. Something like this:

if(!this.bundleLoaders){
    this.bundleLoaders = new Set();
}
this.bundleLoaders.add(mod.type);

[yi-ge]

I have the similar problem.

[laosb]

Similar problem on pure js bundle. Can't see what actually caused this. Applying @darita92 's workaround works.

Edit: @darita92 's workaround seems breaking code splitting. Parcel won't build bundle-loader in to the bundle. Investigating.

Edit2: My error goes away by changing a dynamic import to regular import statement. I'm still investigating what caused this. What I've found is in some situations, addAsset is called before start on JSPackager, causing this error. @devongovett Can you help in investiagation? I can't really give a minimal reproduce yet, but I'm seeking for help in code.

[wlecki]

Hi, @darita92, did you try to import assets first in your main.js, before using them in css? I had the same issue, but I resolved it by importing all static assets first. My main.js file looks something like that:

// importing static assets
import './static/**/**';

// importing styles
import './scss/index.scss';

// importing vue app
import './vue/app';

[DeMoorJasper]

This appears to be a bug with https://github.com/BoltDoggy/parcel-plugin-vue and not with parcel itself at least according to my testing with the repo provided by @bulatie

EDIT: After looking at the sourcecode of parcel-plugin-vue i can definitely confirm this is an issue with the plugin, as it overwrites JSPackager with a pretty slimmed down and bugged version i'll close this issue. Please refer to the parcel-plugin-vue repo to continue this issue.

Further discussion and fix: BoltDoggy/parcel-plugin-vue#24

[tunjioye]

I just added comments to this.bundleLoaders.add(mod.type); and it worked fine for me
It now imports the fonts with no stress

[tunjioye]

I recommend you change the async addAsset(asset) function located in node_modules\parcel-bundler\src\packagers\JSPackager.js:

async addAsset(asset) {
    if (this.dedupe.has(asset.generated.js)) {
      return;
    }

    // Don't dedupe when HMR is turned on since it messes with the asset ids
    if (!this.options.hmr) {
      this.dedupe.set(asset.generated.js, asset.id);
    }

    let deps = {};
    for (let [dep, mod] of asset.depAssets) {
      // For dynamic dependencies, list the child bundles to load along with the module id
      if (dep.dynamic && this.bundle.childBundles.has(mod.parentBundle)) {
        let bundles = [this.getBundleSpecifier(mod.parentBundle)];
        for (let child of mod.parentBundle.siblingBundles) {
          if (!child.isEmpty) {
            bundles.push(this.getBundleSpecifier(child));
            this.bundleLoaders.add(child.type);
          }
        }

        bundles.push(mod.id);
        deps[dep.name] = bundles;
        // this.bundleLoaders.add(mod.type);
      } else {
        deps[dep.name] = this.dedupe.get(mod.generated.js) || mod.id;

        // If the dep isn't in this bundle, add it to the list of external modules to preload.
        // Only do this if this is the root JS bundle, otherwise they will have already been
        // loaded in parallel with this bundle as part of a dynamic import.
        // if (
        //   !this.bundle.assets.has(mod) &&
        //   (!this.bundle.parentBundle || this.bundle.parentBundle.type !== 'js')
        // ) {
        //   this.externalModules.add(mod);
        //   this.bundleLoaders.add(mod.type);
        // }
      }
    }