0

The SVG was copy pasted from the source into a .vue file as a component, it works in Chrome but it throws this error in Firefox and the entire icons won't render. Since each of those are throwing the same error, I'll just pick one to represent the problem. Please have a look.

[Vue warn]: Failed to resolve async component: function IconInstagram() {
    return __webpack_require__.e(/*! import() | components/icon-instagram */ "components/icon-instagram").then(__webpack_require__.bind(null, /*! ../../components/Icon/Instagram.vue */ "./components/Icon/Instagram.vue")).then(function (c) {
      return Object(_utils__WEBPACK_IMPORTED_MODULE_8__["wrapFunctional"])(c.default || c);
    });
  }
Reason: ChunkLoadError: Loading chunk components/icon-instagram failed.
(error: http://localhost:3000/_nuxt/components/icon-instagram.js)

<template>
  <!-- IconInstagram.vue -->
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <g fill="currentColor">
      <path
        d="M20.947 8.305a6.53 6.53 0 0 0-.419-2.216 4.61 4.61 0 0 0-2.633-2.633 6.606 6.606 0 0 0-2.186-.42c-.962-.043-1.267-.055-3.709-.055s-2.755 0-3.71.055a6.606 6.606 0 0 0-2.185.42 4.607 4.607 0 0 0-2.633 2.633 6.554 6.554 0 0 0-.419 2.185c-.043.963-.056 1.268-.056 3.71s0 2.754.056 3.71c.015.748.156 1.486.419 2.187a4.61 4.61 0 0 0 2.634 2.632 6.584 6.584 0 0 0 2.185.45c.963.043 1.268.056 3.71.056s2.755 0 3.71-.056a6.59 6.59 0 0 0 2.186-.419 4.615 4.615 0 0 0 2.633-2.633c.263-.7.404-1.438.419-2.187.043-.962.056-1.267.056-3.71-.002-2.442-.002-2.752-.058-3.709zm-8.953 8.297c-2.554 0-4.623-2.069-4.623-4.623s2.069-4.623 4.623-4.623a4.623 4.623 0 0 1 0 9.246zm4.807-8.339c-.597 0-1.078-.482-1.078-1.078a1.077 1.077 0 1 1 2.155 0c0 .596-.482 1.078-1.077 1.078z"
      ></path>
      <circle cx="11.994" cy="11.979" r="3.003"></circle>
    </g>
  </svg>
</template>

Both browser and Nuxt.js installed are on latest stable channel. What should I do to fix this?

Improve this question
4
  • Can you show how the component is loaded and used? Can you link to a reproduction (e.g., in GitHub)?
    – tony19
    Commented Apr 27, 2021 at 22:50
  • 1
    there you go, I also put a message on the main README file, please have a look @tony19 ... github.com/pratamatama/nuxt-inline-svg-bug
    – Yura
    Commented Apr 27, 2021 at 23:15
  • I cannot reproduce the issue. See Firefox 86.0.1 screenshot
    – tony19
    Commented Apr 27, 2021 at 23:43
  • @tony19 looks like this issue is happening on windows only (Firefox 88.0), i got the error using the exact same repository, and now it also says invalid DOM Node ... imgur.com/a/1rjoS6V
    – Yura
    Commented Apr 27, 2021 at 23:56

1 Answer 1

Reset to default
0

It turned out to be an ad-blocker trying to block access to the scripts. Disabling it fixes the error and it doesn't appear anymore.

This question solves the problem. Please have a look in there for the detailed explanation.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.