Error when building on Linux (Windows works as expected)
I'm building my app (Nuxt 4) inside a Docker. Everything works fine on Windows, but on Linux I get a strange error. Any ideas?
[nuxi] ERROR Nuxt Build Error: [vite:vue] [@vue/compiler-sfc] Failed to resolve import source "~/components/datetime-input.vue".
/code/app/components/atta-form/input/datetime.vue
6 | config,
7 | ...attaFromInputProps
8 | } = defineProps<AttaFromInputProps & DatetimeInputProps>()
| ^^^^^^^^^^^^^^^^^^
9 | </script>
10 |
file: /code/app/components/atta-form/input/datetime.vue
at ScriptCompileContext.error (node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:19757:11)
at importSourceToScope (node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:22619:16)
at resolveTypeFromImport (node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:22572:23)
at innerResolveTypeReference (node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:22459:14)
at resolveTypeReference (node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:22447:20)
at innerResolveTypeElements (node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:22032:24)
at resolveTypeElements (node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:21972:20)
at node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:22005:31
...
app\components\atta-form\input\datetime.vue: <script setup lang="ts"> import type { AttaFromInputProps } from './index.vue' import type { DatetimeInputProps } from '~/components/datetime-input.vue' const { config, ...attaFromInputProps } = defineProps<AttaFromInputProps & DatetimeInputProps>() </script> app\components\datetime-input.vue: <script setup lang="ts"> import type { Options as FlatpickrOptions } from 'flatpickr/dist/types/options' export type DatetimeInputProps = { config?: Partial<FlatpickrOptions> } const model = defineModel<string>() const { config } = defineProps<DatetimeInputProps>() </script>
app\components\atta-form\input\datetime.vue: <script setup lang="ts"> import type { AttaFromInputProps } from './index.vue' import type { DatetimeInputProps } from '~/components/datetime-input.vue' const { config, ...attaFromInputProps } = defineProps<AttaFromInputProps & DatetimeInputProps>() </script> app\components\datetime-input.vue: <script setup lang="ts"> import type { Options as FlatpickrOptions } from 'flatpickr/dist/types/options' export type DatetimeInputProps = { config?: Partial<FlatpickrOptions> } const model = defineModel<string>() const { config } = defineProps<DatetimeInputProps>() </script>
3 Replies
Hi @Kimo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The error you're encountering:
when building your Nuxt 4 app on Linux (but not on Windows) is likely related to how Nuxt resolves path aliases, especially in type-only imports within
Nuxt does not support using
Linux file systems are case-sensitive, so ensure that the file and directory names exactly match the import statements in terms of casing. 3. Auto-imports and Directory Structure in Nuxt 4:
In Nuxt 4, the
On Linux, path alias resolution and case sensitivity can cause issues that don't appear on Windows. Use relative paths for type imports in your components, and ensure all file names match exactly in case. This should resolve the build error you're seeing on Linux. If you continue to have issues, review your directory structure and consider the default
<script setup lang="ts"> blocks.
Key points from the knowledge sources:
1. Path Aliases in Type Imports:Nuxt does not support using
~/ or @/ aliases for imports in nuxt.config.ts and, by extension, there can be issues with these aliases in other contexts, especially when the environment or file system is case-sensitive (as is the case on Linux, but not on Windows). The recommended approach is to use relative or absolute paths for such imports. See: Cannot find module - Nuxt 3, TypeScript.
2. Case Sensitivity:Linux file systems are case-sensitive, so ensure that the file and directory names exactly match the import statements in terms of casing. 3. Auto-imports and Directory Structure in Nuxt 4:
In Nuxt 4, the
srcDir is app/ by default, and aliases like ~/components resolve to app/components. If your directory structure or alias usage doesn't match this, imports may fail on Linux. See: Auto-import types from "types" directory breaks when upgrading from v3 to v4.
How to fix:
- Change your type import in datetime.vue from:
to a relative path:
(Adjust the path as needed based on your actual directory structure.)
- Double-check the casing of all file and directory names.
Summary:On Linux, path alias resolution and case sensitivity can cause issues that don't appear on Windows. Use relative paths for type imports in your components, and ensure all file names match exactly in case. This should resolve the build error you're seeing on Linux. If you continue to have issues, review your directory structure and consider the default
srcDir in Nuxt 4, as aliases like ~/components now resolve to app/components by default, not the project root. For more details, see the discussion in Auto-import types from "types" directory breaks when upgrading from v3 to v4 and Cannot find module - Nuxt 3, TypeScript.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@274414358908370944> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Changing all the imports in the proyect to relatives doenst seem like a viable solution :/