Importing partial peer dependencies in Npm

I have a custom npm package with a peer dependency on element-ui.

This package is importing the Pagination component from element-ui:

import {Pagination} from 'element-ui';'

However, when I import this component in my project, the entire element-ui library gets included in the generated js file instead of just Pagination.

My assets are built using Laravel mix, and here's a snippet from webpack.mix.js:

babel: {
    "presets": [
        ["es2015", {"modules": false, "targets": {
                "browsers": ["> 5%", "ie >= 9"]
            }}]
    ],
    "plugins": [["component", [
        {
            "libraryName": "element-ui",
            "styleLibraryName": "theme-default"
        }
    ]]]
}

Interestingly, when I directly import the same Pagination component in my project (not from the custom package), it behaves correctly by only importing Pagination itself.

Any insights into why this might be happening would be greatly appreciated. Thank you!

Answer №1

Successfully resolved by pre-constructing my bespoke bundle, incorporating identical instructions in webpack.config.js

    "plugins": [["component", [
    { 
         "libraryName": "element-ui",
          "styleLibraryName": "theme-default"
        }
    ]]]

Answer №2

After carefully following the documentation provided by elemen-ui on demand, specifically the guide on Import Element on demand - ElementUI Vuejs, I made a slight modification to ensure smooth integration with Laravel.

npm install babel-plugin-component -D

Next, install the babel preset es2015:

npm install --save-dev babel-preset-es2015

To complete the setup, create a .babelrc file in your project's root directory (at the same level as webpack.mix.js) and include the following configuration:

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component", 
      [
        {
          "libraryName": "element-ui",
          "styleLibraryName": "theme-default"
        }
      ]
    ]
    ]
}

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

updating an object using its instance in angular: step-by-step guide

Having multiple nested arrays displaying data through HTML recursion in Angular, I am faced with the task of updating specific fields. Directly editing a field is simple and involves assigning its instance to a variable. arr=[{ "name":"f ...

Executing multiple Ajax requests on CodeIgniter 3 from two separate pages

I am facing a critical need for a code review and unfortunately, I am unsure of where else to seek assistance besides here. Let me outline my current task: I am working on a user profile page that is designed to showcase users' comments. Users have t ...

"Unfortunately, this package has been tagged as private, and cannot be accessed at this

I am facing a problem while trying to publish my Angular library on npm. An error message stating npm ERR! This package has been marked as private. Remove the 'private' field from the package.json to publish it. However, I do not have any priva ...

Challenges with Scaling HTML5 Video onto Canvas

Attempting to extract a frame from an html5 video to generate a thumbnail, but encountering peculiar outcomes when the image is rendered onto canvas. The issue lies in the fact that the canvas displays only a greatly magnified portion of the video! Refer ...

Encountering a type error while trying to use Docker with npm install

Recently, I downloaded the latest Ubuntu docker image and equipped it with node, npm, among other necessary tools. While attempting to perform an npm install on my project, I keep encountering a recurring error. For demonstration purposes, I will only disp ...

Tips for iterating through nested objects with a for loop

Struggling with validations in an Angular 5 application? If you have a form with name, email, gender, and address grouped under city, state, country using FormGroupname, you might find this code snippet helpful: export class RegistrationComponent implemen ...

Experiencing a Typescript issue while trying to set a string as the state of a React component with a specified TS type

I've defined a state in my React component for a specific data type called Color. \\ state const [messageSeverity, setMessageSeverity] = useState<Color>('success'); \\ TS type export type Color = 'success&ap ...

The addition of the URL # fragment feature to Safari's browser caching system

Currently, I am focused on improving the speed of our website. To achieve this, the client is utilizing ajax to preload the expected next page of the application: $.ajax({url: '/some/real/path', ...}); Upon receiving a response from the server ...

Encountering an error while trying to launch Chrome with Puppeteer

Currently, I have set up an elastic-beanstalk instance on AWS and am in the process of creating a pdf export feature on a dashboard using Puppeteer. Although I have successfully tested the application locally, I encountered an error when attempting to run ...

Using Jquery to run a jquery script stored in a variable within jQuery syntax

This question may seem a bit confusing, so allow me to explain further. I am trying to execute a jquery script that is written in a text file obtained through an ajax request. For example, the code I receive from the ajax request looks like this: ($($(" ...

The react transition group fails to add the necessary CSS classes to the specified div

Regardless of whether I utilize React transition group, Tailwind, pure CSS, or any other framework, no transitions seem to occur when I structure my simple component in the following manner. I have experimented with various frameworks, but the outcome rema ...

Unlocking the attributes of Angular form elements: A guide

Imagine we have a form like this <form name="myForm" data-ng-controller="Ctrl"> <input name="input" data-ng-model="userType" data-description="User Type" required> </form> When working in the controller, we can refer to the input el ...

Using the event object with fullCalendar.formatDate: A step-by-step guide

I am struggling to implement the formatDate function with the event object retrieved from the eventMouseOver method and it doesn't seem to be working as expected. Do you have any recommendations? Below is the snippet of my code: eventMouseover: func ...

Error message: Could not locate the class 'NunoMaduroCollisionAdaptersLaravelCollisionServiceProvider'

Encountering an error while attempting to install Composer in a Laravel project. Error message: Illuminate\Foundation\ComposerScripts::postAutoloadDump @php artisan package:discover In ProviderRepository.php line 208: Class 'NunoMadur ...

Converting Typescript library into a standalone global JavaScript file

Currently working on developing a Typescript library that follows this structure: https://i.stack.imgur.com/YyCHk.jpg This includes the following files: restApi.class.ts import { restApiOptions } from '../models/rest.options.model'; import { ...

What could be causing the issue with the JS function that is preventing the button from

I am generating a button dynamically using my JavaScript function and then adding it to the DOM. Below is the code snippet: var button = '<button id="btnStrView" type="button" onclick=' + parent.ExecuteCommand(item.cmdIndex) + ' c ...

jQuery UI Slider is malfunctioning (code example included)

I've implemented a jQuery UI slider on my website, and it's functioning quite well. You can check out the slider HERE. However, I've noticed that when I click on 'back to the top', the page smoothly scrolls up. But when I use the ...

What is the process of refreshing a page post-loading?

I'm working on a fundraising webpage and I want to display the live amount of money raised. Essentially, when one user donates while another is viewing the total amount raised, I want the displayed number to update in real-time. My backend setup incl ...

Autofill functions may not be compatible with input fields generated using JavaScript

Having trouble with browsers not using autocomplete in login overlays generated with JavaScript? It can be really annoying. Any suggestions on how to fix this issue? Should I create a hidden form within the original HTML and then move it into the overlay? ...

Bidirectional Data Binding in AngularJS

In my angular application, there is a dropdown with various values. When a user selects a specific value from the dropdown, I want to display the complete array corresponding to that value. <!doctype html> <html lang="en"> <head> < ...