Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

css files are being loaded as script module in dev with `ssr: false` (webpack)

See original GitHub issue

Environment

Operating System: Linux
Node Version: v16.15.1
Nuxt Version: 3.0.0-rc.4
Package Manager: yarn@1.22.19
Builder: webpack
User Config: builder, ssr
Runtime Modules: -
Build Modules: -

Reproduction

npx nuxi init nuxt-app
cd nuxt-app
yarn add -D @nuxt/webpack-builder
add to nuxt.config.js: builder: 'webpack' / ssr: false
yarn dev

Describe the bug

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/css"

I tested using vite and works fine, but when I set the builder to webpack all css files are being loaded as an script module.

Screenshot from 2022-06-17 15-18-49

Additional context

No response

Logs

No response

Issue Analytics

State:
Created a year ago
Reactions:1
Comments:6 (1 by maintainers)

Top GitHub Comments

3reactions

BurakGurcommented, Jul 1, 2022

Same issue but i use vite

2reactions

bachillicommented, Jun 21, 2022

Same here.

When I open my browser at http://localhost:3000/, this happen:

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.

Top Results From Across the Web

css-loader | webpack - JS.ORG

file.js import css from "file.css";. webpack.config.js module.exports ... CSS Modules features, it will be useful for developers who use vanilla css or use ......

Conflicting server/client rendering and Webpack's local css ...

You need to ensure the server is generating the same markup as the client, which means that you need to use CSS Modules...

Advanced Features: Dynamic Import - Next.js

Dynamically import JavaScript modules and React Components and split your code ... dynamic() call for Next.js to be able to match webpack bundles...

Server Side Rendering - Loadable Components

This is the stats file generated by webpack loadable plugin ... Loadable components loads all your scripts asynchronously to ensure optimal performances.

Asset Bundling (Vite) - The PHP Framework For Web Artisans

These may be JavaScript or CSS files, and include preprocessed languages ... the Vite development server and inject the Vite client to enable...