\r\n\u003C/template>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\nimport { defineProps, defineAsyncComponent } from 'vue';\r\n\r\ninterface Props {\r\n component: {\r\n module: string;\r\n file: string;\r\n };\r\n}\r\n\r\nconst props = defineProps\u003CProps>();\r\n\r\nconst componentLoader = defineAsyncComponent({\r\n loader: () => import(`./modules/${props.component.module}/components/${props.component.file}`),\r\n delay: 100,\r\n});\r\n\u003C/script>\r\n```\r\n\r\nInitialization looks like that.\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003Ccomponent-provider :component=\"form\" />\r\n\u003C/template>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\nconst form: DynamicComponent = reactive({\r\n module: 'auth',\r\n file: 'forms/Main.vue'\r\n})\r\n\u003C/script>\r\n```\r\n\r\nBut it ends with an error.\r\n\r\n```\r\nUncaught (in promise) TypeError: Failed to fetch dynamically imported module: http://localhost:4000/_nuxt/modules/base/components/providers/modules/auth/components/forms/Main.vue?import\r\n```\r\n\r\nAnd Vue warn.\r\n\r\n```\r\n[Vue warn]: Unhandled error during execution of async component loader \r\n```\r\n\r\nSo as you can see the path is wrong because it adds `modules/base/components/providers` (which is providers one) at the beginning. \r\n\r\n**Stack**:\r\n* Nuxt `3.0.0-rc.13`\r\n* Node `16.14.2` (npm `8.7.0`)",[2902],{"name":2903,"color":2904},"documentation","5319e7",15448,"nuxt","open","Dynamic component imports doesn't work","2024-11-30T16:12:15Z","https://github.com/nuxt/nuxt/issues/15448",0.65493566,{"description":2913,"labels":2914,"number":2918,"owner":2906,"repository":2906,"state":2919,"title":2920,"updated_at":2921,"url":2922,"score":2923},"Hi,\r\n\r\nI'm getting this error, using import in a mixin.\r\n\r\n```\r\n[vue-router] Failed to resolve async component default: SyntaxError: Unexpected token import\r\n[vue-router] uncaught error during route navigation:\r\nC:\\Program Files (x86)\\Ampps\\www\\2\\node_modules\\smooth-scrolling\\index.js:1\r\n(function (exports, require, module, __filename, __dirname) { import classes from 'dom-classes'\r\n ^^^^^^\r\n\r\nSyntaxError: Unexpected token import\r\n at createScript (vm.js:56:10)\r\n at Object.runInThisContext (vm.js:97:10)\r\n at Module._compile (module.js:542:28)\r\n at Object.Module._extensions..js (module.js:579:10)\r\n at Module.load (module.js:487:32)\r\n at tryModuleLoad (module.js:446:12)\r\n at Function.Module._load (module.js:438:3)\r\n at Module.require (module.js:497:17)\r\n at require (internal/module.js:20:19)\r\n at r (C:\\Program Files (x86)\\Ampps\\www\\2\\node_modules\\vue-server-renderer\\build.js:7758:16)\r\n at Object.\u003Canonymous> (server-bundle.js:4064:18)\r\n at __webpack_require__ (server-bundle.js:27:30)\r\n at Object.\u003Canonymous> (pages\\studio.59180a60d0b870bbbb46.js:387:75)\r\n at __webpack_require__ (server-bundle.js:27:30)\r\n at Object.\u003Canonymous> (pages\\studio.59180a60d0b870bbbb46.js:762:77)\r\n at __webpack_require__ (server-bundle.js:27:30)\r\n```\r\n\r\nAny idea why this is and how it can be fixed?\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2078\">#c2078\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2915],{"name":2916,"color":2917},"2.x","d4c5f9",2392,"closed","Unexpected token import","2023-01-18T15:55:11Z","https://github.com/nuxt/nuxt/issues/2392",0.6058993,{"description":2925,"labels":2926,"number":2928,"owner":2906,"repository":2906,"state":2919,"title":2929,"updated_at":2930,"url":2931,"score":2932},"Hello,\r\n\r\nI tried to integrate the vue-simplemde markdown editor (https://github.com/F-loat/vue-simplemde) in Nuxt and got this error:\r\n```\r\n nuxt:render Rendering url / +11m\r\n[vue-router] Failed to resolve async component default: SyntaxError: Unexpected token \u003C\r\n[vue-router] uncaught error during route navigation:\r\n/home/arno/Projekte/Arno/test/nuxt-lebensraum/node_modules/vue-simplemde/markdown-editor.vue:1\r\n(function (exports, require, module, __filename, __dirname) { \u003Ctemplate>\r\n ^\r\nSyntaxError: Unexpected token \u003C\r\n at Object.exports.runInThisContext (vm.js:76:16)\r\n at Module._compile (module.js:528:28)\r\n at Object.Module._extensions..js (module.js:565:10)\r\n at Module.load (module.js:473:32)\r\n at tryModuleLoad (module.js:432:12)\r\n at Function.Module._load (module.js:424:3)\r\n at Module.require (module.js:483:17)\r\n at require (internal/module.js:20:19)\r\n at Object.\u003Canonymous> (/home/arno/Projekte/Arno/test/nuxt-lebensraum/node_modules/vue-simplemde/index.js:6:22)\r\n at Module._compile (module.js:556:32)\r\n at Object.Module._extensions..js (module.js:565:10)\r\n at Module.load (module.js:473:32)\r\n at tryModuleLoad (module.js:432:12)\r\n at Function.Module._load (module.js:424:3)\r\n at Module.require (module.js:483:17)\r\n at require (internal/module.js:20:19)\r\n```\r\nThe import was done like this:\r\n```javascript\r\nimport { markdownEditor } from 'vue-simplemde'\r\nexport default {\r\n components: {\r\n markdownEditor\r\n }\r\n```\r\nwhile the template looked like this:\r\n```\r\n\u003Cmarkdown-editor v-model=\"content\" ref=\"markdownEditor\">\u003C/markdown-editor>\r\n```\r\nHas anyone an idea, how I could fix this problem? Thanks for having a look at this! :)\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c733\">#c733\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2927],{"name":2916,"color":2917},857,"Problem to implement vue-simplemde","2023-01-18T15:39:54Z","https://github.com/nuxt/nuxt/issues/857",0.6303701,{"description":2934,"labels":2935,"number":2937,"owner":2906,"repository":2906,"state":2919,"title":2938,"updated_at":2939,"url":2940,"score":2941},"While refreshing the page it throws error\r\n\r\n[vue-router] Failed to resolve async component default: SyntaxError: Unexpected token \u003C\r\n[vue-router] uncaught error during route navigation:\r\n/data/nuxt/node_modules/vue-date-picker/src/datepicker.vue:1\r\n(function (exports, require, module, __filename, __dirname) { \u003Cstyle scoped>\r\n^\r\n\r\nSyntaxError: Unexpected token \u003C\r\nat createScript (vm.js:74:10)\r\nat Object.runInThisContext (vm.js:116:10)\r\nat Module._compile (module.js:533:28)\r\nat Object.Module._extensions..js (module.js:580:10)\r\nat Module.load (module.js:503:32)\r\nat tryModuleLoad (module.js:466:12)\r\nat Function.Module._load (module.js:458:3)\r\nat Module.require (module.js:513:17)\r\nat require (internal/module.js:11:18)\r\nat r (/data/nuxt/node_modules/vue-server-renderer/build.js:7739:16)\r\nat Object. (server-bundle.js:4211:18)\r\nat webpack_require (server-bundle.js:27:30)\r\nat Object.129 (pages/modules/_module/add.515b290012e443c855fd.js:773:74)\r\nat webpack_require (server-bundle.js:27:30)\r\nat Object.128 (pages/modules/_module/add.515b290012e443c855fd.js:738:279)\r\nat webpack_require (server-bundle.js:27:30)\r\n\r\nMy code snippet is:\r\n_\r\n\r\n\u003Cscript> import Vue from 'vue' import datepicker from 'vue-date-picker' Vue.use(datepicker) export default { name: 'TextInput', props: ['data', 'modelData', 'readOnly'], data () { return { date: '' } }, components: { datepicker } \u003C/script> \n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1476\">#c1476\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2936],{"name":2916,"color":2917},1645,"Nuxt Js while refreshing date picker is not working([vue-router] Failed to resolve async component default: SyntaxError: Unexpected token \u003C)","2023-01-18T15:42:07Z","https://github.com/nuxt/nuxt/issues/1645",0.6352688,{"labels":2943,"number":2948,"owner":2906,"repository":2906,"state":2919,"title":2949,"updated_at":2950,"url":2951,"score":2952},[2944,2947],{"name":2945,"color":2946},"pending triage","E99695",{"name":2916,"color":2917},6151,"SyntaxError: nuxt/router.js: Support for the experimental syntax 'dynamicImport' isn't currently enabled","2023-01-22T15:34:44Z","https://github.com/nuxt/nuxt/issues/6151",0.6366188,{"labels":2954,"number":2964,"owner":2906,"repository":2906,"state":2919,"title":2965,"updated_at":2966,"url":2967,"score":2968},[2955,2958,2961],{"name":2956,"color":2957},"3.x","29bc7f",{"name":2959,"color":2960},"bug","d73a4a",{"name":2962,"color":2963},"vite","3574D1",13819,"ssr does not properly handle ` dynamic import` correctly in `onMounted`","2023-01-19T17:07:29Z","https://github.com/nuxt/nuxt/issues/13819",0.64186794,{"labels":2970,"number":2973,"owner":2906,"repository":2906,"state":2919,"title":2974,"updated_at":2975,"url":2976,"score":2977},[2971,2972],{"name":2956,"color":2957},{"name":2959,"color":2960},12655,"Async imports with variables throw error","2023-01-19T16:45:31Z","https://github.com/nuxt/nuxt/issues/12655",0.6459856,{"labels":2979,"number":2982,"owner":2906,"repository":2906,"state":2919,"title":2983,"updated_at":2984,"url":2985,"score":2986},[2980,2981],{"name":2956,"color":2957},{"name":2945,"color":2946},14047,"dynamic glob imports don't work in SSR","2023-01-19T17:32:47Z","https://github.com/nuxt/nuxt/issues/14047",0.64768803,{"description":2988,"labels":2989,"number":2995,"owner":2906,"repository":2996,"state":2919,"title":2997,"updated_at":2998,"url":2999,"score":3000},"",[2990,2992],{"name":2959,"color":2991},"ff281a",{"name":2993,"color":2994},"upstream","78BDDB",1820,"nuxt.com","bug: the `cmd + k` shortcut does not work in production","2025-03-28T16:36:36Z","https://github.com/nuxt/nuxt.com/issues/1820",0.6482751,{"description":3002,"labels":3003,"number":2995,"owner":2906,"repository":2906,"state":2919,"title":3005,"updated_at":3006,"url":3007,"score":3000},"I am trying to use vue-intersect in a nuxt project. vue-intersect is added as a standard node_module.\r\n \r\n/node_modules/vue-intersect/dist/index.js:1\r\n(function (exports, require, module, __filename, __dirname) { import Vue from 'vue';\r\n ^^^^^^\r\nSyntaxError: Unexpected token import\r\n at Object.exports.runInThisContext (vm.js:53:16)\r\n at Module._compile (module.js:513:28)\r\n at Object.Module._extensions..js (module.js:550:10)\r\n at Module.load (module.js:458:32)\r\n at tryModuleLoad (module.js:417:12)\r\n at Function.Module._load (module.js:409:3)\r\n at Module.require (module.js:468:17)\r\n at require (internal/module.js:20:19)\r\n\r\n\r\nMy build configuration is below in nuxt.config.js (have excluded the node_modules too)\r\n\r\nbuild: {\r\n /*\r\n ** Run ESLINT on save\r\n */\r\n extend (config, ctx) {\r\n if (ctx.dev && ctx.isClient) {\r\n config.module.rules.push({\r\n enforce: 'pre',\r\n test: /\\.(js|vue)$/,\r\n loader: 'eslint-loader'\r\n })\r\n }\r\n }, \r\n\r\nWhat do I need to do to get rid of this error?\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1636\">#c1636\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3004],{"name":2916,"color":2917},"I am getting an 'Unexpected token import' error ","2023-01-18T15:54:46Z","https://github.com/nuxt/nuxt/issues/1820",["Reactive",3009],{},["Set"],["ShallowReactive",3012],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fCLwMdIXCPQkY6ltd_i6BKp6MJMJgzkVTWC88Gq-HCb0":-1},"/nuxt/nuxt/1607"]