Unable to locate module in Vue.js when using browserify

When trying to use almost every npm package with vue.js 1.0, I keep encountering this frustrating error:

{ Error: Cannot find module '!!./../../../node_modules/css-loader/index.js!./../../../node_modules/vue-loader/lib/style-rewriter.js!./../../../node_modules/vue-loader/lib/selector.js?type=style&index=0!./dashboard.vue' from '/Users/jamie/Code/forum/node_modules/vue-html5-editor/dist'
    at /Users/jamie/Code/forum/node_modules/resolve/lib/async.js:46:17
    at process (/Users/jamie/Code/forum/node_modules/resolve/lib/async.js:173:43)
    at ondir (/Users/jamie/Code/forum/node_modules/resolve/lib/async.js:188:17)
    at load (/Users/jamie/Code/forum/node_modules/resolve/lib/async.js:69:43)
    at onex (/Users/jamie/Code/forum/node_modules/resolve/lib/async.js:92:31)
    at /Users/jamie/Code/forum/node_modules/resolve/lib/async.js:22:47
    at FSReqWrap.oncomplete (fs.js:117:15)

This issue has been driving me crazy! I'm using vue.js in conjunction with browserify. Despite searching extensively online, including:

https://github.com/webpack/css-loader/issues/240 https://github.com/webpack/css-loader/issues/180 https://github.com/webpack/css-loader/issues/295 https://github.com/webpack/css-loader/issues/163

I have yet to find a solution that works for me. What could be the problem?

The two packages where I have encountered this problem are:

https://github.com/lian-yue/vue-upload-component/
https://github.com/PeakTai/vue-html5-editor

Here is my gulpfile:

const elixir = require('laravel-elixir');
require('laravel-elixir-vueify');
require('laravel-elixir-stylus');



    elixir(mix => {
        mix.browserify('main.js');
        mix.styles([
                './node_modules/normalize-css/normalize.css',
                './node_modules/nprogress/nprogress.css',
                './node_modules/sweetalert/dist/sweetalert.css',
                ]);
        mix.stylus('app.styl');
    });

A helpful solution would be greatly appreciated.

--EDIT--

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "laravel-elixir": "^6.0.0-9",
    "laravel-elixir-browserify-official": "^0.1.3",
    "laravel-elixir-stylus": "^2.0.3",
    "vue-html5-editor": "^0.5.1"
  },
  "dependencies": {
    "browserify": "^13.1.0",
    "laravel-elixir-vueify": "^2.0.0",
    "normalize-css": "^2.3.1",
    "nprogress": "^0.2.0",
    "stylus": "^0.54.5",
    "sweetalert": "^1.1.3",
    "vue": "^1.0.26",
    "vue-resource": "^0.9.3",
    "vue-router": "^0.7.13",
    "vue-spinner": "^1.0.2",
    "vue-upload-component": "^2.0.0-beta"
  }
}

Answer №1

Those packages are configured for webpack, while you are currently using browserify. If you want to utilize webpack packages, it's recommended to switch to using webpack as your bundler.

I attempted to install the vue-upload-component package with browserify and elixir to see how straightforward it would be, but it proved to be quite cumbersome. The package requires babel transforms to compile the Vue files, necessitating manual pulling in of these files and likely the creation of an elixir extension to utilize these transforms effectively. This process would need to be repeated for each webpack package installed, which is definitely not user-friendly.

Answer №2

After some trial and error, I managed to tweak the configuration output of the Vue component I was trying to implement by switching from using webpack to webpack -p.

This allowed me to eliminate the hot module code in the output so that I could then process it with browserify:

browserify file.js --standalone SomeLibrary > file.browser.js

In this command, file.js represents the modified output from webpack -p, SomeLibrary specifies the desired global window scope name after browserify packaging, and file.browser.js is the resulting file ready to be integrated into the project.

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

Can dependency injection be implemented while utilizing the new operator?

My goal is to incorporate a strategy pattern into my program. Specifically, I want to be able to determine at runtime which class to create an instance of. Implementing this may seem straightforward at first: if(...) { this.service = new ServiceA(); } el ...

Having trouble compiling a Vue.js application with TypeScript project references?

I'm exploring the implementation of Typescript project references to develop a Vue application within a monorepo. The current structure of my projects is outlined below: client/ package.json tsconfig.json src/ ... server/ package.json t ...

Anchor tag images are not functioning as clickable links

I recently created a portfolio that showcases my work through a grid of images. My intention was for each image to link to another page providing more details about the project when clicked. However, I am encountering an issue where the anchor tags are no ...

Is there a way to dynamically register an external component in Vue3 without altering the main project?

In my current project, known as "ProjectMain," I am also working on another project that will act as an extension to ProjectMain - let's call it "MyComponent." My intention is to create MyComponent as a standalone library. My main question is: can I ...

The background image for a pseudo element is not functioning as expected

After researching various solutions on Stack Overflow, I attempted to set fixed dimensions for the pseudo element (height: X px; width: X px;), but this is not an ideal solution for me as I require a scalable and responsive image that fits its parent eleme ...

Error: When using the ajax method, there is an issue with reading the 'forEach' property of an undefined object

Here's the ajax function I'm working with: <div class="quiz-box"></div> ... const url = window.location.href const quizBox = document.getElementById('quiz-box') let data $.ajax({ type: 'GET', url: ...

`vue.js pagination for loading nested arrays`

I am currently working on implementing the vue-paginate component from this source: https://www.npmjs.com/package/vue-paginate . My goal is to set up pagination for questions retrieved from firebase. Here is the initial setup: new Vue({ el: '#app& ...

"Facing an issue with Django paginator where redirecting to the same page after submitting a form in views.py is not

I have encountered an issue where, after submitting a form that fetches a view from views.py, the page reloads back to page 1 due to the paginator. My goal is for the browser to remain on the same page upon form submission. The error message I am receiving ...

Using PHP's header function to alter directories

So I am currently diving into PHP and facing a challenge with using headers. My setup involves using xampp for development purposes. I have a basic form where users can log in on "index.php". Upon successful login, the header function kicks in to redirect ...

What is the method for striking through a line in a table?

I developed a unique jQuery script: <script type="text/javascript"> $(document).ready(function () { $('tr.inactive').each(function (index) { var tr = $(this); tr.find('td:first').after(function ...

Using an object to set formData

Currently, I am facing an issue with my state and formData. When I type some text, instead of changing fullName.firstName, it creates another property and sets a single letter value. https://i.sstatic.net/kZQJy.png const [formData, setFormData] = useStat ...

Why does including a URL string variable in a conditional 'gotoIf' statement in Selenium IDE cause a Syntax error?

I have a task of storing the current URL ( in a variable and then comparing it with another string as a condition within the gotoIf command (part of the gotoIf extension.js): storeLocation || url gotoIf || ${url}=="http://example.com" || label Ho ...

Differences in the way the setInterval function is implemented in Electron compared to Chrome and

I recently started using electron and I've encountered an issue related to the setInterval() function. The problem arises when I import a library called exiftool-vendored which has a dependency on another library named batch-cluster. The batch-cluste ...

Typescript indicates that an object may be 'undefined' when the value is an empty string

I'm new to Typescript and currently working on converting our application from React JSX to TS. If I'm misunderstanding the error, please let me know. I've encountered the error message Object is possibly 'undefined' related to a ...

Displaying an array of data using ng-repeat, only showing records where the value is found within a field of another object

Within my project, I am working with two types of objects: 'ing' containing fields 'id' and 'field', and 'fObj' containing a field named 'contain'. Using ng-repeat, I am trying to display only those ' ...

Unable to pass a variable through ajax to another PHP file

I am currently facing an issue with passing a variable from one PHP file to another using ajax. In my 'index.php' file, there is a button that, when clicked, should pass the button's id to another PHP file named 'show_schedule.php' ...

Installing global confusion with NPM

npm install css-sprite --save npm install css-sprite -g I'm curious about the significance of these two commands. I understand that "-g" makes it global, but why is that important? And what does "--save" do exactly? ...

Tips for making li elements scroll horizontally whilst fitting all elements on one line exclusively using CSS

I am attempting to alter the default scrolling behavior of li elements from vertical to horizontal in HTML. I have successfully achieved this, but the output displays a succession of lists in a line, followed by another list below it. However, I desire to ...

Utilizing a retrieved access token (in JSON format) within the endpoint URL: Best practices

What is the correct way to include a fetched access token (JSON) in the endpoint URI using JavaScript? Example of Returned JSON {token_type: 'Bearer', expires_at: 1681425284, expires_in: 15892, refresh_token: 'fetched_refresh_token94f5c1f7f ...

Having trouble with Safari on your iPhone? Seeing image outlines peeking through radius borders?

Has anyone encountered a similar issue before? I'm experiencing this problem specifically on Safari for iPhone. Problem: https://i.sstatic.net/ffqWz.jpg Solution: https://i.sstatic.net/z1bUB.png Below is the HTML code snippet: <div class="row"& ...