The CssDependency dependency type in vue-cli@3 does not have any module factory available

After using vue-cli@3 to

npm run build

The system showed an error message: 

No module factory available for dependency type: CssDependency

I have extensively searched for related solutions, but they all pertain to Angular. I also attempted the following steps:

  1. rm -r node_modules
  2. rm package-lock.json
  3. npm i

Despite these efforts, the error persists. Can someone please help me resolve this issue?

Below are the specific details of the error encountered:

ERROR  Error: No module factory available for dependency type: CssDependency
Error: No module factory available for dependency type: CssDependency
    at addDependency (E:\Games\hitokoto\node_modules\webpack\lib\Compilation.js:800:12)
    ... (remaining stack trace omitted for brevity)

Furthermore, here is a snippet from my package.json file:

{
  "name": "hitokoto",
  "version": "0.1.0",
  ...
}
javascriptvue.jswebpackvue-cli

Answer №1

I encountered a similar issue and discovered that the problem was linked to the capitalization of the path used while executing the npm run build command.

To address this, I navigated through either Powershell or cmd with the following commands:

C:\> cd C:\git\testing
C:\git\testing> npm run build

The error persisted even after performing these steps.

Afterward, I tried this (noticing the uppercase GIT):

C:\>cd C:\GIT\testing
C:\GIT\testing> npm run build

Upon making this adjustment, the process succeeded. For reference, I am using Windows 10.

Answer №2

this issue could potentially be stemming from the MiniCssExtractPlugin, it requires both module/rules and plugins to function properly

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//setting up module\rules
{
    test:/\.css$/, 
    use:[{loader: MiniCssExtractPlugin.loader},{loader:'css-loader'}]
},

//adding plugins
plugins:[
 new vueLoaderPlugin(), new MiniCssExtractPlugin()
]

for more details, please check out: https://github.com/webpack-contrib/mini-css-extract-plugin/issues/493

Answer №3

Give this a shot as well. I personally found success using this approach. Simply insert the following code into your vue.config.js:

css: {
 extract: false
}

Answer №4

When I ran the command

npm run build

in GIT bash, I encountered a problem. It seems like the issue was caused by file paths being case-sensitive. Once I switched to the regular command line, everything worked smoothly.

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 is the best way to retrieve the parent of the initial jQuery object?

At the bottom of a lengthy table containing multiple button.enter-match elements, I am using the following code: $("button.enter-match") .button() .on('click', function() { $("form.enter-match").dialog({ modal: true, height: ...

javascriptjquery

Unable to capture screenshot of hovered element using Cypress

Having an issue with taking a screenshot of an element with a hover effect. The screenshots always come out without the hover effect applied. tableListMaps.lineWithText('Hello world', 'myLine'); cy.get('@myLine').realH ...

javascriptreactjscypress

Ways to verify the timeframe between two specific dates

Having two distinctive arrays: accomodation: [ { id: 1, name: "Senator Hotel Fnideq", address: "Route de Ceuta, 93100 Fnidek, Morocco", checkin: "September 1", fullCheckinDate: "2021-09-01", ...

javascriptarraysvue.jsobjectdayjs

Transform the JSON data to generate a fresh JSON output

I'm seeking help to develop a script that generates JSON data based on specific conditions. As of now, I believe my logic is correct. Any assistance would be greatly appreciated. CURRENT ISSUES: [resolved]I am unable to determine why the duration ...

javascriptjsontimestamp

Is there a way to determine if jQuery lightslider has been initialized, and if so, how can I effectively remove the instance?

Currently, I have integrated the JQuery lightSlider into my project. Despite some code adjustments, it is functioning well. My goal is to dynamically replace the lightSlider content with data returned via AJAX, which I have successfully achieved. After r ...

javascriptjqueryhtmlcssajax

Unable to retrieve content in NGX-Quill upon submission

I am currently using "ngx-quill": "^14.3.0" along with "@angular/core": "~12.2.0". It is registered in the app module: QuillModule (not for root). And also in the lazy loaded module: QuillModule (not for root). public editor = { toolbar: [ ...

javascriptangularquillngx-quill

Press the button using Selenium WebDriver with Java

Currently, I am utilizing Selenium Webdriver for Chrome and Firefox along with Java. After performing various actions, I stumbled upon a typical source code snippet like this: <input type="button" value="yoyo" class="btn" onClick="SubmitForm(this, &ap ...

javascriptjavaseleniumselenium-webdriver

Invoking a function from a separate JavaScript file and finding out that an object is considered null

The source code for a word game is stored in Main.js file. Currently, I am attempting to introduce another file called Bookmarks.js (included on the web page prior to the Main.js file). This new file will contain an object var bookmarks = {}; that stays s ...

javascriptjquery

Javascript Rest for y moments

My website's JavaScript function uses AJAX to retrieve account information and open a modal for viewing and editing. Sometimes, the details don't update quickly enough in the database before the function collects them again, leading to discrepanc ...

javascriptjquerysleep

What is the best way to manage the POST method in NextJS?

I am currently delving into the realms of NextJs(TS), Prisma, and MySQL with the aim to implement my learnings in ReactJS. However, I seem to be encountering some difficulties when attempting to make a POST call. Here's an overview of my project dire ...

javascriptreactjsnode.jsaxiosnext.js13

Alternative method for displaying text in Discord

At the moment, my discord bot is set up to read from a file and post the new data in that file to a specific channel. I am interested in modifying the output so that any characters enclosed in ~~ are displayed as strikethrough text. const Bot = require( ...

javascriptnode.jsdiscord.js

The CSP header is configured incorrectly, please correct it

Having trouble with my website's JavaScript. The dropdown box in Bootstrap isn't working on the main page, but works fine in a sub-directory. My CSP header is: script-src 'self' //ajax.cloudflare.com According to the CSP documentation ...

javascripttwitter-bootstraphttp-headers

Controlling User Roles within a React JS Application

Which libraries do you rely on for managing user roles in your React projects? All suggestions and advice are appreciated. Specifically, I am interested in controlling the visibility of different application components based on the user's role. ...

javascriptreactjsredux

Set up ExpressJS to utilize port 3000 for the server

I am working on an app where the backend is currently running on localhost:8000, but I need it to run on port 3000. Specifically, I am using an express server for this example. How can I configure it to run on the desired port? Below is my current server. ...

javascriptexpressroutes

What is the best way to eliminate the hash from the URL of a single-route Angular application without the need for ui.router?

I came across a question that has been asked before on Stack Overflow, but unfortunately, it remains unanswered and without any comments. In my Angular app, I am working with a single route and I want to find a way to eliminate the # from the URL. If I h ...

javascriptangularjs

Can angular and grunt support multiple run blocks simultaneously?

Currently, I am configuring $httpBackend to simulate fake API routes while our team of API developers is building them out. However, I am facing an issue where I have to place all the $httpBackend configurations within my run block. This leads to a situa ...

javascriptangularjsgruntjs

Tips for exchanging divs in a mobile view using CSS

Illustrated below are three separate images depicting the status of my divs in desktop view, mobile view, and what I am aiming for in mobile view. 1. Current Status of Divs in Desktop View: HTML <div id="wrapper"> <div id="left-nav">rece ...

javascriptjqueryhtmlcss

Unable to successfully create a dynamic anchor tag and open it in a new tab

I am receiving a PDF link in an AJAX response and I would like to manually trigger the download. Here is the code that I am currently using: var fileLink = document.createElement('a'); fileLink.href = responseData.PDF_LINK; fileLink.setAttribute ...

javascriptjquery

Is there a method to make this package compatible with Angular version 16?

I recently integrated the ngx-hotjar package version 11.0.0 into my Angular 10 project with success. However, when trying to use it in a new Angular 16 project, I encountered the following error during ng serve: Error: src/app/app.module.ts:275:12 - error ...

javascriptangulartypescript

Inject data from ajax into the body of the html document

Is it possible to retrieve values from an ajax call and insert them into the body of an HTML document? Here is an example: function check() { $.ajax({ url : '/check', datatype : 'json', async ...

javascriptjqueryhtmlajax