Is the Vue2 Template compiler malfunctioning?

When compiling my code using webpack(^5.51.1) and vue-loader(^17.0.0), I encountered an issue while trying to run an older project. The error message displayed is as follows:

[webpack-cli] Failed to load '/var/www/webpack.config.js' config
[webpack-cli] Error: Cannot find module 'vue/compiler-sfc'
Require stack:
- /var/www/node_modules/vue-loader/dist/resolveScript.js
- /var/www/node_modules/vue-loader/dist/select.js
- /var/www/node_modules/vue-loader/dist/index.js
- /var/www/webpack.config.js
- /var/www/node_modules/webpack-cli/lib/webpack-cli.js
- /var/www/node_modules/webpack-cli/lib/bootstrap.js
- /var/www/node_modules/webpack-cli/bin/cli.js
- /var/www/node_modules/webpack/bin/webpack.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at require (/var/www/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (/var/www/node_modules/vue-loader/dist/resolveScript.js:5:24)
    at Module._compile (/var/www/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1151:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:999:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/var/www/node_modules/vue-loader/dist/resolveScript.js',
    '/var/www/node_modules/vue-loader/dist/select.js',
    '/var/www/node_modules/vue-loader/dist/index.js',
    '/var/www/webpack.config.js',
    '/var/www/node_modules/webpack-cli/lib/webpack-cli.js',
    '/var/www/node_modules/webpack-cli/lib/bootstrap.js',
    '/var/www/node_modules/webpack-cli/bin/cli.js',
    '/var/www/node_modules/webpack/bin/webpack.js'
  ]
}

I'm unsure of what's causing this issue. I attempted to add @vue/compiler-sfc to my package.json, but it did not resolve the problem. Switching to Vue3 is not a desirable solution since it could potentially cause several other issues.

Additional information can be found in my package.json file: Pastebin link

Answer №1

There appears to be significant updates in vue-loader version 15 and above causing breaking changes. I was surprised to discover that there is a necessity to stick to version 15 after encountering issues. This information was not easily accessible elsewhere...

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

What steps can I take to streamline and simplify this tab controller code?

I'm looking to simplify this jQuery code because I feel like there's repetition. As someone new to JavaScript and jQuery, I've created two tabs with their respective containers containing miscellaneous information. My goal is to have each co ...

The functionality of enabling and disabling dynamic behavior in AngularJs is not functioning as anticipated

As a newcomer to AngularJS, I may have some basic questions. I am currently working on implementing dynamic behavior for a button click event, but it's not functioning as expected. Could this be due to an issue with scope? Below is my HTML code: < ...

Utilizing Selenium and BeautifulSoup to extract data from a website

I am currently in the process of scraping a website that dynamically loads content using JavaScript. My objective is to create a Python script that can visit a site, search for a specific word, and then send me an email if that word is present. Although I ...

Creating HTML code from a .vue component: A step-by-step guide

I am working on developing a simple static site generator that utilizes VueJS. One of the components I have created in Vue is as follows: <template> <div> <v-child v-for="child in children" :title="'Child ' + ch ...

Creating a multilingual website with Nextjs 13 App Router using internalization, all without the need

As I develop a web app that requires user authentication to access, I am currently using Next.js 13 with the App Route (not Pages Route). My goal is to implement internationalization without having to create sub-routes like /en, or use domains such as mywe ...

Guide to implementing the collapsible start and stop button feature in Angular

Having an issue in my Angular application with the dashboard page. I've created a button for start or stop (toggle functionality) but it's not working as expected. .component.ts toggleCollapse(jammer) { this.jammer.isCollapsed ? 'START& ...

Having difficulty grasping the concept of using unicode characters with canvas fillText

I am attempting to showcase special characters in a font using the canvas fillText feature. The code I am employing is as follows: canvas = document.getElementById("mycanvas"); context = canvas.getContext("2d"); hexstring = "\u00A9"; //hexstring = " ...

How come my data is not appearing on the screen despite receiving a result in the console log?

I am facing an issue with displaying data obtained from Supabase. I am passing the data as a prop and using map to iterate over it in order to show the required values. However, despite logging the correct results for `programme.title`, nothing is being re ...

Silky animations in kinetic.js (html5 canvas)

I am seeking a better grasp on kinetic.js animation. Recently, I came across a tutorial at . After experimenting with the code provided, I managed to create an animation that positions my rectangle at x coordinate 100. However, I am struggling to achieve s ...

What is the best way to set up multiple unique uglify tasks in grunt?

I am facing issues when trying to create multiple Uglify tasks in Grunt. Currently, I have to toggle between commenting and uncommenting a task to get it to work properly. I need assistance in generating two separate minified .js files using this plugin ...

The error "TypeError: b.toLowerCase is not a function in the bootstrap typeahead plugin" indicates that

Currently, I am working on implementing autocomplete search using the typeahead plugin version 3.1.1. My implementation involves PHP, MySQL, AJAX, and JavaScript/jQuery. While everything works perfectly with mysqli in terms of displaying suggestions when t ...

Tips for creating a flexible Cell component in react-big-calendar:

Is there a way to make the cell of react-big-calendar flexible depending on the number of events, and enable scrolling? Here is a screenshot showcasing my issue: https://i.stack.imgur.com/K2h69.jpg ...

Tips for sharing content within an iframe

Despite my efforts to find a solution, I have been unable to come across one that aligns with my specific situation. I currently have a form for inputting person data. Within this form, there is an iframe containing another form for adding relatives' ...

The ajaxForm function is failing to execute properly and is not providing any error messages

When trying to use jQuery ajaxForm, I encounter a strange issue. I am attempting to set up a form for file upload with progress percentage tracking. However, my ajaxForm function does not seem to be triggering at all. Below is the code snippet I am usin ...

Is there a way to create an input field that accepts only numbers and behaves like a password field simultaneously?

I am attempting to develop an input field for entering a PIN. I would like the PIN to be masked on mobile devices, similar to how passwords are obscured in password input fields. I came across a suggestion on stackoverflow regarding this, but unfortunately ...

Confusion Surrounding Setting up Laravel 5 with Vue

I have exhausted all my options trying to make vue.js work on Laravel. I cannot find any clear instructions on what needs to be done in order for it to function properly. Despite attempting various methods using npm and composer, I am unable to even run a ...

Any tips for filtering an array within an array of objects using the filter method?

I have an array of products and models that I am currently filtering based on 'id' and 'category'. var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.products = [{ 'id': 1, ...

What is the method for launching a new tab within an incognito window that is already open?

In the process of developing a Chrome extension, I am focusing on the functionality of creating a new tab from context menus within an incognito window. My current approach involves using the following script: chrome.windows.create({url: "https://google.c ...

Modify how the browser typically processes script tags as its default behavior

Most of us are familiar with the functionality of <script src="/something.js"></script>. This loads the specified file onto the page and executes the script contained within. Is there a way to modify how <script> elements are interpreted ...

Navigating through and extracting data from an object in JavaScript

Given the function call destroyer([1, 2, 3, 1, 2, 3], 2, 3);, I am trying to retrieve the last 2, 3 part after the initial array. However, I am unsure about how to achieve this. When I use return arr[6]; or return arr[1][0], both statements do not return ...