Nuxt•12mo ago

Server side dynamic import

Is there a way use

await import(....)

await import(....)

on the server side? I've tried importing the full path with and without the extension and both give errors. Using .ts says

unknown file extension .ts

unknown file extension .ts

and without ext, says

Cannot find module

Cannot find module

. I tried using the relative path, IE

~~/server/utils/foo/bar

~~/server/utils/foo/bar

but that says

cannot find module ~~

cannot find module ~~

. I'm not loading a nitro plugin or module, just a normal ts file with an export I'm checking for once loaded.

kapa.ai•1/6/25, 5:16 PM

Hi @bnason. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

kapa.ai•1/6/25, 5:16 PM

----------------------
To answer your question about server-side dynamic imports in Nuxt 3, let's look at the available information and best practices.

In Nuxt 3, server-side code is handled by Nitro, which uses native ES modules. This means that the approach for dynamic imports on the server side is slightly different from what you might be used to in Nuxt 2 or in client-side code.

Here are some key points to consider:

File extensions: When using dynamic imports on the server side, you should include the file extension. For TypeScript files, use the extension instead of . This is because Nitro expects ES modules.
Path resolution: Instead of using aliases like or , you should use relative paths or the alias for internal imports.
Auto-imports: Nuxt 3 automatically imports utility functions from the directory, so you might not need to use dynamic imports for these files at all.

Here's an example of how you might perform a dynamic import on the server side:

If you're still encountering issues, it might be helpful to check your Nuxt configuration and ensure that your server-side code is set up correctly.

For more detailed information on ES modules in Nuxt 3, you can refer to the ES Modules documentation.

If you're working with server utilities specifically, you might find the Server Utilities documentation helpful.

kapa.ai•1/6/25, 5:16 PM

Remember that the server-side environment in Nuxt 3 is different from the client-side, so some patterns that work in the browser might not work directly on the server. If you're still having trouble after trying these suggestions, you might want to provide more specific details about your use case and the exact error messages you're seeing.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•1/6/25, 5:16 PM

@712351223482810390 Kapa.ai is still learning and improving, please let me know how I did by reacting below.

bnasonOP•1/6/25, 5:23 PM

@kapa.ai even using relative paths and the mjs extension, I still get

Cannot find module

Cannot find module

. It looks like it's using the folder as the base for the relative import. Also, my code would need to be transpiled from its ts code to be mjs

kapa.ai•1/6/25, 5:23 PM

Let me check the knowledge base for you again. One moment!

kapa.ai•1/6/25, 5:23 PM

----------------------
I understand you're still facing issues with server-side dynamic imports in Nuxt 3, even after trying relative paths and the .mjs extension. Let's address your concerns based on the available information.

Base path for imports:You're correct that Nuxt is using the `.nuxt/dev/` folder as the base for relative imports. This is because the server code is executed from that directory at runtime. To work around this, you need to use the correct relative path from that location to your actual file.
Transpilation from TypeScript to JavaScript:You're right that TypeScript files need to be transpiled before they can be used as .mjs files. Nuxt should handle this transpilation automatically for server-side code.

To address these issues, here are some suggestions:

Use full resolved paths:
Instead of relying on relative paths, you can use full resolved paths in your file. This approach is recommended in the Nuxt documentation for dealing with path resolution issues. Here's an example:

This configuration tells Nitro to inline the specified directory, which should make it available for dynamic imports.

Use the alias:
Nuxt provides the alias for internal imports. You can try using this instead of relative paths:

Check module resolution:
Ensure that the module you're trying to import is properly recognized by Nuxt. You can try adding it to the option in your :

kapa.ai•1/6/25, 5:23 PM

Verify file location:
Make sure your TypeScript files are in the correct location within your project structure, typically under the directory.

If you're still encountering issues after trying these approaches, it might be helpful to share more details about your project structure and the specific error messages you're seeing.

For more information on module resolution and ES Modules in Nuxt 3, you can refer to the ES Modules documentation and the Troubleshooting ESM Issues section.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•1/6/25, 5:23 PM

@712351223482810390 Kapa.ai is still learning and improving, please let me know how I did by reacting below.

bnasonOP•1/6/25, 6:00 PM

@kapa.ai Is the nitro.externals.inline option deprecated? Can you show me documentation on it

kapa.ai•1/6/25, 6:00 PM

Let me check the knowledge base for you again. One moment!

kapa.ai•1/6/25, 6:00 PM

----------------------
Based on the knowledge sources provided, I don't have specific information about the deprecation status of the option. However, I can provide you with some relevant information from the Nuxt documentation.

The option is not mentioned in the current Nuxt configuration documentation. Instead, there's information about a similar option under the configuration:

Nuxt Configuration Reference states:

"This option is no longer used. Instead, use ."

This suggests that some Nitro-related configurations have been updated or replaced. However, it doesn't specifically address the option you're asking about.

Given the lack of direct documentation on , it's possible that this option has been deprecated or replaced in recent versions of Nuxt. However, without more concrete information from the official documentation or release notes, I can't definitively state its current status.

If you're using this option in your project, I would recommend checking the latest Nuxt and Nitro documentation, or considering alternative approaches for managing external dependencies in your Nuxt application. You might also want to consult the Nuxt community forums or GitHub issues for the most up-to-date information on this specific configuration option.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•1/6/25, 6:00 PM

@712351223482810390 Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Raziki Slice•3/6/25, 7:12 AM

hey @bnason
Were you able to figure this out? I'm also struggling with implementing this for my project