Error: Unable to locate the module: Vue-Picture-BD-Marker

After successfully building my Vue project on my personal MacBook and running npm build without any issues, I encountered a problem when trying to deploy it on my CentOS server using Jenkins. The build failed with the following log:

ERROR in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/views/Mark.vue
Module not found: Error: Can't resolve 'Vue-Picture-BD-Marker' in '/app/src/views'
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/views/Mark.vue 50:0-49
 @ ./src/views/Mark.vue
 @ ./src/router/index.js
 @ ./src/main.js[39m[22m

  Build failed with errors.

I'm seeking help to address this issue as I am quite perplexed by it. Any assistance would be greatly appreciated.

The deployment is successful if I do not import 'vue-picture-bd-marker', however, this module functions correctly in my local environment.

The entire Jenkins log is displayed below:

Step 1/12 : FROM node:10 as build-stage
 ---> 28dca6642db8
Step 2/12 : LABEL maintainer="finn"
 ... (log continues)

Answer №1

After making a simple adjustment, I successfully resolved the issue by swapping out

import {AIMarker} from "Vue-Picture-BD-Marker"
with
import {AIMarker} from "vue-picture-bd-marker"
. It's worth noting that while macOS and Windows are not case-sensitive when it comes to file paths, Linux is.

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

unable to render axios retrieved data in vuejs v-for loop

After checking VueDev tools, it appears that the axios get request is returning a data array. However, despite my efforts, I am unable to display this data. (I'm clearly new at this!) Any ideas on what step I may be missing? <template> < ...

Optimizing Style Inclusion Order with Vue SFC, vue-loader, and webpack

My Vue/SFC/webpack/vue-loader application integrates bootstrap using 'import', with component styles directly included in the SFCs. However, vue-loader always places bootstrap after the component styles, preventing proper overwrite/cascade over b ...

What could be causing TypeScript to not locate my custom package?

I decided to create a fork of an existing package and released it with a new, distinct name: https://www.npmjs.com/package/feed-media-fork After tagging a new version, setting up a release on GitHub, and running yarn add feed-media-fork or the equivalent ...

Incorporating jQuery into Rails 6.1

I encountered some difficulties while setting up jQuery in rails 6.1, even though I believe it's configured correctly. Below are the steps I've taken: Installed yarn add jquery 2. In config/webpack/environments.js, I made the following changes ...

Error encountered: Unable to resolve dependency tree in React due to ERESOLVE issue in npm

I've been working on a MERN project where I used the command: npm i react-router-dom axios react-paypal-express-checkout However, during this process, I encountered the following error: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve depe ...

Error encountered while mounting the 'vue-table-2' component in a Vue.js application: "Component mounting failed."

Just starting out with Vue.js and feeling a bit lost... I really want to give 'vue-table-2' a shot after seeing it in action here: (https://jsfiddle.net/matfish2/jfa5t4sm/) but I'm having trouble getting it to work properly. "dependencies" ...

The declaration file for module 'react-scroll-to-bottom' appears to be missing

I recently added react-scroll-to-bottom to my project and it is listed in my dependencies. However, I am encountering the following error: Could not find a declaration file for module 'react-scroll-to-bottom'. The path 'c:/Users/J/Desktop/w ...

Do you desire the package.json file to rely on a particular npm version and have it installed accordingly?

Is there a way to make package.json depend on a specific version of npm and have it installed? I know about NVM, but I'm not sure if that will solve my problem. Ideally, I would like to receive an error message if npm does not meet the specified versi ...

Nuxt Static Site encountering issues with displaying dynamic content on 404 Error page

Edit I recently resolved the issue of the error template not loading correctly by fixing an htaccess problem. By adjusting the ErrorDocument to be /sub/dirs/error.html (without the dist folder), I was able to get it to work properly. However, I am still fa ...

What are the ways to activate an element in vue js?

Is there a way to modify the code so that the function triggers with just one click instead of two? export default { methods: { remove(){ $('.remove-me button').click( function() { removeItem(this); }); ...

What is the best way to define the active-class for nuxt-links with parameters?

Here is the issue I am facing with my code. I have a piece of code where the "/ " link does not get the active-class when the URL is domain.com/?standalone=true. <nuxt-link to="/" class="navBotton" exact-active-class="active&q ...

What is the process for transferring a file uploaded from a Vue front end to a Laravel controller?

I'm facing an issue with passing file data from a Vue file upload form to a Laravel controller. Although the data is successfully passed from the page to the store in Vue, I'm unable to access it in my controller: Vue page: update() { this.$st ...

Establish a guideline based on a data property for a form input in vueJS

I recently visited a page at https://vuetifyjs.com/en/components/inputs Upon exploring, I discovered the ability to customize rules, such as: rules: [ value => !!value || 'Required.', value => (value || '').length < ...

What is the best way to run a series of basic commands in Node.js in sequence

Is there a way to execute 4 bash commands sequentially in nodejs? set +o history sed -i 's/&& !this.peekStartsWith('\/\/')/ /g' dist/vendor.bundle.js sed -i 's/&& !this.peekStartsWith('\/\/ ...

Deleting a record by sending an HTTP request and then removing the corresponding object from an array in Vue.js

After successfully solving this particular issue with the help of @nils, I have encountered a new question that I hope someone can assist me with! My current situation involves having a list of records from which I can select and remove items with just on ...

What is the most effective way to execute it blocks simultaneously in Protractor?

My specification file contains a total of 50 test cases focusing on a specific scenario. Each individual test case is outlined within its own designated it block. The execution time for the spec file amounts to approximately 2 hours. I am looking for a w ...

Vuex - Managing dependencies within nested modules

I am facing a challenge in expressing a dependency between properties within my app's state using Vuex. Upon logging in, the user must select one of several workspaces to connect to. It is essential for the workspace to depend on the login status; ho ...

Having trouble executing a React Native project because of react-native-gesture-handler

After adding react-navigation and react-native-gesture-handler to my project, I encountered an error when running it with react-native run-android: What's the issue: Could not compile settings file 'C:\Users\pc\Desktop\GST ...

Is it advisable to manually specify paths to my node_modules directory in the code?

I'm in the process of developing an npm package named ctgen and I am facing a dilemma regarding referencing a specific folder within the package. Should I directly specify the path to that folder in my code? For example, should I use: src = './n ...

What is the most effective method to install an npm package on an offline computer, guaranteeing the inclusion of

My current situation requires me to work on a computer network with no internet access. I'm interested in using jsbin for SharePoint/Windows development, as it is highly recommended for its npm installation that ensures all necessary dependencies are ...