Search code examples
node.jsvue.jsnode-modulesvite

Can not resolve Vite html loader file error


I am using vite for a project, but when I run npm run dev I get the error Failed to scan for dependencies from entries: <path>/Learning/Vite-test/index.html

[ERROR] No loader is configured for ".html" files: index.html

I do not know what may be causing the error (and it seems either new or specific to my case) as I am still learning and do not seem to find any issue related through search.

I tried installing html loader and adding it to the vite configuration file but it did not change anything.

The following is my vite configuration file:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
    resolve: {
      extensions: ['.js', '.ts', '.vue', '.json', '.html'],
    },
    module: {
      rules: [
        {
          test: /\.html$/i,
          loader: 'html-loader',
        },
      ],
    },
  }
})

I also get a similar error when creating projects with Vue/cli which is:

Compiling...


 ERROR  Failed to compile with 1 error                                                                                8:24:19 PM
 error 

Module not found: Error: Can't resolve '<path>\learn-vuetify\node_modules\webpack-dev-server\client\index.js?protocol=ws&hostname=192.168.8.106&port=8080&pathname=%2Fws&logging=none&progress=true&overlay=%7B%22errors%22%3Atrue%2C%22warnings%22%3Afalse%7D&reconnect=10&hot=true&live-reload=true' in '<path>\learn-vuetify'

ERROR in Module not found: Error: Can't resolve '<path>\learn-vuetify\node_modules\webpack-dev-server\client\index.js?protocol=ws&hostname=192.168.8.106&port=8080&pathname=%2Fws&logging=none&progress=true&overlay=%7B%22errors%22%3Atrue%2C%22warnings%22%3Afalse%7D&reconnect=10&hot=true&live-reload=true' in '<path>\learn-vuetify'

webpack compiled with 1 error

I have some ideas in mind:

  1. Related and caused by some local security option in windows
  2. Something went wrong when installing node
  3. Corrupt dependencies (someone could have had the same error, but no one did - rare).

I have no idea for the cause ... please help!!!


Solution

  • I encountered same error and the problem was with the path My Path was:

    E:\#Development\MERN\R\First-app
    

    This # in the path was causing the issue.

    well it works fine for me now.

    New Path:

    E:\Development\MERN\R\First-app