Problem with static files path #95

arxanter · 2019-12-01T16:44:18Z

🐛 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 · 2019-12-01T19:20:34Z

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 · 2019-12-01T20:09:24Z

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 · 2019-12-22T19:21:33Z

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

arxanter · 2019-12-22T21:19:03Z

thank you!

ckiee · 2020-05-08T19:32:35Z

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

DeMoorJasper · 2020-05-08T19:34:55Z

@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 · 2020-05-10T06:42:41Z

Okay I made an example.

DeMoorJasper · 2020-05-10T08:09:39Z

@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 9c57a78

ckiee · 2020-05-14T07:48:11Z

@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 · 2020-05-14T07:50:28Z

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

ckiee · 2020-05-14T07:56:18Z

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

alanferreiradasilva · 2020-05-29T01:10:54Z

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 · 2020-06-23T17:24:42Z

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 · 2020-06-23T17:31:46Z

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 · 2020-06-23T17:43:44Z

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 · 2020-10-07T23:17:14Z

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

e14cf22

arxanter changed the title ~~Problem with path static files~~ Problem with static files path Dec 1, 2019

DeMoorJasper added the question label Dec 1, 2019

DeMoorJasper added 🐛 bug and removed question labels Dec 22, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Problem with static files path #95

Problem with static files path #95

arxanter commented Dec 1, 2019 •

edited

Loading

DeMoorJasper commented Dec 1, 2019

arxanter commented Dec 1, 2019

DeMoorJasper commented Dec 22, 2019

arxanter commented Dec 22, 2019

ckiee commented May 8, 2020

DeMoorJasper commented May 8, 2020

ckiee commented May 10, 2020

DeMoorJasper commented May 10, 2020 •

edited

Loading

ckiee commented May 14, 2020 •

edited

Loading

DeMoorJasper commented May 14, 2020

ckiee commented May 14, 2020

alanferreiradasilva commented May 29, 2020

soanvig commented Jun 23, 2020 •

edited

Loading

soanvig commented Jun 23, 2020 •

edited

Loading

soanvig commented Jun 23, 2020 •

edited

Loading

canadaduane commented Oct 7, 2020

Problem with static files path #95

Problem with static files path #95

Comments

arxanter commented Dec 1, 2019 • edited Loading

🐛 Bug Report

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

💻 Code Sample

🌍 Your Environment

DeMoorJasper commented Dec 1, 2019

arxanter commented Dec 1, 2019

DeMoorJasper commented Dec 22, 2019

arxanter commented Dec 22, 2019

ckiee commented May 8, 2020

DeMoorJasper commented May 8, 2020

ckiee commented May 10, 2020

DeMoorJasper commented May 10, 2020 • edited Loading

ckiee commented May 14, 2020 • edited Loading

DeMoorJasper commented May 14, 2020

ckiee commented May 14, 2020

alanferreiradasilva commented May 29, 2020

soanvig commented Jun 23, 2020 • edited Loading

soanvig commented Jun 23, 2020 • edited Loading

soanvig commented Jun 23, 2020 • edited Loading

canadaduane commented Oct 7, 2020

arxanter commented Dec 1, 2019 •

edited

Loading

DeMoorJasper commented May 10, 2020 •

edited

Loading

ckiee commented May 14, 2020 •

edited

Loading

soanvig commented Jun 23, 2020 •

edited

Loading

soanvig commented Jun 23, 2020 •

edited

Loading

soanvig commented Jun 23, 2020 •

edited

Loading