vue-loader | vue-loader源码分析 注释版 | File Utils library

in Vue3 Your app.js should be like that:

I'm not an expert in Vue but here's how I did it:

Add the following to your ./vue.config.js (or create it if it doesn't exist):

The usual reason for this error message is that when the browser tries to load that resource, the server returns an HTML page instead, for example if your router catches unknown paths and displays a default page without a 404 error. Of course that means the path does not return the expected CSS file / image / icon / whatever.

To make sure you are in that case, copy the path and try to access it directly in a new browser window or tab. You will see what your server sends.

That said, check your configuration and maybe examples of integration on github like this one https://github.com/tmpbook/django-with-vuejs

If you're using the swiper version 7* then you could face this type of issue.

Github issue 4871

Try downgrading to the v6.7.5 , see if that helps.

Related issue

You need to update your vue-loader

Actually moving the css imports into resources/js/app.js solves this problem. However, this results in the imported css to be included in the public/js/app.js, not the public/css/app.css.

console.log(data) can have a confusing output, because what you see in the console is what the value of data is at the time you are looking, which may not have been the value at the time it was actually printed to the console.

To avoid this, I suggest changing the console.log to the following:

My colleague solved it by moving to Vite. My suggestion would be to drop webpack and use Vite instead.

Migration guide for Vue 2 to 3 here: https://v3-migration.vuejs.org/ Vuetify migration guide: https://next.vuetifyjs.com/en/getting-started/upgrade-guide

Try this first:

1. In your project root, run npm install. Maybe someone else on your project has changed/added a dependency, and pulling from your git repo got you the code that relies on this, but won't get you the dependency itself.

If that doesn't fix your issue, try this:

1. Remove the node_modules folder in your project root.
2. Update your Node.js version to the latest 16.x version.
   2.1 Verify the update has worked by issuing node -v in the terminal.
3. Update your npm: Run npm i -g npm in the terminal.
   3.1 Very the update has worked by issuing npm -v in the terminal.
4. Run npm install in your project's root folder.

If this doesn't fix your issue, you need to find help from someone else on your team.