馃悰 bug report
```.babelrc
{
"presets": [
"env",
"vue"
]
}
```package.json
{
...
"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"
}
}
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.
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>
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);
| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.5.0
| Node | 8.9.3
| npm/Yarn | 5.5.1
| Operating System | Windows 10
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;
}
| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.51
| Node | 8.9.0
| npm/Yarn | 5.5.1
| Operating System | Windows 10
脳 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>
I also put it a validation before the this.externalModules.add(mod);
It works!
How did you resolve this @darita92 I'm running into the same problem.
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);
I have the similar problem.
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.
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';
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: https://github.com/BoltDoggy/parcel-plugin-vue/issues/24
I just added comments to this.bundleLoaders.add(mod.type);
and it worked fine for me
It now imports the fonts with no stress
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);
// }
}
}
Most helpful comment
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:So what I did to get rid of the error is put a validation before that line. Something like this: