Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

馃悰 Problem with loading manifest.json #235

Open
mvrlin opened this issue Dec 12, 2017 · 24 comments 路 May be fixed by #3404
Open

馃悰 Problem with loading manifest.json #235

mvrlin opened this issue Dec 12, 2017 · 24 comments 路 May be fixed by #3404

Comments

@mvrlin
Copy link

@mvrlin mvrlin commented Dec 12, 2017

馃悰 Bug report

While building or running in dev mode with parcel, if I include manifest.json in html, then parcel return's me .js file path.

馃 Expected Behavior

<link rel="manifest" href="/dist/manifest.json">

馃槸 Current Behavior

<link rel="manifest" href="/dist/05bfa35095e6bfacdb8b334d1023872b.js">

馃實 Your Environment

Software Version(s)
Parcel 1.2.0
Node node 8.9.2
npm/Yarn yarn 1.3.2
Operating System macOS Sierra 10.12.6
@davidnagli

This comment has been minimized.

Copy link
Member

@davidnagli davidnagli commented Dec 12, 2017

Thanks for reporting this 馃榾

It looks like you have a mistake in your code. Instead of using the path to the manifest.json in dist, you should be setting the path to your original manifest.json, and Parcel will handle transforming it to the correct path within dist.

You should be doing something like:

<!-- Assuming your manifest.json file is in a directory called src -->
<link rel=鈥渕anifest鈥 href="/src/manifest.json">
@kylealwyn

This comment has been minimized.

Copy link

@kylealwyn kylealwyn commented Dec 13, 2017

Can confirm this behavior. Any JSON file referenced in html entry is transformed to js module

@mvrlin

This comment has been minimized.

Copy link
Author

@mvrlin mvrlin commented Dec 13, 2017

@davidnagli I tried your solution, it's converting json to js and as .js path return it.

@DeMoorJasper

This comment has been minimized.

Copy link
Member

@DeMoorJasper DeMoorJasper commented Dec 13, 2017

This is expected bahaviour looking at the code but in reality shouldn't happen, marked this as bug

@DeMoorJasper DeMoorJasper changed the title Problem with loading manifest.json 馃悰 Problem with loading manifest.json Dec 13, 2017
@davidnagli davidnagli added this to To Do in Bugs via automation Dec 13, 2017
@zhulduz

This comment has been minimized.

Copy link

@zhulduz zhulduz commented Dec 13, 2017

Is it correct that a file JSONAsset.js extends JSAsset.js?

Maybe JSONAsset should look likes this (of course with some improvements).

@HenrikJoreteg

This comment has been minimized.

Copy link

@HenrikJoreteg HenrikJoreteg commented Dec 14, 2017

I'm happy to take this on, as it is a bit of a blocker for me for migrating a couple of PWAs to parcel.

My questions:

@devongovett any guidance?

@devongovett

This comment has been minimized.

Copy link
Member

@devongovett devongovett commented Dec 15, 2017

Ah interesting issue. The type needs to be js so JSON files can be imported from JavaScript. Ideally the assets could return multiple renditions of different types and the correct one could be chosen based on the parent asset type. Let me think about this a bit and see what I can come up with. If you have suggestions on how this could work let me know!

@HenrikJoreteg

This comment has been minimized.

Copy link

@HenrikJoreteg HenrikJoreteg commented Dec 15, 2017

@devongovett it's weird, because how to handle this file can't be inferred from its file type. This isn't a JSON file that needs to be read and used as a module, it's just a JSON file that needs to be copied into the build directory. I started in on this by adding a check to determine if the link tag has a 鈥榬el=manifest鈥. It'd be cool if addURLDependency took an option to specify that it should be "raw".

@albizures

This comment has been minimized.

Copy link
Member

@albizures albizures commented Dec 18, 2017

Hi @devongovett, I faced something similar working with the implementation of rust/wasm.
My case was that I needed to make some difference between the wasm files that were called from html file or the js files.

So I came up with this:

-let assetPath = this.addURLDependency(node.attrs[attr]);
+let assetPath = this.addURLDependency(node.attrs[attr], {
+  fromHtml: true
+ });

I'm not sure if this is the best way to do it, but it works 馃槃
you can see the changes in my PR #312

but I think your idea using the parent's type is a better way to do it.

@DeMoorJasper

This comment has been minimized.

Copy link
Member

@DeMoorJasper DeMoorJasper commented Dec 18, 2017

@albinotonnina wouldn't it be a better idea to make from a more generic field like

let assetPath = this.addURLDependency(node.attrs[attr], {
  from: asset.type
});

resolving into

let assetPath = this.addURLDependency(node.attrs[attr], {
  from: 'html'
});

I'm not sure but thought there was a way to address the parent element already, i might be mistaken

@albizures

This comment has been minimized.

Copy link
Member

@albizures albizures commented Dec 18, 2017

yes, I agree with you @DeMoorJasper and I looked for a way to address the parent, but I didn't find a way, but maybe I just didn't look in the right place 馃

@Munter

This comment has been minimized.

Copy link

@Munter Munter commented Dec 25, 2017

With all the years of experience I've had thinking about these graph problems while implementing Assetgraph, I can tell you that you won't be able to infer from the asset alone what format you need to keep it in. Knowing the parent type will only be enough in the most naive cases as well. What you need is a model that also keep the information of what type of relation is between these two assets.

In Assegraph each way any asset can refer to a different asset is modelled as different relation type. This information has turned out to be much more valuable than the assets themselves, as you can infer a lot of things from the relation types alone. It's especially valuable when you start to traverse the graph for processing.

In this single case you might be able to hack it with a condition that excludes json files linked from html from being interpreted as js. But a bit further in the future you might want to cover the case where fetch('data.json') is picked up as a file reference, and the application logic of runtime json loading would fail if the file changes extension as well.

You probably also want to start treating the webmanifest as a separate asset type inheriting from JSON, since it has well defined properties that also describe asset relations.

@niicojs

This comment has been minimized.

Copy link
Contributor

@niicojs niicojs commented Jan 28, 2018

I was also blocked by this so I made a PR that works for me: #690

@vlucas

This comment has been minimized.

Copy link

@vlucas vlucas commented Jun 13, 2018

Just got here after some searching because I hit this very issue myself while trying to create a PWA with a manifest.json file.

I think that in general, the most flexible thing from an HTML entry point would be to have some data attribute that we could use to manually tell Parcel.js NOT to process the file.

Something like this:

<link rel=鈥渕anifest鈥 href="/src/manifest.json" data-parceljs-ignore>

That data attribute would then be noted, processing would be skipped for that file, and the resulting output would remove the data attribute without doing any processing on the file at all:

<link rel=鈥渕anifest鈥 href="/src/manifest.json">
@niicojs

This comment has been minimized.

Copy link
Contributor

@niicojs niicojs commented Jun 14, 2018

Parcel will have to process the file as it may contain links to assets (images mostly).
Did you try <link rel='manifest' href='/src/manifest.webmanifest'>. This is supposed to work.

@vlucas

This comment has been minimized.

Copy link

@vlucas vlucas commented Jun 14, 2018

Yes, I tried that - I was able to get everything working, but I still wish there was a way to tell ParcelJS to ignore files individually. Thanks!

@aminnairi

This comment has been minimized.

Copy link

@aminnairi aminnairi commented Jun 15, 2018

I was using the manifest.json naming convention from the Google Web App Manifest documentation. While MDN was using the manifest.webmanifest naming convention. Using the later solved the issue (which was Parcel.js converting the manifest.json to a javascript file). Hope this helps!

@vlucas

This comment has been minimized.

Copy link

@vlucas vlucas commented Jun 15, 2018

@aminnairi Yep, that's what I did too. Mine is now named manifest.webmanifest and it works.

akshaysmurthy added a commit to akshaysmurthy/home-pwa that referenced this issue Aug 26, 2018
This caused the PWA to open in a full browser on iOS

- Rename manifest.json to manifest.webmanifest (parcel-bundler/parcel#235 (comment))
- Include the new manifest file in index.html
quanbrew added a commit to quanbrew/iooo that referenced this issue Nov 2, 2018
@aviaryan

This comment has been minimized.

Copy link

@aviaryan aviaryan commented Dec 6, 2018

webmanifest solution might work but I want to name my manifest as manifest.json. Any way to achieve that?

@antoniovj1

This comment has been minimized.

Copy link

@antoniovj1 antoniovj1 commented Dec 16, 2018

Any news on this?

@manthis

This comment has been minimized.

Copy link

@manthis manthis commented Apr 10, 2019

I have just renamed my manifest.json file to manifest as a temporary workaround.

@HenrikJoreteg

This comment has been minimized.

Copy link

@HenrikJoreteg HenrikJoreteg commented Apr 23, 2019

@devongovett @DeMoorJasper hey! Just wanted to drop a quick note here for parcel v2. In talking to some friends at Google, it's important for how browsers handle web manifests specifically that the final filename stays the same between builds.

Otherwise it's interpreted as a different app, somehow. Maybe @slightlyoff or @addyosmani can elaborate a bit.

In order to work around this I've had to do some HTML manipulation after the fact to inject the manifest.

I just wanted to drop note in hopes that there would be some way to control the final filename in v2.

Thanks for all your work on Parcel! 鉂わ笍

@devongovett

This comment has been minimized.

Copy link
Member

@devongovett devongovett commented Aug 12, 2019

@HenrikJoreteg hey, catching up here. Was your manifest being output with a hash or something? It shouldn't because the dependency in HTML is marked as an entry, which means it should be consistent. So that should already be the case. Let me know if there's something else you're looking for.

@neuroelf

This comment has been minimized.

Copy link

@neuroelf neuroelf commented Aug 12, 2019

Hey there. My use case is probably different: I've used create-react-app and now want to have a relatively easy (few mangling steps) way of bundling all assets with parcel--which BTW works awesome, not requiring to eject!

And I simply wanted to say it'd be great if there was a way to bundle/build with a tag/token of sorts that copies the original manifest.json file into the build folder (with that filename) and keeps the original content (link tag with rel="manifest" and href="/manifest.json" fields), even if in the original index.html file another tag (e.g. parcel-asset-copy-only) needed to be added, which I could do pre-build...

As a first pass, it's not too many steps:
https://github.com/neuroelf/dermodelphi/blob/master/README.md#building-with-parcel-without-minification

Anyway, great project!! :)

@Drapegnik Drapegnik linked a pull request that will close this issue Aug 15, 2019
4 of 4 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Bugs
  
To Do
You can鈥檛 perform that action at this time.