\r\n \u003CComponentB />\r\n \u003CAsyncComponent />\r\n \u003C/ClientOnly>\r\n\u003C/template>\r\n```\n\n### Additional context\n\nWhen not using `\u003CClientOnly>`, the `defineAsyncComponent` component will be pre-resolved so we can't see the issue at the first loading. (but I think the issue will also exist during page change) \n\n### Logs\n\n_No response_",[2008,2011,2012],{"name":2009,"color":2010},"3.x","29bc7f",{"name":1984,"color":1985},{"name":2013,"color":2014},"upstream","E8A36D",15648,"loadingComponent property from defineAsyncComponent is ignored","2023-01-19T18:34:58Z","https://github.com/nuxt/nuxt/issues/15648",0.64012486,{"description":2021,"labels":2022,"number":2036,"owner":1990,"repository":1990,"state":1991,"title":2037,"updated_at":2038,"url":2039,"score":2040},"### Environment\n\n```\r\nWorking directory: /home/projects/nuxt-starter-ta6mqt\r\nNuxt project info:\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.9.3\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n```\n\n### Reproduction\n\n[Reproduction repository](https://stackblitz.com/edit/nuxt-starter-ta6mqt)\r\n\r\n- run `npm run build && npm run preview`\r\n- access the page and look at the HTML response\r\n- notice that the styles for both `layout.vue` and `AsyncCompParent.vue` are NOT inlined in the response\r\n\n\n### Describe the bug\n\nThere seems to be an issue when using a common mapping object to create associations to various components that need to be loaded dynamically.\r\n\r\nThis is a rather complex system so please follow along carefully.\r\n- we have an enum in `@/utils/name-map.js`\r\n- this enum is used in a parent component (`AsyncCompParent`) that will decide which other component to render based on an association map\r\n - these child components (`ChildComponentA`) are declared using `defineAsyncComponent` in order to achieve code splitting\r\n- The async component (`ChildComponentA`) uses a composable (`useSayMyName.js`) that, in turn, ALSO imports the enum\r\n\r\nThe setup above will cause the following:\r\n- no styles declared in `AsyncCompParent` are inlined in the SSR HTML response\r\n- no styles in `layout.vue` (which is the _parent_ of `AsyncCompParent`) are inlined in the SSR HTML response\r\n\r\n#### Expected behaviour\r\nThe styles for `layout.vue` and `AsyncCompParent.vue` should be inlined in the SSR HTML response, since these components are always present on the page and rendered at load time.\r\n\n\n### Additional context\n\nThe repo above is an extremely simplified version of code we ported from a Nuxt 2 app, where it functions as expected.\r\n\r\nMore background / things we discovered:\r\n- if, in any of the two files that import from `@/utils/name-map`, we instead redeclare a local copy of that constant, the build goes ahead as expected and the CSS is inlined (see comment in the code)\r\n- if we don't use `defineAsycnComponent`, and just use plain a `import` statement for `ChildComponentA`, the build goes ahead as expected\r\n- if we don't import `useSayMyName` in `ChildComponentA`, and instead import the enum directly there, the build goes ahead as expected\r\n\r\nNone of the options presented above are valid alternatives for us given the complexity of our code and, to be fair, I don't think we are doing any illegal coding patterns - this feels like a very common use-case for example when you want to trigger various flows from the same component and don't want the flow code to be included in the bundle since they might never be triggered.\n\n### Logs\n\n_No response_",[2023,2024,2027,2030,2033],{"name":2009,"color":2010},{"name":2025,"color":2026},"bug","d73a4a",{"name":2028,"color":2029},"vite","3574D1",{"name":2031,"color":2032},"🔨 p3-minor","FBCA04",{"name":2034,"color":2035},"inline styles","68AF97",25451,"On production build, CSS does not get inlined in SSR response in some cases when using `defineAsyncComponent`","2024-01-28T21:27:19Z","https://github.com/nuxt/nuxt/issues/25451",0.6417835,{"description":2042,"labels":2043,"number":2045,"owner":1990,"repository":1990,"state":1991,"title":2046,"updated_at":2047,"url":2048,"score":2049},"I have load editor component async like bellow:\r\n```\r\n...\r\nasync created () {\r\n const editor = await import('~/components/editor.vue')\r\n Vue.component('editor', editor)\r\n}\r\n...\r\n```\r\n\r\nbut when I upgrade the nuxt version to `^1.0.0-rc8` , the editor component can't load, has some where changed?\r\n\r\nthe source code is here https://github.com/awesomes-cn/new-awesomes/blob/master/components/comment.vue#L184\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/c1442\">#c1442\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2044],{"name":1987,"color":1988},1615,"new version nuxt not surpport async component?","2023-01-18T15:42:01Z","https://github.com/nuxt/nuxt/issues/1615",0.6454461,{"description":2051,"labels":2052,"number":2054,"owner":1990,"repository":1990,"state":1991,"title":2055,"updated_at":2056,"url":2057,"score":2058},"I have this bit of code in one of my SSR plugins:\r\n\r\n```js\r\nlet ScrollSnap = null\r\nif (process.browser) {\r\n (async function () {\r\n ScrollSnap = await import('./ScrollSnap')\r\n })()\r\n}\r\n```\r\n\r\nBut when running the server, I get this error:\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\npages/index.7e17fc3259340ada06a8.js:244\r\n return import('./ScrollSnap');\r\n ^^^^^^\r\n\r\nSyntaxError: Unexpected token import\r\n at getCompiledScript (/path/to/project/node_modules/vue-server-renderer/build.js:7714:18)\r\n at evaluateModule (/path/to/project/node_modules/vue-server-renderer/build.js:7729:18)\r\n at r (/path/to/project/node_modules/vue-server-renderer/build.js:7737:16)\r\n at Function.requireEnsure [as e] (server-bundle.js:41:25)\r\n at _a7b33a52 (server-bundle.js:2880:29)\r\n at /path/to/project/node_modules/vue-router/dist/vue-router.common.js:1711:17\r\n at /path/to/project/node_modules/vue-router/dist/vue-router.common.js:1738:66\r\n at Array.map (\u003Canonymous>)\r\n at /path/to/project/node_modules/vue-router/dist/vue-router.common.js:1738:38\r\n at Array.map (\u003Canonymous>)\r\n at flatMapComponents (/path/to/project/node_modules/vue-router/dist/vue-router.common.js:1737:26)\r\n at /path/to/project/node_modules/vue-router/dist/vue-router.common.js:1673:5\r\n at iterator (/path/to/project/node_modules/vue-router/dist/vue-router.common.js:1872:7)\r\n at step (/path/to/project/node_modules/vue-router/dist/vue-router.common.js:1654:9)\r\n at step (/path/to/project/node_modules/vue-router/dist/vue-router.common.js:1658:9)\r\n at runQueue (/path/to/project/node_modules/vue-router/dist/vue-router.common.js:1662:3)\r\n```\r\n\r\nI looks like Nuxt.js is using `babel-preset-vue-app` which uses `babel-plugin-syntax-dynamic-import`, so I was surprised by this not working...\r\n\r\nBut then I realized it happens on the Node.js side of things, so I tried to install `babel-plugin-dynamic-import-node` and use it in Babel by adding this to my `nuext.config.js`, but that didn't have any effect either:\r\n\r\n```js\r\n babel: {\r\n plugins: [\r\n 'dynamic-import-node'\r\n ]\r\n }\r\n```\r\n\r\nWhat am I missing? Is there a way to get the `vue-server-renderer` to use the same babel configuration as the browser?\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/c1436\">#c1436\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2053],{"name":1987,"color":1988},1607,"Dynamic imports not working in vue-server-renderer","2023-01-18T15:42:00Z","https://github.com/nuxt/nuxt/issues/1607",0.64634967,{"labels":2060,"number":2062,"owner":1990,"repository":1990,"state":1991,"title":2063,"updated_at":2064,"url":2065,"score":2066},[2061],{"name":2009,"color":2010},13349,"All components are wrapped into defineAsyncComponent","2023-01-19T16:53:07Z","https://github.com/nuxt/nuxt/issues/13349",0.64935976,{"labels":2068,"number":2074,"owner":1990,"repository":1990,"state":1991,"title":2001,"updated_at":2075,"url":2076,"score":2077},[2069,2072,2073],{"name":2070,"color":2071},"stale","ffffff",{"name":1984,"color":1985},{"name":1987,"color":1988},6622,"2023-01-22T15:34:46Z","https://github.com/nuxt/nuxt/issues/6622",0.6519019,{"labels":2079,"number":2081,"owner":1990,"repository":1990,"state":1991,"title":2082,"updated_at":2083,"url":2084,"score":2085},[2080],{"name":1987,"color":1988},9641,"third party library, lazy loading, dev server complains, static build is fine","2023-01-18T15:28:51Z","https://github.com/nuxt/nuxt/issues/9641",0.6545891,{"description":2087,"labels":2088,"number":2090,"owner":1990,"repository":1990,"state":1991,"title":2091,"updated_at":2092,"url":2093,"score":2094},"Hi,\r\n\r\nI'm trying to use async await axios in current nuxt components which have stopped working as of now,\r\n\r\nHere goes the repo to reproduce https://github.com/pulkitnandan/bugNuxt\r\nand this has happened before @ this https://github.com/nuxt/nuxt.js/issues/84\r\n\r\nPlease have 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/c310\">#c310\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2089],{"name":1987,"color":1988},359,"async await axios not working in current nuxt components","2023-01-18T15:38:48Z","https://github.com/nuxt/nuxt/issues/359",0.6608217,["Reactive",2096],{},["Set"],["ShallowReactive",2099],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"jOnP2qpNyyMiyErpYjAzjaXMDgqCXt6phYaiLzM030c":-1},"/nuxt/nuxt/2198"]