Calling scss file with `@use` causes error on browser back

Environment

• Operating System: Linux
• Node Version: v18.12.1
• Nuxt Version: 3.0.0
• Nitro Version: 1.0.0
• Package Manager: [email protected]
• Builder: vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

Reproduction

https://github.com/phanect/repro-nuxt-scss-browserback

I'm attaching the reproduction as a GitHub repository because this issue was not reproduced on Stackblitz.

Describe the bug

Step to reproduce:

1. Clone the repro and run the app:

$ git clone https://github.com/phanect/repro-nuxt-scss-browserback.git
$ cd repro-nuxt-scss-browserback
$ npm ci
$ npm run dev

2. Open http://localhost:3000/
3. Click the link "Go to another page" to move to http://localhost:3000/another/
4. Press the browser back button to go back to http://localhost:3000/

Expected: The link text "Go to another page" is properly shown. Actual: An error message "500 Failed to fetch dynamically imported module: http://localhost:3000/_nuxt/pages/index.vue" is shown. In the browser console, some error messages are shown:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/css". Strict MIME type checking is enforced for module scripts per HTML spec.
[Vue Router warn]: uncaught error during route navigation:
TypeError: Failed to fetch dynamically imported module: http://localhost:3000/_nuxt/pages/index.vue
[Vue Router warn]: Unexpected error when starting the router: TypeError: Failed to fetch dynamically imported module: http://localhost:3000/_nuxt/pages/index.vue
[Vue Router warn]: uncaught error during route navigation:
TypeError: Failed to fetch dynamically imported module: http://localhost:3000/_nuxt/pages/index.vue
[Vue warn]: Hydration node mismatch:
- Client vnode: div 
- Server rendered DOM: <!--[--> (start of fragment) 
  at <ErrorDev statusCode=500 statusMessage="Internal Server Error" description="Failed to fetch dynamically imported module: http://localhost:3000/_nuxt/pages/index.vue"  ... > 
  at <AsyncComponentWrapper statusCode=500 statusMessage="Internal Server Error" description="Failed to fetch dynamically imported module: http://localhost:3000/_nuxt/pages/index.vue"  ... > 
  at <NuxtErrorPage key=0 error= TypeError: Failed to fetch dynamically imported module: http://localhost:3000/_nuxt/pages/index.vue > 
  at <AsyncComponentWrapper key=0 error= TypeError: Failed to fetch dynamically imported module: http://localhost:3000/_nuxt/pages/index.vue > 
  at <NuxtRoot>
[Vue warn]: Hydration children mismatch in <div>: server rendered element contains fewer child nodes than client vdom. 
  at <ErrorDev statusCode=500 statusMessage="Internal Server Error" description="Failed to fetch dynamically imported module: http://localhost:3000/_nuxt/pages/index.vue"  ... > 
  at <AsyncComponentWrapper statusCode=500 statusMessage="Internal Server Error" description="Failed to fetch dynamically imported module: http://localhost:3000/_nuxt/pages/index.vue"  ... > 
  at <NuxtErrorPage key=0 error= TypeError: Failed to fetch dynamically imported module: http://localhost:3000/_nuxt/pages/index.vue > 
  at <AsyncComponentWrapper key=0 error= TypeError: Failed to fetch dynamically imported module: http://localhost:3000/_nuxt/pages/index.vue > 
  at <NuxtRoot>

(These error messages are produced on Google Chrome 108.0.5359.94. On Firefox, similar error messages are produced too.)

Additional context

This is probably caused by using @use in Scss. If you remove @use "~/assets/styles/vars.scss" as vars; from index.vue, this error is not raised.

Browser: Google Chrome 108.0.5359.94 (64bit) OS: KDE neon (an Ubuntu-based Linux distribution)

Logs

No response

This is very weird, I use the @use keywords without any problems in my project. Can you try to put the repo content on stackblitz.com and see if it works there? Also:

• are you sure that other scss code is interpreted correctly?
• did you do npm install after adding sass to the project?

Hi @ennioVisco, Thank you for your reply.

Can you try to put the repo content on stackblitz.com and see if it works there?

As I mentioned, this issue was not reproduced on stackblitz.com. Since most developers run the Nuxt app on their local machine or server machine, I don't think it is so important whether this issue happens on stackblitz.com.

• are you sure that other scss code is interpreted correctly?

I believe so. You can check the reproduction code to check if there are any syntax errors in the SCSS.

• did you do npm install after adding sass to the project?

Yes.

Hi @ennioVisco, Thank you for your reply.

Can you try to put the repo content on stackblitz.com and see if it works there?

As I mentioned, this issue was not reproduced on stackblitz.com. Since most developers run the Nuxt app on their local machine or server machine, I don't think it is so important whether this issue happens on stackblitz.com.

• are you sure that other scss code is interpreted correctly?

I believe so. You can check the reproduction code to check if there are any syntax errors in the SCSS.

• did you do npm install after adding sass to the project?

Yes.

The point about stackblitz is not that people use it on the web, but that it's a clean environment that ensures the bug is not strictly related to your local environment, but that it is some actual bug of the framework. As a matter of fact, I cannot reproduce your issue by following your steps. These are the recommendations I can give you:

• Make sure to run node > 16.x (older might work, but they are in legacy mode, so new bugs could have been introduced)
• Make sure you remove the *-lock.json file
• Make sure you remove the .nuxt and node_modules folders
• Make sure you are not in a subdirectory of another javascript project
• Make sure you don't have some extra javascript files that could interfere, a good idea would be to start by cloning your reproduction in a fresh folder.

This way it should work as expected, please let us know :)

The point about stackblitz is not that people use it on the web, but that it's a clean environment that ensures the bug is not strictly related to your local environment, but that it is some actual bug of the framework. As a matter of fact, I cannot reproduce your issue by following your steps.

Do you mean you cloned the reproduction repo and you conldn't reproduce the issue on your local machine? If you haven't tried to reproduce on your local machine, can you please try to run the reproduction repo on your local machine? By cloning the repo. you can run the app on clean environment too.

You can't use real browser tab if you use stackblitz (maybe stackblitz shows the contents in the iframe?), so I think stackblitz is not enough to ensure this bug is caused by my environment.

These are the recommendations I can give you:

• Make sure to run node > 16.x (older might work, but they are in legacy mode, so new bugs could have been introduced)
• Make sure you remove the *-lock.json file
• Make sure you remove the .nuxt and node_modules folders
• Make sure you are not in a subdirectory of another javascript project
• Make sure you don't have some extra javascript files that could interfere, a good idea would be to start by cloning your reproduction in a fresh folder.

I believe I ran the app under these conditions, but I will check again.

The point about stackblitz is not that people use it on the web, but that it's a clean environment that ensures the bug is not strictly related to your local environment, but that it is some actual bug of the framework. As a matter of fact, I cannot reproduce your issue by following your steps.

Do you mean you cloned the reproduction repo and you conldn't reproduce the issue on your local machine? If you haven't tried to reproduce on your local machine, can you try to run the reproduction repo on your local machine? By cloning the repo. you can run the app on clean environment too.

You can't use real browser tab if you use stackblitz (maybe stackblitz shows the contents in the iframe?), so I think stackblitz is not enough to ensure this bug is caused by my environment.

These are the recommendations I can give you:

• Make sure to run node > 16.x (older might work, but they are in legacy mode, so new bugs could have been introduced)
• Make sure you remove the *-lock.json file
• Make sure you remove the .nuxt and node_modules folders
• Make sure you are not in a subdirectory of another javascript project
• Make sure you don't have some extra javascript files that could interfere, a good idea would be to start by cloning your reproduction in a fresh folder.

I believe I ran the app under these conditions, but I will check again.

I did clone it and run on my local machine...

I did clone it and run on my local machine...

Oh, OK, then I may did something wrong. I will check again. Thank you for the investigation.

I have encountered the same error while starting a new nuxt 3 project, and I have managed to reproduce the error using @phanect's repository.

As I understand it, this is a bug caused by the browser's cache. I am able to reproduce it consistently in Firefox, but randomly in Chrome. I don't think it's related to sass at all, as I have the same error when using css as well.

The problem comes from the fact that the url /_nuxt/pages/index.vue?vue&type=style&index=0&scoped=02281a80&lang.scss (which corresponds to the <style> of the index page) can respond with either css or javascript, depending on the Accept header sent by the browser.

During the first page load, the right content types are sent, but when we come back to the index page with the back button, the browser tries to get the file from the cache. In this case, it gets a css file, but it wanted the javascript instead, which gives the error we see in the console: Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/css". Strict MIME type checking is enforced for module scripts per HTML spec.

@ennioVisco: this doesn't happen if you disable the cache in the browser's dev tools, which might be why you weren't able to reproduce the bug.

Apologies for not responding long. Since it passed 6 months since my first report, I reproduced this issue with the latest Nuxt and updated the report and the repro.

I confirmed @liggiotti's comments:

• I confirmed SCSS itself is not relevant to this issue. This issue also happens when you have CSS in index.vue. By removing <style> block, this issue does not happen.
• I confirmed this issue does not happen when you disable the cache with DevTools.

@ennioVisco Can you try my repro again without disabling the browser cache?

@ennioVisco Apologies, I missed an important thing.

This issue only happens on nuxt dev. It does not happen on the production server (node .output/server/index.mjs).

Since disabling the cache is a workaround for the local environment, I think this issue can be less prioritized.

We stumbled over the same issue during a current Greenfield project when using <a>. Explanation by @liggiotti seems to be on point. It appears it does not occur when using <NuxtLink>.

Also ran into this issue with a brand-new project using npx nuxi@latest init app (nuxt 3.6.5) and just adding <style> to app.vue. However for me this didn't result in an 500 from nuxt. The Browser would prevent the css from loading was not loaded because its MIME type, “application/javascript”, is not “text/css”.

The same issue occurs when you navigate backward or forward in the browser as well.

This still occurs to me when navigating forward and backward in the browser; is there a fix?

Workaround: Disable browser cache by Browser Developer Tools.

If you don't know how, see the following page (Chrome and Firefox): https://www.webinstinct.com/faq/how-to-disable-browser-cache

Since this Issue does not happen on production build AFAIK, it does not affect your end users.

I had the same error on it i think it related to SSR mode i had two section one of them is related to panel and the other site in the panel side i don’t have this problem but in site environment that i use SSR i had the error also it didn’t different between production mode or dev.