Importing directly from a nuxt.config file is not allowed.

[heriec]

What version of Tailwind CSS are you using?

v4.1.5

What build tool (or framework if it abstracts the build tool) are you using?

Nuxt 3.17.1 Vite 6.3.4

What version of Node.js are you using?

20.12.2

What browser are you using?

Chrome

What operating system are you using?

Windows

Describe your issue

I occasionally encounter an error in Nuxt. The error message is as follows:

[15:02:14]  ERROR  Internal server error: Importing directly from a nuxt.config file is not allowed. Instead, use runtime config or a module. [importing nuxt.config.ts from components/content/SearchEngine.vue?vue=&type=style&index=0&scoped=f72d0750&lang.css=]
  Plugin: vite:import-analysis
  File: E:/project/demo/components/content/SearchEngine.vue?vue=&type=style&index=0&scoped=f72d0750&lang.css=:1:1
  1  |  /*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */       
     |  ^
  2  |  @layer properties;
  3  |  .cover[data-v-f72d0750] {
      at ResolveIdContext._formatLog (file:///E:/project/demo/node_modules/.pnpm/vite@6.3.4_@types+node@22.1_7420e0ffe0d39c0a8b5c9c0907dae89f/node_modules/vite/dist/node/chunks/dep-Bn81Esdm.js:42499:41)
      at ResolveIdContext.error (file:///E:/project/demo/node_modules/.pnpm/vite@6.3.4_@types+node@22.1_7420e0ffe0d39c0a8b5c9c0907dae89f/node_modules/vite/dist/node/chunks/dep-Bn81Esdm.js:42496:16)
      at ResolveIdContext.resolveId (file:///E:/project/demo/node_modules/.pnpm/impound@1.0.0/node_modules/impound/dist/index.js:31:13)
      at file:///E:/project/demo/node_modules/.pnpm/vite-plugin-inspect@11.0.1__c2bd9e8c315551d2bfa98ddbc1c3e693/node_modules/vite-plugin-inspect/dist/shared/vite-plugin-inspect.Bht9Q8w0.mjs:429:26
      at plugin.<computed> (file:///E:/project/demo/node_modules/.pnpm/vite-plugin-inspect@11.0.1__c2bd9e8c315551d2bfa98ddbc1c3e693/node_modules/vite-plugin-inspect/dist/shared/vite-plugin-inspect.Bht9Q8w0.mjs:358:14)
      at EnvironmentPluginContainer.resolveId (file:///E:/project/demo/node_modules/.pnpm/vite@6.3.4_@types+node@22.1_7420e0ffe0d39c0a8b5c9c0907dae89f/node_modules/vite/dist/node/chunks/dep-Bn81Esdm.js:42213:17)
      at async TransformPluginContext.resolve (file:///E:/project/demo/node_modules/.pnpm/vite@6.3.4_@types+node@22.1_7420e0ffe0d39c0a8b5c9c0907dae89f/node_modules/vite/dist/node/chunks/dep-Bn81Esdm.js:42420:15)
      at async normalizeUrl (file:///E:/project/demo/node_modules/.pnpm/vite@6.3.4_@types+node@22.1_7420e0ffe0d39c0a8b5c9c0907dae89f/node_modules/vite/dist/node/chunks/dep-Bn81Esdm.js:40463:26)
      at async Promise.all (index 172)
      at async TransformPluginContext.transform (file:///E:/project/demo/node_modules/.pnpm/vite@6.3.4_@types+node@22.1_7420e0ffe0d39c0a8b5c9c0907dae89f/node_modules/vite/dist/node/chunks/dep-Bn81Esdm.js:40767:12)
      at async file:///E:/project/demo/node_modules/.pnpm/vite-plugin-inspect@11.0.1__c2bd9e8c315551d2bfa98ddbc1c3e693/node_modules/vite-plugin-inspect/dist/shared/vite-plugin-inspect.Bht9Q8w0.mjs:374:17
      at async EnvironmentPluginContainer.transform (file:///E:/project/demo/node_modules/.pnpm/vite@6.3.4_@types+node@22.1_7420e0ffe0d39c0a8b5c9c0907dae89f/node_modules/vite/dist/node/chunks/dep-Bn81Esdm.js:42294:18)
      at async loadAndTransform (file:///E:/project/demo/node_modules/.pnpm/vite@6.3.4_@types+node@22.1_7420e0ffe0d39c0a8b5c9c0907dae89f/node_modules/vite/dist/node/chunks/dep-Bn81Esdm.js:35735:27)
      at async viteTransformMiddleware (file:///E:/project/demo/node_modules/.pnpm/vite@6.3.4_@types+node@22.1_7420e0ffe0d39c0a8b5c9c0907dae89f/node_modules/vite/dist/node/chunks/dep-Bn81Esdm.js:37250:24)

It's possible that clearing the cache and then running it again resolves this issue, so I don't know how to reproduce it.

The corresponding file SearchEngine.vue contains code like this:

<style scoped>
@reference "tailwindcss";
.cover {
  @apply absolute top-0 right-0 bottom-0 left-0 rounded text-white text-center pointer-events-none transition duration-600 z-10 origin-bottom;
}
</style>

It might be caused by @reference "tailwindcss";, and I find nuxt-modules/tailwindcss#429 (comment) may be helpful

[wongjn]

Please consider providing a git repo that reproduces the unexpected behavior. It really helps so that we can troubleshoot ourselves.

[heriec]

Sorry, as I said, when I delete the .nuxt foder of nuxt and run it again, this bug disappears. However, when I encoding for a period of time, the same problem occurs again, so I don't know how to reproduce the bug.
Just like the comment I provided,

I had "./nuxt.config.{js,ts}", in my tailwind.config.js. You may wonder why it is there, and here is the [reason](https://tailwindcss.com/docs/guides/nuxtjs).
I removed the line and the error disappeared.

But in fact, I don't have this file tailwind.config.js at the moment.

[wongjn]

I understand, if you could still provide a git repo that it eventually occurs in, that would be helpful.

Edit: I wonder if this might be because of the same underlying cause as #17706 (comment)

[oom-]

Hello, I'm getting the same issue again and again without no "period of time" before it appears right now.
I'm trying to reproduce it in a new repo but nothing works (I can't send you my entire project obviously :/).

Same kind of error:

Internal server error: Importing directly from a nuxt.config file is not allowed. Instead, use runtime config or a module. [importing nuxt.config.ts from components/interaction/SwitchText.vue?vue=&type=style&index=0&scoped=ca6b1e71&lang.css=]
 1  |  /*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */
     |  ^
  2  |  @layer properties;
  3  |  .item {

It seems as well to come from the components referencing the main.css file:

<style scoped>
@reference "~/assets/css/main.css";

.item {
    @apply py-2.5 px-7 text-red;
}
.item.active {
    @apply text-primary;
}
</style>

Edit: Ok I succeed to trigger it even if it's only in the console, it's not that obvious and request some manipulation to be trigger.
Reproduction Link: https://stackblitz.com/edit/github-ubyxzgxn?file=pages%2Findex.vue

1. Go inside the file /pages/index.vue
2. Line 19 definePageMeta remove one character in the name of the middleware.
3. Click on the refresh button of the view to display the error in the view.
4. Revert the change in the file, the bug should appears in the console after the hot reload.

@wongjn

[wongjn]

Thank you for providing that reproduction @oom- . This could be related to #17706. Enacting the work-around detailed in #17836 does seem to at least fix the error for your reproduction: https://stackblitz.com/edit/github-ubyxzgxn-8connngd?file=pages%2Findex.vue

[oom-]

No problem, @wongjn. The label of the issue should be updated as well no?

[wongjn]

I consider the label to be in relation to the original post. It's unclear to me if the underlying cause or issue is the same so I've left the Needs reproduction as-is as of now.

[heriec]

The error reproduced from the code provided by @oom- is the same as my issue. Thank you very much; I believe this will resolve my problem.

[heriec]

Updating to the new version 4.1.7, this issue doesn't seem to occur anymore. I think the problem has been resolved in #17706, so perhaps this issue can be closed now?