arxanter commented 4 years ago

🐛 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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

arxanter commented 4 years ago

thank you!

ckiee commented 4 years ago

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

DeMoorJasper commented 4 years ago

@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 commented 4 years ago

Okay I made an example.

DeMoorJasper commented 4 years ago

@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 commented 4 years ago

@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 commented 4 years ago

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

ckiee commented 4 years ago

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

alanferreiradasilva commented 4 years ago

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

svelte-parcel-load-local-image

parcel-doc

soanvig commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

DeMoorJasper / parcel-plugin-svelte

Problem with static files path #95

🐛 Bug Report

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

💻 Code Sample

🌍 Your Environment