9

I'm trying to make my existing react application progressive by adding among other things a manifest.json.

However it seems that my application is unable to find my manifest.json file as I get the above error message and Cannot GET /manifest.json when I take a look at the developer tool's network tab . This is strange since my manifest.json is located at the root of my application, exactly where the error says it cannot find the file.

I tried several things like placing a manifest.json file in every directory or introducing a json-loader in my webpack configuration but nothing worked.

Where I reference the manifest

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="manifest" href="/manifest.json" >
  </head>
  <body>
    <div id="root" class="body"></div>
  </body>
</html>

In addition I'm using webpack-manifest-plugin which creates an asset-manifest.json file in my build directory that maps my index files.

webpack.config

//...
const ManifestPlugin = require("webpack-manifest-plugin")
module.exports = {
    plugins: [
        new ManifestPlugin({
            fileName: "asset-manifest.json"
        })
        //...

created asset-manifest.json

{
  "index.js": "index.bundle.js",
  "index.html": "index.html"
}

I hope you can help me

Jannik
  • 91
  • 1
  • 1
  • 4
  • actual file is asset-manifest.json but you are try to point manifest.json?? I'm i getting wrong? – Dinesh undefined Jul 04 '18 at 09:52
  • You have changed the `fileName` to `asset-manifest.json` in your webpack config, but you link to `/manifest.json` in your document. Could you try `/asset-manifest.json` in the document instead? – Tholle Jul 04 '18 at 09:53
  • The asset-manifest.json is generated by the plugin with a mapping of all source file names to their corresponding output file (https://www.npmjs.com/package/webpack-manifest-plugin). It is **not** the manifest.json file I'm trying to refer to. – Jannik Jul 04 '18 at 11:04

3 Answers3

5

The problem is not only with manifest.json but with all json files. As it says here: https://stackoverflow.com/a/29633038/3231884 , you need to setup the web.config according to the following example:

<?xml version="1.0"?>
<configuration>
    <system.webServer>
        <staticContent>
        <remove fileExtension=".json" />
        <mimeMap fileExtension=".json" mimeType="application/json" />
      </staticContent>
    </system.webServer>
</configuration>

Afterwards, you should make 'npm run build' copy it to the build folder by following these steps (credits to Liviu Costea): https://medium.com/hackernoon/adding-web-config-to-react-projects-3eb762dbe01f

Luis Gouveia
  • 8,334
  • 9
  • 46
  • 68
0

It should be an issue of manifest.json file. Please show the contents of manifest.json file.

Try this, In manifest.json the name property should be in small letters and contains no spaces.

Andrey Belykh
  • 2,578
  • 4
  • 32
  • 46
Mohammad Ayoub Khan
  • 2,422
  • 19
  • 24
0

change extension manifest from manifest.json to manifest.txt

Behrouz
  • 1
  • 4