others-how to solve vue js project error after install less-loader ?

1. Purpose

In this post, I will demonstrate how to solve the following error after installing less-loader in a Vue.js project:

➜  test-bootstrapv5 git:(master) ✗ npm run serve                  

> test[email protected] serve
> vue-cli-service serve

 INFO  Starting development server...
 ERROR  TypeError: Cannot read properties of undefined (reading 'NormalModule')
TypeError: Cannot read properties of undefined (reading 'NormalModule')
    at VueLoaderPlugin.apply (/Users/bswen/js-projects/vue3-test-project/test-bootstrapv5/node_modules/vue-loader-v16/dist/pluginWebpack5.js:44:47)
    at webpack (/Users/bswen/js-projects/vue3-test-project/test-bootstrapv5/node_modules/@vue/cli-service/node_modules/webpack/lib/webpack.js:51:13)
    at serve (/Users/bswen/js-projects/vue3-test-project/test-bootstrapv5/node_modules/@vue/cli-service/lib/commands/serve.js:163:22)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
➜  test-bootstrapv5 git:(master) ✗ 

2. What is less-loader?

webpack provides an advanced mechanism to resolve files. less-loader applies a Less plugin that passes all queries to the webpack resolver if less could not resolve @import . Thus you can import your Less modules from node_modules .

Less is a CSS preprocessing language, which extends the CSS language and adds features such as variables, mixins, and functions. The role of Less-loader is to translate less code into CSS code that browsers can recognize.

3. Solution

Try to solve it by removing some files:

➜  test-bootstrapv5 git:(master) ✗ ll
total 2752
-rw-r--r--    1 bswen  staff   331B Dec  6 14:47 README.md
-rw-r--r--    1 bswen  staff    73B Dec  6 14:47 babel.config.js
drwxr-xr-x  967 bswen  staff    30K Dec 15 17:36 node_modules
-rw-r--r--    1 bswen  staff   1.3M Dec 15 17:36 package-lock.json
-rw-r--r--    1 bswen  staff   1.2K Dec 15 17:36 package.json
drwxr-xr-x    4 bswen  staff   128B Dec  1 11:02 public
drwxr-xr-x   12 bswen  staff   384B Dec 12 11:58 src
drwxr-xr-x    3 bswen  staff    96B Dec  1 11:02 tests
-rw-r--r--    1 bswen  staff   245B Dec  6 14:47 vue.config.js
➜  test-bootstrapv5 git:(master) ✗ rm -rf node_modules/*
zsh: sure you want to delete more than 100 files in /Users/bswen/js-projects/vue3-test-project/test-bootstrapv5/node_modules [yn]? y
➜  test-bootstrapv5 git:(master) ✗ rm -rf package-lock.json 
➜  test-bootstrapv5 git:(master) ✗ npm install 

Then run it again, still got error:

➜  test-bootstrapv5 git:(master) ✗ npm run serve

> test[email protected] serve
> vue-cli-service serve

 INFO  Starting development server...
 ERROR  TypeError: Cannot read properties of undefined (reading 'NormalModule')
TypeError: Cannot read properties of undefined (reading 'NormalModule')
    at VueLoaderPlugin.apply (/Users/bswen/js-projects/vue3-test-project/test-bootstrapv5/node_modules/vue-loader-v16/dist/pluginWebpack5.js:44:47)
    at webpack (/Users/bswen/js-projects/vue3-test-project/test-bootstrapv5/node_modules/@vue/cli-service/node_modules/webpack/lib/webpack.js:51:13)
    at serve (/Users/bswen/js-projects/vue3-test-project/test-bootstrapv5/node_modules/@vue/cli-service/lib/commands/serve.js:163:22)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
➜  test-bootstrapv5 git:(master) ✗ 

solution: Here is the dependencies list defined in package.json:

  "devDependencies": {
    "@intlify/vue-i18n-loader": "^3.0.0",
    "@vue/cli-plugin-babel": "~4.5.13",
    "@vue/cli-plugin-router": "~4.5.13",
    "@vue/cli-plugin-unit-jest": "~4.5.13",
    "@vue/cli-plugin-vuex": "~4.5.13",
    "@vue/cli-service": "~4.5.13",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/test-utils": "^2.0.0-0",
    "less": "^4.1.3",
    "less-loader": "^11.1.0",  //pay attention to this line
    "typescript": "~3.9.3",
    "vue-cli-plugin-i18n": "~2.3.1",
    "vue-jest": "^5.0.0-0"
  },

Let’s remove the less part, got this：

  "devDependencies": {
    "@intlify/vue-i18n-loader": "^3.0.0",
    "@vue/cli-plugin-babel": "~4.5.13",
    "@vue/cli-plugin-router": "~4.5.13",
    "@vue/cli-plugin-unit-jest": "~4.5.13",
    "@vue/cli-plugin-vuex": "~4.5.13",
    "@vue/cli-service": "~4.5.13",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/test-utils": "^2.0.0-0",
    "typescript": "~3.9.3",
    "vue-cli-plugin-i18n": "~2.3.1",
    "vue-jest": "^5.0.0-0"
  },

Then run the application again, the issue is fixed.

3. Summary

In this post, I demonstrated how to solve vue js project error after install less-loader. That’s it, thanks for your reading.