\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`)",[1984],{"name":1985,"color":1986},"documentation","5319e7",15448,"nuxt","open","Dynamic component imports doesn't work","2024-11-30T16:12:15Z","https://github.com/nuxt/nuxt/issues/15448",0.65426624,{"description":1995,"labels":1996,"number":2000,"owner":1988,"repository":1988,"state":2001,"title":2002,"updated_at":2003,"url":2004,"score":2005},"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>",[1997],{"name":1998,"color":1999},"2.x","d4c5f9",2392,"closed","Unexpected token import","2023-01-18T15:55:11Z","https://github.com/nuxt/nuxt/issues/2392",0.59001744,{"labels":2007,"number":2014,"owner":1988,"repository":1988,"state":2001,"title":2015,"updated_at":2016,"url":2017,"score":2018},[2008,2011],{"name":2009,"color":2010},"3.x","29bc7f",{"name":2012,"color":2013},"bug","d73a4a",12655,"Async imports with variables throw error","2023-01-19T16:45:31Z","https://github.com/nuxt/nuxt/issues/12655",0.63327706,{"description":2020,"labels":2021,"number":2023,"owner":1988,"repository":1988,"state":2001,"title":2024,"updated_at":2025,"url":2026,"score":2027},"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>",[2022],{"name":1998,"color":1999},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.635079,{"description":2029,"labels":2030,"number":2032,"owner":1988,"repository":1988,"state":2001,"title":2033,"updated_at":2034,"url":2035,"score":2036},"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>",[2031],{"name":1998,"color":1999},857,"Problem to implement vue-simplemde","2023-01-18T15:39:54Z","https://github.com/nuxt/nuxt/issues/857",0.6359286,{"labels":2038,"number":2043,"owner":1988,"repository":1988,"state":2001,"title":2044,"updated_at":2045,"url":2046,"score":2047},[2039,2042],{"name":2040,"color":2041},"pending triage","E99695",{"name":1998,"color":1999},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.6364707,{"labels":2049,"number":2055,"owner":1988,"repository":1988,"state":2001,"title":2056,"updated_at":2057,"url":2058,"score":2059},[2050,2051,2052],{"name":2009,"color":2010},{"name":2012,"color":2013},{"name":2053,"color":2054},"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.6378366,{"description":2061,"labels":2062,"number":2068,"owner":1988,"repository":2069,"state":2001,"title":2070,"updated_at":2071,"url":2072,"score":2073},"",[2063,2065],{"name":2012,"color":2064},"ff281a",{"name":2066,"color":2067},"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.6491101,{"description":2075,"labels":2076,"number":2068,"owner":1988,"repository":1988,"state":2001,"title":2078,"updated_at":2079,"url":2080,"score":2073},"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>",[2077],{"name":1998,"color":1999},"I am getting an 'Unexpected token import' error ","2023-01-18T15:54:46Z","https://github.com/nuxt/nuxt/issues/1820",{"description":2082,"labels":2083,"number":2085,"owner":1988,"repository":1988,"state":2001,"title":2086,"updated_at":2087,"url":2088,"score":2089},"I created my own npm package. It contains es6 modules.\r\nI just import its in different pages.\r\nExample: `import sessionApi from 'my_package/src/api/session'`\r\n\r\nI fix `babel-loader` rule in config. Build is successful. But when I try open page, I see this error.\r\n```\r\n2018-02-01T20:14:30.747Z nuxt:render Rendering url /\r\n{ /.../nuxt_project/node_modules/my_package/src/api/session.js:1\r\n(function (exports, require, module, __filename, __dirname) { import apiClient from '../services/api-client'\r\n ^^^^^^\r\nSyntaxError: Unexpected token import\r\n at new Script (vm.js:51:7)\r\n at createScript (vm.js:138:10)\r\n at Object.runInThisContext (vm.js:199:10)\r\n at Module._compile (module.js:624:28)\r\n at Object.Module._extensions..js (module.js:671:10)\r\n at Module.load (module.js:573:32)\r\n at tryModuleLoad (module.js:513:12)\r\n at Function.Module._load (module.js:505:3)\r\n at Module.require (module.js:604:17)\r\n at require (internal/module.js:11:18)\r\n at r (/.../nuxt_project/node_modules/vue-server-renderer/build.js:8147:16)\r\n at Object.\u003Canonymous> (server-bundle.js:4648:18)\r\n at __webpack_require__ (webpack:/webpack/bootstrap 0305385e49828e49290b:25:0)\r\n at Object.\u003Canonymous> (app/store/session.js:1:0)\r\n at __webpack_require__ (webpack:/webpack/bootstrap 0305385e49828e49290b:25:0)\r\n at webpackContext (server-bundle.js:4534:9)\r\n at getModule (.nuxt/store.js:57:0)\r\n at Object.module.exports.map../index.js (.nuxt/store.js:41:0)\r\n at __webpack_require__ (webpack:/webpack/bootstrap 0305385e49828e49290b:25:0)\r\n at Object.\u003Canonymous> (.nuxt/index.js:1:0)\r\n at __webpack_require__ (webpack:/webpack/bootstrap 0305385e49828e49290b:25:0)\r\n at Object.\u003Canonymous> (.nuxt/server.js:1:0) statusCode: 500, name: 'SyntaxError' }\r\n```\r\n\r\n@alexchopin @pi0 @clarkdo I can't understand what the problem is. Help pls.\r\nI can't find this code in `.nuxt/`.\r\n```\r\n(function (exports, require, module, __filename, __dirname) { import apiClient from '../services/api-client'\r\n```\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/c2377\">#c2377\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2084],{"name":1998,"color":1999},2739,"SyntaxError: Unexpected token import","2023-01-18T16:02:37Z","https://github.com/nuxt/nuxt/issues/2739",0.64913744,["Reactive",2091],{},["Set"],["ShallowReactive",2094],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"CLwMdIXCPQkY6ltd_i6BKp6MJMJgzkVTWC88Gq-HCb0":-1},"/nuxt/nuxt/1607"]