\n\u003C!-- OR -->\n\u003CIcon name=\"my-icon:a\" v-if=\"flag\" />\n\u003CIcon name=\"my-icon:b\" v-else />\n```\nin `nuxt.config.ts`\n```ts\nicon: {\n provider: 'server',\n customCollections: [\n {\n prefix: 'my-icon',\n dir: './assets/icon/svg',\n },\n ],\n},\n// ...\nnitro: {\n preset: 'static',\n},\n```\n\nIf toggle value of `flag`, \neverything works well in development, \nbut it throws 404 error for `my-icon:b` after building and generating.\n(it works well with `v-show`) \n\nProject info:\n```\n------------------------------\n- Operating System: Windows_NT\n- Node Version: v22.8.0\n- Nuxt Version: 3.16.0\n- CLI Version: 3.23.0\n- Nitro Version: 2.11.6\n- Package Manager: pnpm@9.9.0\n- Builder: -\n- User Config: modules, icon, colorMode, shadcn, fonts, googleSignIn, app, imports, css, vite, nitro, compatibilityDate, telemetry\n- Runtime Modules: @nuxtjs/tailwindcss@6.13.2, @nuxt/icon@1.11.0, @nuxt/fonts@0.11.0, @nuxt/image@1.9.0, @nuxt/eslint@1.2.0, @pinia/nuxt@0.10.1, pinia-plugin-persistedstate/nuxt@4.2.0, @nuxt/test-utils/module@3.17.2, @nuxtjs/color-mode@3.5.2, shadcn-nuxt@1.0.3, @vueuse/nuxt@13.0.0, nuxt-vue3-google-signin@0.0.11\n- Build Modules: -\n------------------------------\n```\n",[],380,"nuxt","icon","open","Local icon 404 after `nuxi generating` if with `:name=\"flag?'my-icon:icon-a':'my-icon:icon-b'\"`","2025-03-26T15:31:52Z","https://github.com/nuxt/icon/issues/380",0.65235543,{"description":1993,"labels":1994,"number":2001,"owner":1985,"repository":1985,"state":2002,"title":2003,"updated_at":2004,"url":2005,"score":2006},"### Version\n\n[v2.3.4](https://github.com/nuxt.js/releases/tag/v2.3.4)\n\n### Reproduction link\n\n[https://nuxtjs.org/](https://nuxtjs.org/)\n\n### Steps to reproduce\n\nRun: `yarn create nuxt-app project`\nChoose Linter and JestJs and SPA mode.\n\nWithout adding any additional content, run `yarn test`\n\n### What is expected ?\n\nI expect the default test to pass.\n\n### What is actually happening?\n\nI receive this error message:\n\n```\nyarn run v1.13.0\n$ jest\n FAIL test/Logo.spec.js\n ● Test suite failed to run\n\n Jest encountered an unexpected token\n\n This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.\n\n By default, if Jest sees a Babel config, it will use that to transform your files, ignoring \"node_modules\".\n\n Here's what you can do:\n • To have some of your \"node_modules\" files transformed, you can specify a custom \"transformIgnorePatterns\" in your config.\n • If you need a custom transformation specify a \"transform\" option in your config.\n • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the \"moduleNameMapper\" config option.\n\n You'll find more details and examples of these config options in the docs:\n https://jestjs.io/docs/en/configuration.html\n\n Details:\n\n /home/begueradj/Development/project/test/Logo.spec.js:1\n ({\"Object.\u003Canonymous>\":function(module,exports,require,__dirname,__filename,global,jest){import { mount } from '@vue/test-utils';\n ^\n\n SyntaxError: Unexpected token {\n\n at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)\n\nTest Suites: 1 failed, 1 total\nTests: 0 total\nSnapshots: 0 total\nTime: 0.803s\nRan all test suites.\nerror Command failed with exit code 1.\ninfo Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.\n```\n\n### Note\nThis occurs **only** when I move the content of project to an other folder where of course I remove `node_modes` and `.nuxt` folders.\n\nI **need** to copy the content of the generate folder to an other place because I am working with Git branches\n\n\n\n\u003C!--cmty-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This bug report is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c8573\">#c8573\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[1995,1998],{"name":1996,"color":1997},"pending triage","E99695",{"name":1999,"color":2000},"2.x","d4c5f9",4899,"closed","Default test does not pass","2023-01-22T15:30:09Z","https://github.com/nuxt/nuxt/issues/4899",0.6376029,{"description":2008,"labels":2009,"number":2010,"owner":1985,"repository":2011,"state":2002,"title":2012,"updated_at":2013,"url":2014,"score":1991},"Example in https://test-utils.nuxtjs.org/api-reference/app-testing not working. \r\nAfter run test get error:\r\n\r\n```\r\n/firsttest.spec.js:1\r\n({\"Object.\u003Canonymous>\":function(module,exports,require,__dirname,__filename,global,jest){import { get, setupTest } from '@nuxt/test-utils';\r\n\r\nSyntaxError: Cannot use import statement outside a module\r\n```\r\nmy setup:\r\n\r\nin jest.config.js\r\n```\r\nmodule.exports = {\r\n clearMocks: true,\r\n testMatch: [\r\n '*/__tests__/**/*.[jt]s?(x)',\r\n '**/?(*.)+(spec|test).[tj]s?(x)',\r\n '**/test/(*.)+(spec|test).js'],\r\n moduleNameMapper: {\r\n '^@/(.*)$': '\u003CrootDir>/$1',\r\n '^~/(.*)$': '\u003CrootDir>/$1',\r\n },\r\n moduleFileExtensions: ['js', 'vue', 'json'],\r\n testEnvironment: 'jsdom',\r\n transform: {\r\n '^.+\\\\.js$': 'babel-jest',\r\n '.*\\\\.(vue)$': 'vue-jest',\r\n },\r\n preset: '@nuxt/test-utils',\r\n}\r\n```\r\nin package.json\r\n```\r\n{\r\n \"name\": \"\",\r\n \"version\": \"1.0.0\",\r\n \"main\": \"index.js\",\r\n \"scripts\": {\r\n \"test\": \"node_modules/.bin/jest\"\r\n },\r\n \"author\": \"\",\r\n \"license\": \"\",\r\n \"dependencies\": {\r\n \"bootstrap\": \"^4.5.3\",\r\n \"bootstrap-vue\": \"^2.20.1\",\r\n \"nuxt\": \"^2.15.2\",\r\n\r\n },\r\n \"devDependencies\": {\r\n \"@babel/plugin-transform-modules-commonjs\": \"^7.12.1\",\r\n \"@nuxt/test-utils\": \"^0.2.0\",\r\n \"@vue/test-utils\": \"^1.1.1\",\r\n \"babel-jest\": \"^26.6.3\",\r\n \"jest\": \"^26.6.3\",\r\n \"vue-jest\": \"^3.0.7\"\r\n }\r\n}\r\n\r\n```\r\n\r\n\r\n",[],267,"test-utils","Example in https://test-utils.nuxtjs.org/api-reference/app-testing not working","2023-12-02T00:28:12Z","https://github.com/nuxt/test-utils/issues/267",{"description":2008,"labels":2016,"number":1984,"owner":1985,"repository":2011,"state":2002,"title":2012,"updated_at":2017,"url":2018,"score":1991},[],"2023-12-02T00:13:09Z","https://github.com/nuxt/test-utils/issues/380",{"description":2008,"labels":2020,"number":2021,"owner":1985,"repository":2011,"state":2002,"title":2012,"updated_at":2022,"url":2023,"score":1991},[],481,"2023-12-02T00:13:13Z","https://github.com/nuxt/test-utils/issues/481",{"description":2025,"labels":2026,"number":2030,"owner":1985,"repository":2011,"state":2002,"title":2031,"updated_at":2032,"url":2033,"score":2034},"Hello,\r\n\r\nI've created a simple nuxt app with a couple of pages and a couple of simple components. \r\n\r\nI've been able to successfully use @nuxt/test-util to integrate test these pages. However, soon as I change the style lang of one of the components from `css` to `scss`. It no longer passes. The test fail to run and I get the following error in the `setupTest`;\r\n\r\n```\r\n console.error\r\n ## There is an issue with `node-fibers` ##\r\n `/Users/xxxxx/learning/vue/nuxt-playground/node_modules/fibers/bin/darwin-x64-83/fibers.node` is missing.\r\n \r\n Try running this to fix the issue: /usr/local/Cellar/node/14.9.0/bin/node /Users/fawad.ali/learning/vue/nuxt-playground/node_modules/fibers/build\r\n\r\n at Object.\u003Canonymous> (node_modules/fibers/fibers.js:17:11)\r\n at getSassOptions (node_modules/sass-loader/dist/utils.js:140:25)\r\n at Object.loader (node_modules/sass-loader/dist/index.js:43:55)\r\n at LOADER_EXECUTION (node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:119:14)\r\n ```\r\n \r\n The app runs fine and the component does successfully style correctly when using `scss`.\r\n\r\nI'm bit lost as to what could be going wrong here. I've installed sass-loader@10.1.1 since that seems to be the required loader.\r\n\r\nMy jest.config.js currently looks like this;\r\n```\r\nmodule.exports = {\r\n preset: '@nuxt/test-utils',\r\n moduleNameMapper: {\r\n '^@/(.*)$': '\u003CrootDir>/src/$1'\r\n },\r\n moduleFileExtensions: [\r\n 'ts',\r\n 'js',\r\n 'vue',\r\n 'json'\r\n ],\r\n transform: {\r\n \"^.+\\\\.ts$\": \"ts-jest\",\r\n '^.+\\\\.js$': 'babel-jest',\r\n '.*\\\\.(vue)$': 'vue-jest',\r\n '.+\\\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':\r\n 'jest-transform-stub',\r\n },\r\n globals: {\r\n \"vue-jest\": {\r\n \"hideStyleWarn\": true,\r\n \"experimentalCSSCompile\": true,\r\n \"resources\": {\r\n \"scss\": [\r\n './assets/scss/main.scss'\r\n ]\r\n }\r\n }\r\n },\r\n transformIgnorePatterns: [\r\n 'node_modules/(?!(nuxt-i18n)/)'\r\n ],\r\n collectCoverage: true,\r\n collectCoverageFrom: [\r\n '\u003CrootDir>/components/**/*.vue',\r\n '\u003CrootDir>/pages/**/*.vue'\r\n ],\r\n setupFiles: [\r\n '\u003CrootDir>/jest.init.js'\r\n ],\r\n testEnvironment: 'jsdom',\r\n testMatch: ['**/?(*.)+(spec|test).[tj]s?(x)']\r\n}\r\n```\r\n\r\nAny help would be appreciated",[2027],{"name":2028,"color":2029},"v0","4137F6",338,"sass-loader issues for scss styled components","2024-05-01T16:04:33Z","https://github.com/nuxt/test-utils/issues/338",0.6575805,{"labels":2036,"number":2038,"owner":1985,"repository":1985,"state":2002,"title":2039,"updated_at":2040,"url":2041,"score":2042},[2037],{"name":1999,"color":2000},5164,"Cannot read property $loading of undefined when using jest with nuxt component","2023-01-18T20:10:44Z","https://github.com/nuxt/nuxt/issues/5164",0.66438085,{"description":2044,"labels":2045,"number":2048,"owner":1985,"repository":1985,"state":2002,"title":2049,"updated_at":2050,"url":2051,"score":2052},"### Version\n\n[v2.4.5](https://github.com/nuxt.js/releases/tag/v2.4.5)\n\n### Reproduction link\n\n[https://github.com/nuxt/create-nuxt-app](https://github.com/nuxt/create-nuxt-app)\n\n### Steps to reproduce\n\n1. Create a fresh Nuxt project with `npx create-nuxt-app test`\n2. Enable Jest\n3. Open the sample Logo.spec.js\n4. Add a Object spread syntax e.g. const test = { ...{foo: 'bar', baz: 'qux' } }\n5. Run the test with `npm run test`\n\n### What is expected ?\n\nTest to run properly \n\n### What is actually happening?\n\nTest fails with\n\n({\"Object.\u003Canonymous>\":function(module,exports,require,__dirname,__filename,global,jest){import defineProperty from \"./defineProperty\";\n\nSyntaxError: Unexpected identifier\n\n### Additional comments?\n\nThis is because [Nuxt's babel-preset-app](https://github.com/nuxt/nuxt.js/blob/dev/packages/babel-preset-app/src/index.js) configures @babel/plugin-transform-runtime to [always use ES modules](https://github.com/nuxt/nuxt.js/blob/dev/packages/babel-preset-app/src/index.js#L107). Jest is by default configured to not transform node_modules dependencies. So, while executing the runtime helper like the ObjectSpread helper, Jest runs into ES imports. Which it cannot understand and result in SyntaxError.\n\nVue Cli tackles this by using [process.env.VUE_CLI_BABEL_TRANSPILE_MODULES](https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/babel-preset-app/index.js#L158) which is [set to true](https://github.com/vuejs/vue-cli/blob/99761b350d37f4546bb2851fbe6f1b7e831f1b2a/packages/%40vue/cli-plugin-unit-jest/index.js#L14) when running test, therefore disabling the use of ES modules for @babel/plugin-transform-runtime.\n\nFor now, the easy fix for me was to not use `@nuxt/babel-preset-app` in .babelrc \n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This bug report is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c8771\">#c8771\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2046,2047],{"name":1996,"color":1997},{"name":1999,"color":2000},5159,"Unit test with Jest with Object spread syntax fails with SyntaxError","2023-01-22T15:33:01Z","https://github.com/nuxt/nuxt/issues/5159",0.66575986,{"description":2054,"labels":2055,"number":2056,"owner":1985,"repository":2011,"state":2002,"title":2057,"updated_at":2022,"url":2058,"score":2059},"Hi there\r\nI am looking for a way to integration test my nuxt app with Jest, that is using both the nuxt/content and vuex.\r\nDo you happen to have any examples for how to test these, or can you point me in the right direction?\r\nBest\r\nAgata",[],478,"Testing the nuxt/content module?","https://github.com/nuxt/test-utils/issues/478",0.6665968,{"description":2061,"labels":2062,"number":2073,"owner":1985,"repository":1985,"state":2002,"title":2074,"updated_at":2075,"url":2076,"score":2077},"I installed ts-loader into my nuxt.js app like so:\r\n`npm install ts-loader typescript`\r\n\r\nThen I tell vue-loader to use ts-loader for the script part:\r\n`\u003Cscript lang=\"ts\">`\r\n\r\nWhat I get is an error message:\r\n`error TS18002: The 'files' list in config file 'tsconfig.json' is empty.`\r\nor\r\n`error TS18003: No inputs were found in config file 'tsconfig.json'. Specified 'include' paths were '[\"**/*\"]' and 'exclude' paths were '[\"node_modules\",\"bower\r\n_components\",\"jspm_packages\"]'.`\r\nif I create the tsconfig.json file.\r\n\r\nHow can I configure typescript inside .vue files?\r\n\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This feature request is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c97\">#c97\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2063,2066,2069,2072],{"name":2064,"color":2065},"enhancement","8DEF37",{"name":2067,"color":2068},"question","cc317c",{"name":2070,"color":2071},"available soon","6de8b0",{"name":1999,"color":2000},121,"typescript support","2023-01-18T15:38:30Z","https://github.com/nuxt/nuxt/issues/121",0.66679883,["Reactive",2079],{},["Set"],["ShallowReactive",2082],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"lKCJHDyIZj_tOc-JqAyv4nPsqJ0J3qPvWvXzKBAatOk":-1},"/nuxt/test-utils/293"]