Illegal tag name. Use '<' to print '<'. on nuxt project
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 dev, as 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 '<' 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)
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'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'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'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'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'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'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'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'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.
Solution
The error in the title is coming from the fact that
import vue from '@vitejs/plugin-vue'
is redundant in a Nuxt project, the rest is probably coming from the imports done like
import csv from "./assets/film_list.csv";
rather than
import csv from "~/assets/film_list.csv";
More info is available on the documentation.
Alright, I just spent too much time cleaning your project.
There is quite a lot of things done wrongly there.
So yeah, not sure if this is somehow listable but here is a diff (without counting the additions) to have something clean and working.
- I want to create a login with a cookie and check the database if I am logged in, but the cookie is not created, I don't know where I went wrong
- how to combine VueDatePicker and v-maska
- How to set a unique ID for each component instance?
- Focus on next field on pressing enter key in Vuejs
- Using Vuetify classes within SASS
- Using axios in Nuxt asyncData lose token on browser refresh
- How to use background-image in inline styles in Nuxt.js
- How to configure @nuxt/tailwind + typography with dark mode
- Vue 2 - ESLint + Standard + Prettier
- Share image via social media from PWA
- How to make an infinite scroll/loader in Nuxt?
- What sizes to put for Nuxt Img module and Bootstrap grid columns?
- Problem to generate the client generator component of API Patform with nuxt.js
- Rerender vue-chart in a nuxt.js project
- Square bracket notation for custom classes from Tailwind doesn't work in a Nuxt application
- How to use any icons with Nuxt or Vue?
- Illegal tag name. Use '&lt;' to print '<'. on nuxt project
- How to convert some Nuxt code into some Vue?
- No Overload Matches this call with Vue 3 ref<T>
- Fetch all nested content files and group them by directories in Nuxt content
- How to use Vue router inside of Laravel?
- Nuxt 3 - How to refresh fetched data every n minutes
- My vue.js nav will not navigate to other pages, just reloads the same page
- VueJs route match params only from list (Validate params value)
- How to make v-stepper-step size large in Vuetify?
- Registering a plain JS object as Vue component: "Failed to resolve component:"
- Property 'env' does not exist on type 'ImportMeta'.ts(2339)
- Adding TailwindCSS association to Vue file to disable "css(unknownAtRules): Unknown at rule @apply"
- Unable to use structuredClone() on value of ref variable
- Setting a checkbox as checked if method returns true