Problem with static files path

[arxanter]

🐛 Bug Report

Hello, thank you for your work at that plugin. Have some issue with load static files(svg, png and etc.) After compiling, I get the wrong path .JS and .CSS file

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

.svelterc - empty

package.json: "devDependencies": { "@babel/cli": "^7.7.0", "@babel/core": "^7.7.4", "@babel/plugin-transform-runtime": "^7.7.4", "@babel/preset-env": "^7.7.4" "autoprefixer": "^9.7.2", "babel-eslint": "^10.0.3", "babel-loader": "^8.0.6", "babel-plugin-module-resolver": "^3.2.0", "eslint": "^6.7.0", "eslint-config-airbnb": "^18.0.1", "eslint-plugin-import": "^2.18.2", "parcel-bundler": "^1.12.4", "parcel-plugin-clean-dist": "0.0.6", "parcel-plugin-svelte": "^4.0.5", "stylelint-config-recommended": "^3.0.0", "stylint": "^2.0.0", "svelte": "^3.16.0" }, "dependencies": {}, "scripts": { "build": "BABEL_ENV=production parcel build src/index.html", "start": "parcel src/index.html -p 3000" }, "browserslist": [ "last 2 chrome versions" ], "alias": { "shared": "./src/shared" } }

💻 Code Sample

🌍 Your Environment

Svelte version 3.16.0, parcel-bundler version 1.12.4

[DeMoorJasper]

This is how parcel works, it adds a hash to the file name for caching, the plugin is not responsible for this.

In Parcel 1 there is not really a reliable way to disabled this. In Parcel 2 there will be namer plugins to enable different naming strategies

[arxanter]

I understand that. But it seems to me that parcel compilation creates files and paths with hash value. And then svelte compilation rewrites paths, this can be seen in the screenshot with styles.

[DeMoorJasper]

That shouldn't happen, not entirely sure what is causing this. Hopefully I'll find some time soon to figure this one out

[arxanter]

thank you!

[ckiee]

@DeMoorJasper any update on this? I'm experiencing the same issue

[DeMoorJasper]

@DeMoorJasper any update on this? I'm experiencing the same issue

Not really I couldn’t reproduce it so a reproducible minimal example would help

[ckiee]

Okay I made an example.

[DeMoorJasper]

@ronthecookie I've had a look at your example and it's definitely not a thing that should happen. Just realised I did not add any preprocessors for processing the html.

The Svelte API changed from 2-3 where it makes it a lot harder for us to preprocess the html properly, it used to be easier.

I've updated the example with a workaround for this 9c57a7873c3666dc88e5e34e5bcbf065d32f587d

[ckiee]

@DeMoorJasper For some reason I didn't get notified by Github but I seem to have found my way and I ran the example but no luck:

ron@cookiemonster ~/git/parcel-plugin-svelte/packages/svelte-3-example -> yarn start
yarn run v1.21.1
$ parcel index.html --no-cache
Server running at http://localhost:1234 
⚠️  Parser "assets/JSAsset" failed to initialize when processing asset "src/main.js". Threw the following error:
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main resolved in /home/ron/git/parcel-plugin-svelte/node_modules/@babel/helper-compilation-targets/package.json
    at applyExports (internal/modules/cjs/loader.js:491:9)
    at resolveExports (internal/modules/cjs/loader.js:507:23)
    at Function.Module._findPath (internal/modules/cjs/loader.js:635:31)
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1007:27)
    at Function.Module._load (internal/modules/cjs/loader.js:890:27)
    at Module.require (internal/modules/cjs/loader.js:1080:19)
    at require (/home/ron/git/parcel-plugin-svelte/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
    at Object.<anonymous> (/home/ron/git/parcel-plugin-svelte/node_modules/@babel/preset-env/lib/debug.js:8:33)
    at Module._compile (/home/ron/git/parcel-plugin-svelte/node_modules/v8-compile-cache/v8-compile-cache.js:194:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1196:10) falling back to RawAsset
⚠️  Parser "assets/JSAsset" failed to initialize when processing asset "src/main.js". Threw the following error:
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main resolved in /home/ron/git/parcel-plugin-svelte/node_modules/@babel/helper-compilation-targets/package.json
    at applyExports (internal/modules/cjs/loader.js:491:9)
    at resolveExports (internal/modules/cjs/loader.js:507:23)
    at Function.Module._findPath (internal/modules/cjs/loader.js:635:31)
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1007:27)
    at Function.Module._load (internal/modules/cjs/loader.js:890:27)
    at Module.require (internal/modules/cjs/loader.js:1080:19)
    at require (/home/ron/git/parcel-plugin-svelte/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
    at Object.<anonymous> (/home/ron/git/parcel-plugin-svelte/node_modules/@babel/preset-env/lib/debug.js:8:33)
    at Module._compile (/home/ron/git/parcel-plugin-svelte/node_modules/v8-compile-cache/v8-compile-cache.js:194:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1196:10) falling back to RawAsset
⚠️  Parser "assets/JSAsset" failed to initialize when processing asset "src/main.js". Threw the following error:
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main resolved in /home/ron/git/parcel-plugin-svelte/node_modules/@babel/helper-compilation-targets/package.json
    at applyExports (internal/modules/cjs/loader.js:491:9)
    at resolveExports (internal/modules/cjs/loader.js:507:23)
    at Function.Module._findPath (internal/modules/cjs/loader.js:635:31)
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1007:27)
    at Function.Module._load (internal/modules/cjs/loader.js:890:27)
    at Module.require (internal/modules/cjs/loader.js:1080:19)
    at require (/home/ron/git/parcel-plugin-svelte/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
    at Object.<anonymous> (/home/ron/git/parcel-plugin-svelte/node_modules/@babel/preset-env/lib/debug.js:8:33)
    at Module._compile (/home/ron/git/parcel-plugin-svelte/node_modules/v8-compile-cache/v8-compile-cache.js:194:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1196:10) falling back to RawAsset
🚨  Cannot read property 'length' of undefined
    at lineCounter (/home/ron/git/parcel-plugin-svelte/node_modules/parcel-bundler/src/utils/lineCounter.js:3:30)
    at JSPackager.writeModule (/home/ron/git/parcel-plugin-svelte/node_modules/parcel-bundler/src/packagers/JSPackager.js:127:60)
    at async JSPackager.addAsset (/home/ron/git/parcel-plugin-svelte/node_modules/parcel-bundler/src/packagers/JSPackager.js:88:5)
    at async Bundle._addDeps (/home/ron/git/parcel-plugin-svelte/node_modules/parcel-bundler/src/Bundle.js:250:5)
    at async Bundle._package (/home/ron/git/parcel-plugin-svelte/node_modules/parcel-bundler/src/Bundle.js:219:7)
    at async Promise.all (index 0)
    at async Bundle.package (/home/ron/git/parcel-plugin-svelte/node_modules/parcel-bundler/src/Bundle.js:202:5)
    at async Promise.all (index 1)
    at async Bundle.package (/home/ron/git/parcel-plugin-svelte/node_modules/parcel-bundler/src/Bundle.js:202:5)
    at async Bundler.bundle (/home/ron/git/parcel-plugin-svelte/node_modules/parcel-bundler/src/Bundler.js:325:27)
⚠️  Parser "assets/JSAsset" failed to initialize when processing asset "src/main.js". Threw the following error:
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main resolved in /home/ron/git/parcel-plugin-svelte/node_modules/@babel/helper-compilation-targets/package.json
    at applyExports (internal/modules/cjs/loader.js:491:9)
    at resolveExports (internal/modules/cjs/loader.js:507:23)
    at Function.Module._findPath (internal/modules/cjs/loader.js:635:31)
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1007:27)
    at Function.Module._load (internal/modules/cjs/loader.js:890:27)
    at Module.require (internal/modules/cjs/loader.js:1080:19)
    at require (/home/ron/git/parcel-plugin-svelte/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
    at Object.<anonymous> (/home/ron/git/parcel-plugin-svelte/node_modules/@babel/preset-env/lib/debug.js:8:33)
    at Module._compile (/home/ron/git/parcel-plugin-svelte/node_modules/v8-compile-cache/v8-compile-cache.js:194:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1196:10) falling back to RawAsset
⚠️  Parser "assets/JSAsset" failed to initialize when processing asset "src/main.js". Threw the following error:
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main resolved in /home/ron/git/parcel-plugin-svelte/node_modules/@babel/helper-compilation-targets/package.json
    at applyExports (internal/modules/cjs/loader.js:491:9)
    at resolveExports (internal/modules/cjs/loader.js:507:23)
    at Function.Module._findPath (internal/modules/cjs/loader.js:635:31)
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1007:27)
    at Function.Module._load (internal/modules/cjs/loader.js:890:27)
    at Module.require (internal/modules/cjs/loader.js:1080:19)
    at require (/home/ron/git/parcel-plugin-svelte/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
    at Object.<anonymous> (/home/ron/git/parcel-plugin-svelte/node_modules/@babel/preset-env/lib/debug.js:8:33)
    at Module._compile (/home/ron/git/parcel-plugin-svelte/node_modules/v8-compile-cache/v8-compile-cache.js:194:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1196:10) falling back to RawAsset
^C
ron@cookiemonster ~/git/parcel-plugin-svelte/packages/svelte-3-example -> 

[DeMoorJasper]

@ronthecookie not sure why that happens, the example should work... I've tested it

[ckiee]

@DeMoorJasper maybe you have an extra package installed that isn't in the example's package.json?

[alanferreiradasilva]

I am using svelte with parcel and I don't get load local images. To resolve this problem I found this solution in parcel documentation: https://en.parceljs.org/javascript.html

[soanvig]

I can confirm the exact same behavior: double styles, and apparently original appear later, so they override those with correct paths.

Workaround proposed by @alanferreiradasilva is OK, but it gets harder to use or even impossible in some cases, when asset needs to be defined in CSS code.

[soanvig]

What I can see is that one copy of CSS is

, and the second part is in CSS file. The css option is false, so... it shouldn't happen?

[soanvig]

My workaround for now, in root component:

  import { afterUpdate } from 'svelte';

  afterUpdate(() => {
    const styles = document.querySelectorAll('style[id^="svelte"]');
    Array.from(styles).forEach(node => node.remove());
  });

[canadaduane]

I believe this issue is resolved with the most recent commit (PR) that was merged in:

https://github.com/DeMoorJasper/parcel-plugin-svelte/commit/e14cf22d115d5d3494c9e7e812cf349cfd00d5ec