Is it possible to utilize a library from one repository and integrate it into a different repository's web application through Webpack?

I have a collection of Vue.js components in a library, and I also have a Vue web application that imports these components. Both are using Webpack and are stored in separate repositories.

Prior to utilizing webpack, I was using browserify-hmr and could easily import the library into my web pack development environment using npm link. It essentially accomplished the same as

import '../../../library/index.js'

However, with Webpack, I encounter an error message like this:

ERROR  Failed to compile with 1 error
1:16:18 PM

This dependency was not found:

* !!vue-style-loader!css-loader!../../../web-app/node_modules/vue-loader/lib/style-rewriter
?id=data-v-6afebbcb!sass-loader!../../../web-app/node_modules/vue-loader/lib/selector
?type=styles&index=0!./Component.vue in ../TheLibrary/src/Component.vue

To install it, you can run: npm install --save !!vue-style-loader!css-loader
!../../../web-app/node_modules/vue-loader/lib/style-rewriter?id=data-v-6afebbcb
!sass-loader!../../../web-app/node_modules/vue-loader/lib/selector?type=styles
&index=0!./Component.vue

I am attempting to locally make changes to the library and import it into my web app without the need to push the library changes and pull module updates from the web app. Is there a way to achieve this with Webpack?

It's worth mentioning that the webpack project was set up using the following template: https://github.com/vuejs-templates/webpack

Update

The reason for the error is due to a missing dependency, https://www.npmjs.com/package/susy, which is not installed on the web app. Once I add this dependency to the web app, the error disappears.

Any suggestions or solutions to address this issue?

Answer №1

One effective solution for your situation would be to transfer your shared functionality to an npm package and incorporate it into the dependencies of both webpack projects. It's a smart approach that can streamline your workflow!

Answer №2

After much searching, I have finally found a solution to my issue. It seems that the key lies in webpack's resolver. In webpack v1, everything worked smoothly, possibly due to a specific line in the build/webpack.base.js

resolve: {
  fallback: [path.join(__dirname, '../node_modules')],
  ...

However, in webpack v2, things don't function the same way. My temporary solution involves making some changes...

resolve: {
  modules: [
    path.join(__dirname, '../node_modules/TheLibrary'),
    ...

This modification enables the search for dependencies within the symbolically linked library.

Note: If TheLibrary itself contains a symbolically linked library, then you must also include it under the main web app directory using a similar approach...

resolve: {
  modules: [
    path.join(__dirname, '../node_modules/TheLibrary'),
    path.join(__dirname, '../node_modules/TheLibrary/node_modules/Component'),
    ...

I am still open to discovering more efficient solutions :)

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 dynamically update the selected option in a dropdown menu within a Rails application using a variable?

Working on a project that involves a select drop-down menu containing a list of currencies. Want to enhance user experience by automatically selecting the default value in the dropdown based on the user's country (will be utilizing the geoip gem). To ...

Data loss from AngularJS multipartForm directive when redirecting to different routes

Having trouble with an Excel file uploader and data parsing in the routes? It seems like the FormData is getting lost when sent through the $http service route. Any advice or experience on how to handle this issue would be greatly appreciated! Html View: ...

The JavaScript jump function quickly moves back to the top of the webpage

Issue Resolved To prevent the view from jumping to the top of the page, I have implemented three options: Set the href attribute to href="#!" Set the href attribute to href="javascript:;" Pass the object to the event-handler and preve ...

What is the best way to extract specific information from an API using AJAX and Axios?

I can't figure out what I'm doing wrong when trying to access a URL from an API using Axios. For instance, I'm attempting to select the following URL: "https://media4.giphy.com/media/yy6hXyy2DsM5W/giphy-downsized.gif?cid=482277c2s3j1s8uell6v ...

Using knockout to data bind a function to an onclick event that takes in multiple parameters

I've scoured the internet and experimented with various methods, but I'm encountering an issue where the click function intermittently fails to fire. Below is my HTML code snippet: <input type="radio" data-bind="checked:a, checkedValue: 0 ...

Issue with the recursive function in javascript for object modification

I have all the text content for my app stored in a .json file for easy translation. I am trying to create a function that will retrieve the relevant text based on the selected language. Although I believe this should be a simple task, I seem to be struggl ...

Tips for creating redux-form with source mapping?

What steps should I take to view the unminified code of redux form in Chrome by building it myself? I attempted to create a local version and connect it to my project using npm link, but I still see the babel output instead of the clean source files. Addi ...

Incorporate SCSS capabilities into a Vue project

The default content of my packages.json file includes the following: "postcss": { "plugins": { "autoprefixer": {} }} Whenever I try to compile using <style lang='scss'>, it doesn't work automatically like it does for Typescript. I ...

What is the best method to reset values in ngx-bootstrap date picker?

At the moment, it is only accepting the most recently selected values. To see a live demo, click here. ...

Increase the progress bar at regular intervals of x seconds

I am looking for a jQuery UI progress bar that will increase by x amount every x seconds. Once it reaches 100%, I need it to trigger a function to retrieve some content. Essentially, I need a timer-like feature. EDIT: Note that I do not require any code ...

Having trouble with create-react-app? Seeking assistance from the community! Your help would be greatly

Recently attempted to build my first React app, but it seems like React is not in the mood to greet me. After installing Node.js and create-react-app, double-checking their versions to ensure proper installation, I proceeded to create the React app using t ...

Decoding the Blueprint of Easel in JavaScript

Recently, I came across a fantastic API that promises to simplify working with CANVAS by allowing easy selection and modification of individual elements within the canvas. This API is known as EaselJS, and you can find the documentation here. While I foun ...

problem when trying to establish the minimum height for a div element prior to the website being fully loaded, considering the

Having trouble with a CSS issue that seems simple but I can't find a solution for. I have a main div with a min-height set to a certain value, specified in %. Since there is no outer div, the min-height won't display if it's given in px. I ...

HTML5 allows users to choose data from a list using a ComboBox and submit the 3-digit code

I'm looking to enhance my form by including an input box where users can select airports, similar to the functionality on this website (). When typing in the Destination Input, I want users to see a list of possible values with detailed suggestions su ...

Steps for resetting the counter to 0 following an Ajax Refresh or Submission to the database

I have been working on a code that successfully sends multiple data to a MySQL Database using JQuery Ajax. Everything works smoothly, but I encountered an issue when trying to refresh the page with ajax and add a new record; it populates the number of time ...

Error in saving webpage as HTML

I have integrated FileSaver.js into my project to enable users to save web pages as HTML. The code below is triggered when a user clicks on the download button: var originalstr=$.ajax( { type: "GET", url:"url", async: false }).resp ...

How to fix the 'MODULE_NOT_FOUND' issue when combining Tailwind CSS with npm and yarn

While trying to incorporate Tailwind CSS into my project using the command "npx tailwindcss init", I ran into an error message: npm ERR! code MODULE_NOT_FOUND npm ERR! Cannot find module './yarn-lock.js'. What steps should be taken to resolve ...

Trouble arises from duplicating custom SCSS code while making modifications to SaaS variables in vue.config.js

My goal is to create a structure for overriding Vuetify variables values. However, I am facing an issue where the custom scss files with custom classes that I import end up being repeated multiple times - 92 times to be precise. I have successfully overri ...

Parsing of the module failed due to an unexpected character appearing when trying to insert a TTF file into the stylesheet

As a newcomer to Angular, I recently completed the tutorial and am now working on my first app. While trying to add an OTF file, everything went smoothly. However, when I made a change to my app.component.css file and included this code snippet: @font-fa ...

Tips for maximizing the benefits of debounce/throttle and having a truly dynamic experience

Attempting to implement a similar concept in Vue: props(){ debouncing: {type: Number, default: 0} }, methods: { clicked: _.debounce(function() { this.$emit('click'); }, this.debouncing), } Unfortunately, the code breaks when ...