search

bejamas / gatsby-plugin-csp

A Gatsby plugin which adds strict Content Security Policy to your project.
MIT License
38 stars 15 forks source link

Warning: Each child in a list should have a unique "key" prop. #13

Closed Odelya closed 1 year ago

Odelya commented 4 years ago

Upon installing the plugin, I started getting warnings in the console:

Warning: Each child in a list should have a unique "key" prop.

Check the top-level render call using <head>. See https://fb.me/react-warning-keys for more information.
    in meta

Not sure if it's important to be fixed. Will appreciate your attention.

ivands commented 4 years ago

I get the same warning. My ocd wants me to remove the warning 😋

Primajin commented 2 years ago

I was also stumbling over this issue - here is the background:

In the headComponents in your html.js plugins push things to your html <head>. If you log that out you will see something like this:

    {
      "type": "meta",
      "key": "environment",
      "ref": null,
      "props": {
        "name": "note",
        "content": "environment=development"
      },
      "_owner": null,
      "_store": {}
    }

note the key here is set to environment. But for the CSP the key is null and it will throw this error.

    {
      "type": "meta",
      "key": null,
      "ref": null,
      "props": {
        "httpEquiv": "Content-Security-Policy",
        "content": "base-uri 'self'; default-src 'self';"
      },
      "_owner": null,
      "_store": {}
    }
Primajin commented 2 years ago

OK found a fix, until it is merged you can add

    key: 'gatsby-plugin-csp',

to node_modules/gatsby-plugin-csp/gatsby-ssr.js:43 then delete the .cache folder and restart. This should remove the error.