Safari issue NoModificationAllowedError: The object can not be modified.

[liho00]

Safari cannot open the web app after imported and apply the svgSpritePlugin plugin. After removing the plugin my web app works again.

vite.config.js

import reactRefresh from "@vitejs/plugin-react-refresh";
import path from "path";
import { defineConfig, loadEnv } from "vite";
import svgSpritePlugin from "vite-plugin-svg-sprite-component";

export default ({ mode }) => {
  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };

  return defineConfig({
    plugins: [
      reactRefresh(),
      svgSpritePlugin({ symbolId: (name) => "icon-" + name, removeAttrs: [] }),
    ],
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "/src"),
      },
    },
    build: {
      target: "es2015",
    },
    css: {
      preprocessorOptions: {
        less: {
          javascriptEnabled: true,
        },
      },
    },
    server: {
      proxy: {
        "/api": {
          target: `${process.env.VITE_PROXY_BASE_PATH}`,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ""),
        },
        "/oauth": {
          target: `${process.env.VITE_PROXY_OAUTH_BASE_PATH}`,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/oauth/, ""),
        },
      },
      cors: true,
    },
  });
};

[liho00]

I did not have time check the coding but here are some references i searched online with the error title https://stackoverflow.com/questions/66709058/safari-fails-to-replace-svg-element-with-nomodificationallowederror-the-object https://github.com/FortAwesome/Font-Awesome/issues/17468

Have a look ya.

[cereschen]

It seems that Safari does not support modifying elements through outerHTML, which was fixed in 1.0.8

[liho00]

Thanks, I installed 1.0.8 and it worked like a charm