vue.js – Illegal tag name. Use ‘

so i have a nuxt3 project thats using a rollup plugin called dsv, and i think have installed vite wrong in the project or something, cause when i try to build it to production it gives me an error, heres the github project if it helps, i have no idea why this is happening

i tried removing the vue plugin on the vite config but i get different error Cannot split a chunk that has already been edited (119:17 – "', { enumerable: false, value: true }) when building to production, but i dont get any when using npm run devas i do when i have it

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import dsv from '@rollup/plugin-dsv'

export default defineConfig({
  plugins: [
    vue(),
    dsv(),
  ],
})

ERROR MESSAGE:

 ERROR  Illegal tag name. Use '&lt;' to print '<'.                                                            11:58:36


 ERROR  [vite:vue] Unquoted attribute value cannot contain U+0022 ("), U+0027 ('), U+003C (<), U+003D (=), and U+0060 (`).
file: C:/Users/maia/Desktop/lboxdroulette/nuxt-app/app.vue:22:64


 ERROR  Unquoted attribute value cannot contain U+0022 ("), U+0027 ('), U+003C (<), U+003D (=), and U+0060 (`).

  at createCompilerError (node_modules@vuecompiler-coredistcompiler-core.cjs.prod.js:18:19)
  at emitError (node_modules@vuecompiler-coredistcompiler-core.cjs.prod.js:1566:29)
  at parseAttributeValue (node_modules@vuecompiler-coredistcompiler-core.cjs.prod.js:1454:13)
  at parseAttribute (node_modules@vuecompiler-coredistcompiler-core.cjs.prod.js:1330:17)
  at parseAttributes (node_modules@vuecompiler-coredistcompiler-core.cjs.prod.js:1286:22)
  at parseTag (node_modules@vuecompiler-coredistcompiler-core.cjs.prod.js:1175:17)
  at parseElement (node_modules@vuecompiler-coredistcompiler-core.cjs.prod.js:1104:21)
  at parseChildren (node_modules@vuecompiler-coredistcompiler-core.cjs.prod.js:933:28)
  at Object.baseParse (node_modules@vuecompiler-coredistcompiler-core.cjs.prod.js:848:23)
  at Object.parse (node_modules@vuecompiler-domdistcompiler-dom.cjs.prod.js:3034:25)

tried kissu’s answer but now im getting a different error when tring to build for production, which i mentioned i got when altering the vite config file, still not sure why, but when using for dev it doesn’t give any erros anymore

// nuxt.config.ts
// @ts-nocheck
import { defineNuxtConfig } from 'nuxt'
import dsv from '@rollup/plugin-dsv'
 
export default defineNuxtConfig({
    vite: {
        plugins: [dsv()]
    },
    modules: ['@nuxtjs/tailwindcss'],
    build: {
        postcss: {
            postcssOptions: {
                plugins: {
                    tailwindcss: {},
                    autoprefixer: {},
                },
            }
        }
    },
    css: ['@/assets/css/main.css',],
})
 ERROR  Cannot split a chunk that has already been edited (119:17 – "', { enumerable: false, value: true })   14:55:38
return __returned__
}

})
import { createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createBlock as _createBlock, normalizeClass as _normalizeClass, createTextVNode as _createTextVNode, createStaticVNode as _createStaticVNode } from "vue"

const _hoisted_1 = { class: "app m-0 h-full flex flex-col items-center" }
const _hoisted_2 = { class: "header" }
const _hoisted_3 = { class: "header-items" }
const _hoisted_4 = { class: "flex flex-1 h-fit" }
const _hoisted_5 = /*#__PURE__*/_createElementVNode("h1", { class: "font-semibold text-3xl" }, "Wordle", -1)
const _hoisted_6 = { class: "flex flex-1 h-fit justify-end" }
const _hoisted_7 = { class: "game w-full flex flex-col items-center justify-center" }
const _hoisted_8 = { class: "card-list grid grid-cols-3 w-full overflow-hidden" }
const _hoisted_9 = {
  ref: "info-box",
  class: "overlay"
}
const _hoisted_10 = { class: "boxx p-5" }
const _hoisted_11 = { class: "flex items-center mb-4" }
const _hoisted_12 = /*#__PURE__*/_createElementVNode("h2", { class: "flex-1 font-semibold" }, "HOW TO PLAY", -1)
const _hoisted_13 = /*#__PURE__*/_createStaticVNode("<p class="font-light text-sm mb-2">Inspired by <a href="https://www.nytimes.com/games/wordle/index.html">Wordle</a> and <a href="https://letterboxd.com/tobiasandersen2/list/random-movie-roulette/">this list</a>.</p><p class="font-light text-sm mb-2">Every day there&#39;s a new random set of films from the 2000 most popular on Letterboxd.</p><p class="font-light text-sm mb-2">After you select a film, you can choose to select another, but you can&#39;t go back. If you want to stop, just click confirm</p>", 3)
const _hoisted_16 = {
  ref: "settings-box",
  class: "overlay"
}
const _hoisted_17 = { class: "boxx p-5" }
const _hoisted_18 = { class: "flex items-center mb-4" }
const _hoisted_19 = /*#__PURE__*/_createElementVNode("h2", { class: "flex-1 font-semibold" }, "SETTINGS", -1)
const _hoisted_20 = /*#__PURE__*/_createElementVNode("p", { class: "font-light text-sm mb-2" }, "Settings and new sets of films coming in the future!", -1)

function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock("div", _hoisted_1, [
    _createElementVNode("div", _hoisted_2, [
      _createElementVNode("div", _hoisted_3, [
        _createElementVNode("div", _hoisted_4, [
          _createElementVNode("img", {
            src: "/__NUXT_BASE__/assets/info.svg",
            class: "icon",
            onClick: _cache[0] || (_cache[0] = $event => ($options.open(_ctx.info-_ctx.box)))
          })
        ]),
        _hoisted_5,
        _createElementVNode("div", _hoisted_6, [
          _createElementVNode("img", {
            src: "/__NUXT_BASE__/assets/settings.svg",
            class: "icon",
            onClick: _cache[1] || (_cache[1] = $event => ($options.open(_ctx.settings-_ctx.box)))
          })
        ])
      ])
    ]),
    _createElementVNode("div", _hoisted_7, [
      _createElementVNode("div", _hoisted_8, [
        (_openBlock(true), _createElementBlock(_Fragment, null, _renderList($data.films, (film, i) => {
          return (_openBlock(), _createBlock($setup["Card"], {
            film: film,
            i: i,
            key: i,
            onFlip: $options.grayFilm
          }, null, 8, ["film", "i", "onFlip"]))
        }), 128))
      ]),
      _createElementVNode("div", {
        class: _normalizeClass(["button my-6", { '")


 ERROR  [nuxt:dynamic-base-path] Cannot split a chunk that has already been edited (119:17 – "', { enumerable: false, value: true })
return __returned__
}

})
import { createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createBlock as _createBlock, normalizeClass as _normalizeClass, createTextVNode as _createTextVNode, createStaticVNode as _createStaticVNode } from "vue"

const _hoisted_1 = { class: "app m-0 h-full flex flex-col items-center" }
const _hoisted_2 = { class: "header" }
const _hoisted_3 = { class: "header-items" }
const _hoisted_4 = { class: "flex flex-1 h-fit" }
const _hoisted_5 = /*#__PURE__*/_createElementVNode("h1", { class: "font-semibold text-3xl" }, "Wordle", -1)
const _hoisted_6 = { class: "flex flex-1 h-fit justify-end" }
const _hoisted_7 = { class: "game w-full flex flex-col items-center justify-center" }
const _hoisted_8 = { class: "card-list grid grid-cols-3 w-full overflow-hidden" }
const _hoisted_9 = {
  ref: "info-box",
  class: "overlay"
}
const _hoisted_10 = { class: "boxx p-5" }
const _hoisted_11 = { class: "flex items-center mb-4" }
const _hoisted_12 = /*#__PURE__*/_createElementVNode("h2", { class: "flex-1 font-semibold" }, "HOW TO PLAY", -1)
const _hoisted_13 = /*#__PURE__*/_createStaticVNode("<p class="font-light text-sm mb-2">Inspired by <a href="https://www.nytimes.com/games/wordle/index.html">Wordle</a> and <a href="https://letterboxd.com/tobiasandersen2/list/random-movie-roulette/">this list</a>.</p><p class="font-light text-sm mb-2">Every day there&#39;s a new random set of films from the 2000 most popular on Letterboxd.</p><p class="font-light text-sm mb-2">After you select a film, you can choose to select another, but you can&#39;t go back. If you want to stop, just click confirm</p>", 3)
const _hoisted_16 = {
  ref: "settings-box",
  class: "overlay"
}
const _hoisted_17 = { class: "boxx p-5" }
const _hoisted_18 = { class: "flex items-center mb-4" }
const _hoisted_19 = /*#__PURE__*/_createElementVNode("h2", { class: "flex-1 font-semibold" }, "SETTINGS", -1)
const _hoisted_20 = /*#__PURE__*/_createElementVNode("p", { class: "font-light text-sm mb-2" }, "Settings and new sets of films coming in the future!", -1)

function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock("div", _hoisted_1, [
    _createElementVNode("div", _hoisted_2, [
      _createElementVNode("div", _hoisted_3, [
        _createElementVNode("div", _hoisted_4, [
          _createElementVNode("img", {
            src: "/__NUXT_BASE__/assets/info.svg",
            class: "icon",
            onClick: _cache[0] || (_cache[0] = $event => ($options.open(_ctx.info-_ctx.box)))
          })
        ]),
        _hoisted_5,
        _createElementVNode("div", _hoisted_6, [
          _createElementVNode("img", {
            src: "/__NUXT_BASE__/assets/settings.svg",
            class: "icon",
            onClick: _cache[1] || (_cache[1] = $event => ($options.open(_ctx.settings-_ctx.box)))
          })
        ])
      ])
    ]),
    _createElementVNode("div", _hoisted_7, [
      _createElementVNode("div", _hoisted_8, [
        (_openBlock(true), _createElementBlock(_Fragment, null, _renderList($data.films, (film, i) => {
          return (_openBlock(), _createBlock($setup["Card"], {
            film: film,
            i: i,
            key: i,
            onFlip: $options.grayFilm
          }, null, 8, ["film", "i", "onFlip"]))
        }), 128))
      ]),
      _createElementVNode("div", {
        class: _normalizeClass(["button my-6", { '")
file: C:/Users/maia/Desktop/lboxdroulette/nuxt-app/app.vue


 ERROR  Cannot split a chunk that has already been edited (119:17 – "', { enumerable: false, value: true })   14:55:38
return __returned__
}

})
import { createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createBlock as _createBlock, normalizeClass as _normalizeClass, createTextVNode as _createTextVNode, createStaticVNode as _createStaticVNode } from "vue"

const _hoisted_1 = { class: "app m-0 h-full flex flex-col items-center" }
const _hoisted_2 = { class: "header" }
const _hoisted_3 = { class: "header-items" }
const _hoisted_4 = { class: "flex flex-1 h-fit" }
const _hoisted_5 = /*#__PURE__*/_createElementVNode("h1", { class: "font-semibold text-3xl" }, "Wordle", -1)
const _hoisted_6 = { class: "flex flex-1 h-fit justify-end" }
const _hoisted_7 = { class: "game w-full flex flex-col items-center justify-center" }
const _hoisted_8 = { class: "card-list grid grid-cols-3 w-full overflow-hidden" }
const _hoisted_9 = {
  ref: "info-box",
  class: "overlay"
}
const _hoisted_10 = { class: "boxx p-5" }
const _hoisted_11 = { class: "flex items-center mb-4" }
const _hoisted_12 = /*#__PURE__*/_createElementVNode("h2", { class: "flex-1 font-semibold" }, "HOW TO PLAY", -1)
const _hoisted_13 = /*#__PURE__*/_createStaticVNode("<p class="font-light text-sm mb-2">Inspired by <a href="https://www.nytimes.com/games/wordle/index.html">Wordle</a> and <a href="https://letterboxd.com/tobiasandersen2/list/random-movie-roulette/">this list</a>.</p><p class="font-light text-sm mb-2">Every day there&#39;s a new random set of films from the 2000 most popular on Letterboxd.</p><p class="font-light text-sm mb-2">After you select a film, you can choose to select another, but you can&#39;t go back. If you want to stop, just click confirm</p>", 3)
const _hoisted_16 = {
  ref: "settings-box",
  class: "overlay"
}
const _hoisted_17 = { class: "boxx p-5" }
const _hoisted_18 = { class: "flex items-center mb-4" }
const _hoisted_19 = /*#__PURE__*/_createElementVNode("h2", { class: "flex-1 font-semibold" }, "SETTINGS", -1)
const _hoisted_20 = /*#__PURE__*/_createElementVNode("p", { class: "font-light text-sm mb-2" }, "Settings and new sets of films coming in the future!", -1)

function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock("div", _hoisted_1, [
    _createElementVNode("div", _hoisted_2, [
      _createElementVNode("div", _hoisted_3, [
        _createElementVNode("div", _hoisted_4, [
          _createElementVNode("img", {
            src: "/__NUXT_BASE__/assets/info.svg",
            class: "icon",
            onClick: _cache[0] || (_cache[0] = $event => ($options.open(_ctx.info-_ctx.box)))
          })
        ]),
        _hoisted_5,
        _createElementVNode("div", _hoisted_6, [
          _createElementVNode("img", {
            src: "/__NUXT_BASE__/assets/settings.svg",
            class: "icon",
            onClick: _cache[1] || (_cache[1] = $event => ($options.open(_ctx.settings-_ctx.box)))
          })
        ])
      ])
    ]),
    _createElementVNode("div", _hoisted_7, [
      _createElementVNode("div", _hoisted_8, [
        (_openBlock(true), _createElementBlock(_Fragment, null, _renderList($data.films, (film, i) => {
          return (_openBlock(), _createBlock($setup["Card"], {
            film: film,
            i: i,
            key: i,
            onFlip: $options.grayFilm
          }, null, 8, ["film", "i", "onFlip"]))
        }), 128))
      ]),
      _createElementVNode("div", {
        class: _normalizeClass(["button my-6", { '")

  return __returned__
  }

  })
  import { createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createBlock as _createBlock, normalizeClass as _normalizeClass, createTextVNode as _createTextVNode, createStaticVNode as _createStaticVNode } from "vue"

  const _hoisted_1 = { class: "app m-0 h-full flex flex-col items-center" }
  const _hoisted_2 = { class: "header" }
  const _hoisted_3 = { class: "header-items" }
  const _hoisted_4 = { class: "flex flex-1 h-fit" }
  const _hoisted_5 = /*#__PURE__*/_createElementVNode("h1", { class: "font-semibold text-3xl" }, "Wordle", -1)
  const _hoisted_6 = { class: "flex flex-1 h-fit justify-end" }
  const _hoisted_7 = { class: "game w-full flex flex-col items-center justify-center" }
  const _hoisted_8 = { class: "card-list grid grid-cols-3 w-full overflow-hidden" }
  const _hoisted_9 = {
  ref: "info-box",
  class: "overlay"
  }
  const _hoisted_10 = { class: "boxx p-5" }
  const _hoisted_11 = { class: "flex items-center mb-4" }
  const _hoisted_12 = /*#__PURE__*/_createElementVNode("h2", { class: "flex-1 font-semibold" }, "HOW TO PLAY", -1)
  const _hoisted_13 = /*#__PURE__*/_createStaticVNode("<p class="font-light text-sm mb-2">Inspired by <a href="https://www.nytimes.com/games/wordle/index.html">Wordle</a> and <a href="https://letterboxd.com/tobiasandersen2/list/random-movie-roulette/">this list</a>.</p><p class="font-light text-sm mb-2">Every day there&#39;s a new random set of films from the 2000 most popular on Letterboxd.</p><p class="font-light text-sm mb-2">After you select a film, you can choose to select another, but you can&#39;t go back. If you want to stop, just click confirm</p>", 3)
  const _hoisted_16 = {
  ref: "settings-box",
  class: "overlay"
  }
  const _hoisted_17 = { class: "boxx p-5" }
  const _hoisted_18 = { class: "flex items-center mb-4" }
  const _hoisted_19 = /*#__PURE__*/_createElementVNode("h2", { class: "flex-1 font-semibold" }, "SETTINGS", -1)
  const _hoisted_20 = /*#__PURE__*/_createElementVNode("p", { class: "font-light text-sm mb-2" }, "Settings and new sets of films coming in the future!", -1)

  function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock("div", _hoisted_1, [
  _createElementVNode("div", _hoisted_2, [
  _createElementVNode("div", _hoisted_3, [
  _createElementVNode("div", _hoisted_4, [
  _createElementVNode("img", {
  src: "/__NUXT_BASE__/assets/info.svg",
  class: "icon",
  onClick: _cache[0] || (_cache[0] = $event => ($options.open(_ctx.info-_ctx.box)))
  })
  ]),
  _hoisted_5,
  _createElementVNode("div", _hoisted_6, [
  _createElementVNode("img", {
  src: "/__NUXT_BASE__/assets/settings.svg",
  class: "icon",
  onClick: _cache[1] || (_cache[1] = $event => ($options.open(_ctx.settings-_ctx.box)))
  })
  ])
  ])
  ]),
  _createElementVNode("div", _hoisted_7, [
  _createElementVNode("div", _hoisted_8, [
  (_openBlock(true), _createElementBlock(_Fragment, null, _renderList($data.films, (film, i) => {
  return (_openBlock(), _createBlock($setup["Card"], {
  film: film,
  i: i,
  key: i,
  onFlip: $options.grayFilm
  }, null, 8, ["film", "i", "onFlip"]))
  }), 128))
  ]),
  _createElementVNode("div", {
  class: _normalizeClass(["button my-6", { '")
  at MagicString._splitChunk (/C:/Users/maia/Desktop/lboxdroulette/nuxt-app/node_modules/@nuxt/vite-builder/node_modules/magic-string/dist/magic-string.es.mjs:895:10)
  at MagicString._split (/C:/Users/maia/Desktop/lboxdroulette/nuxt-app/node_modules/@nuxt/vite-builder/node_modules/magic-string/dist/magic-string.es.mjs:885:43)
  at MagicString.overwrite (/C:/Users/maia/Desktop/lboxdroulette/nuxt-app/node_modules/@nuxt/vite-builder/node_modules/magic-string/dist/magic-string.es.mjs:668:8)
  at /C:/Users/maia/Desktop/lboxdroulette/nuxt-app/node_modules/@nuxt/vite-builder/node_modules/magic-string/dist/magic-string.es.mjs:1052:11
  at Array.forEach (<anonymous>)
  at MagicString.replace (/C:/Users/maia/Desktop/lboxdroulette/nuxt-app/node_modules/@nuxt/vite-builder/node_modules/magic-string/dist/magic-string.es.mjs:1050:12)
  at Object.transform (/C:/Users/maia/Desktop/lboxdroulette/nuxt-app/node_modules/@nuxt/vite-builder/dist/index.mjs:200:11)
  at node_modulesrollupdistsharedrollup.js:22834:37

error Command failed with exit code 1.

Leave a Comment