非法标记名称。使用“<”打印“<”。在 nuxt 项目上

Question

所以我有一个使用名为 dsv 的汇总插件的 nuxt3 项目，我认为在项目中安装了错误的 vite 或其他东西，因为当我尝试将它构建到生产环境时它给了我一个错误，这里是 github 项目如果有帮助，我不知道为什么会这样

我尝试删除 vite 配置上的 vue 插件，但在构建到生产环境时出现不同的错误 Cannot split a chunk that has already been edited (119:17 – "', { enumerable: false, value: true })，但在使用 npm run dev 时我没有得到任何错误，就像我拥有它时一样

// 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  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\@vue\compiler-core\dist\compiler-core.cjs.prod.js:18:19)
  at emitError (node_modules\@vue\compiler-core\dist\compiler-core.cjs.prod.js:1566:29)
  at parseAttributeValue (node_modules\@vue\compiler-core\dist\compiler-core.cjs.prod.js:1454:13)
  at parseAttribute (node_modules\@vue\compiler-core\dist\compiler-core.cjs.prod.js:1330:17)
  at parseAttributes (node_modules\@vue\compiler-core\dist\compiler-core.cjs.prod.js:1286:22)
  at parseTag (node_modules\@vue\compiler-core\dist\compiler-core.cjs.prod.js:1175:17)
  at parseElement (node_modules\@vue\compiler-core\dist\compiler-core.cjs.prod.js:1104:21)
  at parseChildren (node_modules\@vue\compiler-core\dist\compiler-core.cjs.prod.js:933:28)
  at Object.baseParse (node_modules\@vue\compiler-core\dist\compiler-core.cjs.prod.js:848:23)
  at Object.parse (node_modules\@vue\compiler-dom\dist\compiler-dom.cjs.prod.js:3034:25)

尝试了，但现在我在尝试构建生产环境时遇到了一个不同的错误，我提到过我在更改 vite 配置文件时遇到了这个错误，仍然不确定为什么，但是当用于开发时它没有'不再报错

// 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_modules\rollup\dist\shared\rollup.js:22834:37

error Command failed with exit code 1.

Answer 1

以下 previously given to you, I've used @rollup/plugin-dsv even tho other transforms 也存在（可能更灵活，支持更好）。

所以，在 yarn add -D @rollup/plugin-dsv 之后，我在 nuxt.config.ts

中设置了这个配置

// @ts-nocheck
import { defineNuxtConfig } from 'nuxt'
import dsv from '@rollup/plugin-dsv'

export default defineNuxtConfig({
  vite: {
    plugins: [dsv()]
  }
})

可以看到，可以直接将vite配置传给Nuxt文件

然后，用下面的film_list.csv文件

name,year,href,src
Parasite,2019,parasite-2019,film-poster/4/2/6/4/0/6/426406-parasite-0-460-0-690-crop.jpg

像这样效果很好

<script setup>
import csv from './film_list.csv'
console.log('csv', csv)
</script>

<template>
  <pre>{{ csv }}</pre>
</template>

并且与 yarn generate

的生成效果也很好

正如您在 Netlify 上看到的实时版本

这里是 Github repo 重现工作设置。

Answer 2

标题中的错误是因为

import vue from '@vitejs/plugin-vue'

在 Nuxt 项目中是多余的，其余的可能来自像

这样的导入

import csv from "./assets/film_list.csv";

而不是

import csv from "~/assets/film_list.csv";

可在 the documentation 上获得更多信息。

好吧，我只是花了 太多时间 清理你的项目。
那里做错了很多事。

所以是的，不确定这是否可以列出，但这里有一个差异（不计算添加）让一些东西干净和工作。

可在此处获取存储库：https://github.com/kissu/lboxd-roulette/tree/main

非法标记名称。使用“<”打印“<”。在 nuxt 项目上

Illegal tag name. Use '<' to print '<'. on nuxt project

vue.js

nuxt.js

vite

nuxtjs3

非法标记名称。使用“<”打印“<”。在 nuxt 项目上

Illegal tag name. Use '&lt;' to print '<'. on nuxt project

vue.js

nuxt.js

vite

nuxtjs3

Illegal tag name. Use '<' to print '<'. on nuxt project