🐛 Loading local fonts via CSS returns error

🐛 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

[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);

[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);
        // }
      }
    }