Issue: The module 'vue-loader-v16/package.json' cannot be located

Just transitioning from React.js to Vue.js and encountering an issue with the Vue loader that didn't occur initially. However, starting the server crashes the app from the second time onwards.

 npm run serve

> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d1a5beb5be91e1ffe0ffe1">[email protected]</a> serve /home/riyad/Desktop/todo_wedevs/todo
> vue-cli-service serve

 INFO  Starting development server...
 ERROR  Error: Cannot find module 'vue-loader-v16/package.json'
Error: Cannot find module 'vue-loader-v16/package.json'...

Struggled with Vue CLI 3 as well as 2, tried different vue-loaders but faced the same issue. My babel.config.js file ->

const { VueLoaderPlugin } = require("vue-loader");
module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [new VueLoaderPlugin()],
};

package.json

{
  "name": "todo",
  "version": "0.1.0",...

the log->

0 info it worked if it ends with ok
1 verbose cli [ '/home/riyad/.nvm/versions/node/v11.10.1/bin/node',
1 verbose cli   '/home/riyad/.nvm/versions/node/v11.10.1/bin/npm',
1 verbose cli   'run',
1 verbose cli   'serve' ]
2 info using <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="19776974592f372e3729">[email protected]</a>...etc.

Any suggestions on setting up a project securely with Vuex and Vue Router?

javascriptvue.jsvuexvue-routervue-loader

Answer №1

One solution is to only install the package in devDependencies:

npm i --save-dev vue-loader-v16

This approach resolved my issue.

When you mention babble.config.js, are you perhaps referring to babel.config.js? In any case, I believe your babel.config.js should be structured like this:

module.exports = {
    presets: ["@vue/cli-plugin-babel/preset"],
};

To maintain a cleaner package.json file, consider creating an .eslintrc.js file instead - simply copy and paste the information from the eslintConfig key in your package.json

Answer №2

To ensure all necessary packages are installed, make sure to update npm to a version higher than 6.9. Simply run npm i after updating. For detailed instructions on updating npm, refer to the following link: https://github.com/vuejs/vue-cli/pull/5718

If needed, you can update npm using the command npm install npm@latest -g

Answer №3

To resolve the issue, I fixed it by re-installing the package. The first step is to remove the package

npm uninstall vue-loader-v16

After the uninstallation is complete, proceed with re-installing the package

npm i vue-loader-v16

Although it may seem straightforward, this method has successfully resolved the issue for me on two occasions

Answer №4

In order to troubleshoot the issue, it is advisable to remove the node-modules folder from your project first. After that, you can reinstall npm by executing the following command:

npm i -g npm

Next, ensure the functionality of your application by serving it with the command:

npm run serve

Following these steps might provide a solution to your problem.

Answer №5

While working with laravel 9.x, laravel/ui, and integrating vue as the scaffolding, I encountered a similar issue that was resolved by upgrading vue-loader to version 15.9.8.

npm i <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="512724347c3d3e303534231160647f687f69">[email protected]</a> -D

For reference, here are the versions of npm, node, and v8 that I am currently using:

npm: '8.1.2',
node: '16.13.1',
v8: '9.4.146.24-node.14'

Answer №6

If the previous solutions didn't solve the issue, it turned out that updating my npm version was the key to resolving the problem.

Answer №7

If you are encountering this issue, it may be due to using a version of npm that is below 6.9. Have you checked your nodejs version as well?

  1. Verify your current node version (this also indicates your npm version)

node -v

  1. Consider updating to a newer node version

nvm install 14.x.x

  1. Switch to the new node version with nvm

npm -v => 6.14.x

Answer №8

After experiencing issues, I decided to downgrade the vue/cli version from 4.5.6 to 3.0.1, which resolved the issue for me. It brought the vue cli back from version 3 to 2, as version 3 is currently in beta and may not be stable yet. To downgrade, I used the following command:

npm install -g @vue/[email protected]

Answer №9

To make the necessary changes, navigate to App.js and access the file path: src/component/App.vue

Add the following code:

// Code received from the main loader for 'source.vue'

// Import the <template> block
import render from 'source.vue?vue&type=template'
// Import the <script> block
import script from 'source.vue?vue&type=script'
export * from 'source.vue?vue&type=script'
// Import <style> blocks
import 'source.vue?vue&type=style&index=1'

script.render = render
export default script

Then, execute:

npm run serve

This should resolve the error message stating "Cannot find module 'vue-loader-v16/package.json'."

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Convert radio input and label into a clickable URL text

Apologies for my lack of experience. I am simply trying to wrap my head around something. <span class="button"> <input type="radio" id="button-2" name="button-group-1"> <label onclick="changeButton('2');" f ...

javascriptformsonclick

Using addClass and fadeIn simultaneously when hovering over an element

After writing JavaScript code that utilizes the JQuery library to swap classes on hover, I noticed that the transition between background images was quite abrupt. The code functions as intended, but I would prefer to incorporate a fadeIn and fadeOut effect ...

javascriptjquery

How can we display HTML elements using a JSON object? What is the process for rendering HTML content?

Excited to finally contribute my own questions here in the pursuit of knowledge. I need some help with a jQuery GET method issue involving pulling a JSON object through an API. Here's my code: var div = document.getElementById('myData'); ...

javascriptjqueryjson

Unable to iterate over an array within a single file Vue component

I created a vue.js app utilizing single file components. In the data section, I initialized an empty array like this: data: function () { return { teamKeys: [] } }, Next, I populate this array by pushing values into it within one of my methods: ...

javascriptarraysvue.js

Utilizing EsLint with the airbnb-base configuration to ensure no unresolved imports in

I recently created a project using Vue-cli and decided to include a lint configuration by default. However, I am encountering an issue when running the lint command: error: Unable to resolve path to module '@/components/HelloWorld.vue' (import ...

vue.jseslinteslint-config-airbnb

0 situation where using an empty value with PHP SESSION

Good Morning! I'm encountering an issue with a variable named "var" which can be 0. I'm trying to check if the variable is null, and if it's not, I save it in a PHP session and call another page. When I check the session on the new page, it ...

phpjavascriptmysql

"How to prevent users from using the back button on Google Chrome and Edge browsers

window.history.pushState(null, null, location.href); window.addEventListener('popstate', () => { history.go(1); alert('The use of back button is restricted.'); }); An issue has been identified where the code snippet above d ...

javascriptjquerygoogle-chromemicrosoft-edge

Exploring the Unpredictable Results of Recursive Functions in JavaScript

Take a look at this recursive code snippet. function calculateFactorial(n) { if (n === 0 || n === 1) { return 1; } else { console.log(calculateFactorial( (n - 1) )); return n * calculateFactorial(n - 1); } } const num = ...

javascriptnode.jsrecursion

I'm experiencing some unexpected behavior with the Laravel 8 API $request

I am using a Vue component to send this request: data(){ return{ email:"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="74073419115a171b19">[email protected]</a>" } }, methods:{ reset ...

laravelapivue.js

Getting the value of cache using jQuery in an ASP.NET application

I am currently developing an application where I need to pass data from one page to another using Cache. The first page, which is an .aspx page, contains a textbox control and a button control. When the button is clicked, the following code is executed: p ...

c#javascriptjqueryasp.netcaching

Having trouble with the Jquery Slider script?

I recently integrated a slider from into my website, following the installation instructions. However, I seem to be facing some conflicts with another script that controls animated div movements on the same page. Upon loading the page, all elements of th ...

javascriptjqueryhtmlcss

How can you automate the execution of unit tests in Angular before pushing changes to Git?

There have been instances in Angular projects where the unit tests are triggered every time a build is carried out, as well as when running the git push command. In case any tests fail during either of these commands, the process halts until all unit tes ...

javascriptnode.jsangulargitkarma-jasmine

Testing with fundamental authentication

I have been working on developing tests using supertest for my server, but I've encountered a problem. All routes on the server require basic authorization. When I use Postman, I am able to input the login and password into the authorization tab and s ...

javascriptnode.jsexpresspassport.jssupertest

Ensuring consistency of variables across multiple tabs using Vue.js

In my vuejs front-end, a menu is displayed only if the user is logged in. When I log out, the variable isLogged is updated to false, causing the menu to hide. If I have multiple tabs open with the frontend (all already logged in) and I logout from one tab ...

javascriptvue.js

Exploring ways to cycle through an array of objects during a jQuery ajax request

When making a jQuery ajax call to iterate over an API response, I am encountering the issue of receiving undefined data for all elements. Can someone guide me on how to properly iterate through an array of objects in jQuery? I am new to handling iteration ...

javascripthtmljqueryajaxbootstrap-4

AngularJS - retrieving and displaying the selected value from an HTML dropdown menu

Could someone help me figure out why the Land selection is empty when trying to display it as {{ selectCenter.land }}? For reference, here is a functional plunker: http://plnkr.co/edit/Q8jhdJltlh14oBBLeHJ9?p=preview And the relevant code snippet: ...

javascriptangularjs

Transferring data to a view

I have a dilemma with handling user selections from a select option list and a jstree object in Django. My goal is to pass these choices to a Django view for processing and obtain a response. I've encountered an issue where the template fails to load, ...

javascriptjquerydjango

How to show a placeholder in a select input using ReactJS

I'm currently trying to incorporate placeholder text into a select input field using ReactJS, but it doesn't seem to be working as intended. Here is the code snippet I am working with: <Input type="select" placeholder="placeholder"> ...

javascriptreactjs

Can Vue.js be affected by cascading updates?

Presentations by Tom Occhino and other React speakers have discussed how Angular's 2-way bindings can lead to cascading updates, making it challenging to understand. These issues with Angular are unfamiliar to me since I haven't worked with it be ...

reactjsvue.js

Issue arises when attempting to render a component while utilizing window.location.pathname and window.location.hash in conjunction with a navigation bar

I am encountering a problem when attempting to render a react component using a navigation bar. I have experimented with both Switch case and if-statement methods. The first approach involves using window.location.hash, which successfully alters the URL u ...

javascriptreactjswindow.location