fix(nuxt): do not apply import protection to top-level resolution

[danielroe]

🔗 Linked issue

resolves nuxt/nuxt#13278

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

We can avoid triggering import protection from a top-level this.resolve call (i.e. within another vite plugin), as there may be valid use cases for this, like tailwind resolving the nuxt.config file.

Relevant vite section:

https://github.com/vitejs/vite/blob/757a92f1c7c4fa961ed963edd245df77382dfde6/packages/vite/src/node/server/pluginContainer.ts#L562-L566

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[netlify]

✅ Deploy Preview for nuxt3-docs canceled.

Name	Link
🔨 Latest commit	240bdb4
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt3-docs/deploys/631c72bca2daed0008c2c311

[pi0]

Thanks! This defenitly reduces some frustrations but why should a plugin attempt to import from nuxt.config or other potentially build-only files that we need to disable protection against? (i think tailwind for runtime config generates a virtual file)

[danielroe]

I am not sure exactly how to answer that. Tailwind on its own is triggering this import protection rule. (ie. I'm reproducing it with pure tailwind, not the nuxt integration).

note: the import protection rule triggers on resolving an id, not on importing from it.

[pi0]

I understand issue with our impl and tailwind but the change of this PR is also defusing the import protection for nuxt.config at all which was the initial point! e.g: Users now can directly import something from nuxt.config in app.vue.

[pi0]

note: the import protection rule triggers on resolving an id, not on importing from it.

What about marking triggered resolutions (resolveId) and then show error in transform step if id actually resolve?

[danielroe]

What makes you say they can import in app.vue?

[pi0]

It won't work because there is another import protection rule for defineNuxtConfig from nuxt. Directly returning config or import from any top level will be bypassed.

[danielroe]

Just did a quick test to confirm (thought I had done it when creating PR but always worth checking!) and indeed import protection works correctly in app.vue. The plugin gets called with an importer of app.vue. The change in this PR only applies to top-level resolutions (ie, from index.html).

You can confirm with:

<script setup lang="ts">
import config from '~/nuxt.config'
console.log({ config })
</script>

<template>
  <!-- Edit this file to play around with Nuxt but never commit changes! -->
  <div>
    Nuxt 3 Playground
  </div>
</template>

<style scoped>
</style>

What makes you say they can import in app.vue?

(The reason I asked is because I was wondering if you had done some testing to make you think the protection wasn't still working properly. If so, a reproduction would be helpful.)

[pi0]

nuxt.config:

export const a = 123

export default {}

app.vue:

<script setup lang="ts">
import { a } from '~/nuxt.config'
console.log(a)
</script>

(works with no warning)

[danielroe]

That's not caused by this PR - it's a bug with the import protection rules. Pushing fix.

To show that imports from app.vue remain protected, you can also test with:

<script setup lang="ts">
import { useNuxtApp } from 'nuxt/app'
console.log({ useNuxtApp })
</script>

[pi0]

Before your last commit, protection works without change to exclude top level index.html and was not working after adding exclude. Now ~/nuxt.config is working (thanks) but import { a } from './nuxt.config' not protected but this one was happening before too. Do you think we fix it as well?

[danielroe]

I think so. 👍 Will have a look.