What is the best way to designate external dependencies in WebPack that are not imported using '*'?

I need assistance with specifying office-ui-fabric-react as an external dependency in my TypeScript project using Webpack.

Currently, I am importing only the modules I require in my project:

import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button';

Although my current external configuration in webpack.config.js works for React & ReactDOM, it doesn't seem to work for Fabric.

   externals: {
        "react": "React",
        "react-dom": "ReactDOM",
        "office-ui-fabric-react": "office-ui-fabric-react"
    }

Do I need to specify office-ui-fabric-react differently when I am importing only selective modules? Any guidance would be greatly appreciated.

javascripttypescriptwebpack

Answer №1

webpack's <code>externals feature operates in the following way: if you designate office-ui-fabric-react as an external, only imports to office-ui-fabric-react will be recognized as external.

In your scenario, you are performing a deep import (for what reason?) to 

office-ui-fabric-react/lib/Dialog
, which does not match office-ui-fabric-react, hence it was not treated as an external dependency.

You have 2 choices:

  1. Specify each of the deep imports as external; you can utilize the function syntax for externals
  2. Use 
    import {Dialog} from 'office-ui-fabric-react'

Examples:

Using such an import

import get from 'lodash/get';

will necessitate adding lodash/get to externals - with lodash, this is straightforward,

...
externals: {
   'lodash/get': '_.get'    
}
...

Generally speaking, it is not advisable to designate internal components as external dependencies.

Answer №2

After implementing recommendations from @felixmosh, I've managed to resolve the issue regarding the appearance of external dependencies. As a result, none of the office-ui-fabric-react components are included in the final JavaScript file.

externals: {
   "react": "React",
   "react-dom": "ReactDOM",
   'office-ui-fabric-react/lib/Dialog': '_.Dialog, _.DialogType, _.DialogFooter',
   'office-ui-fabric-react/lib/Button': '_.PrimaryButton, _.DefaultButton'
}

Answer №3

Enhance your Webpack configuration with webpack-external-import to efficiently handle external dependencies while maintaining standalone capabilities. Check out this link for more information:

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

The NestJS framework encountered an error due to a method being undefined in the

Encountering Error with NestJS Function create123: TypeError - Cannot read properties of undefined (reading 'create123') The constructor is displayed below \`export class AuthenticationService { constructor( private readonly usersServ ...

node.jstypescriptnestjs

Encountering challenges while integrating Angular with a Laravel forum creation project

Currently, I am working on building a forum application that involves users, posts, and comments using Laravel. However, the next step in my project requires integrating Angular, which is new territory for me and I'm not sure where to start. I have a ...

phphtmlangularlaraveltypescript

The Angular directive was unable to reach the controller located higher up in the DOM hierarchy

template <section id="content" ng-controller="ReservationController as resvnCtrl" > <form role="form" name="resvnCtrl.form"> <div data-date-picker> </div> ...

javascriptangularjs

Obtain the identification address for a group of items

I have a JSON object containing place IDs, and I am attempting to retrieve the corresponding addresses for each ID. This is the code snippet I'm using: <div id="places" class="places"></div> <script> function initialize() { j ...

javascriptjquerygoogle-mapsgoogle-maps-api-3google-places-api

"Bringing in" ES6 for Node

I am interested in utilizing import from ES6 instead of require from common.js in Node. Surprisingly, I initially assumed that import would function automatically in Node. However, it appears that it does not. Is there a specific npm package that needs t ...

javascriptnode.jsecmascript-6

Webpack successfully completed its build process, however, there was no output generated when running

When I run webpack in the command prompt and press enter, the output entry.min.js is generated correctly. However, when I type npm build and press enter, nothing is generated. I'm wondering if there is an issue with my package.json or webpack.config. ...

node.jswebpackbundling-and-minification

The issue of elements flickering while being hidden and shown with jQuery has been observed in both Chrome and

Having trouble with a simple animation using jQuery? While it may work smoothly in Firefox, you might be experiencing flickering in Chrome and Edge. Check out this jsfiddle for reference: HTML <div id="boxes-wrapper"> <div class="box"></ ...

javascriptjquerycssgoogle-chromeanimation

Internet Explorer's support for the `<summary>` tag in HTML

Is there a method to enable the summary tag in Internet Explorer 11, such as using an external library? <details> <summary>Here is the summary.</summary> <p>Lorem ipsum dolor sit amet</p> </details> App ...

javascripthtmlcssinternet-explorer

Error encountered when injecting factory into AngularJS controller

Starting my journey with Angular, I am currently working on my very first angular app. The main goal is to fetch data from an external source and make it accessible to all controllers on my portfolio webpage. This is the structure of my HTML: <!DOCTYP ...

javascriptangularjscontroller

Having issues with Webpack Hot Middleware not reloading properly on React in Ubuntu?

I've encountered a frustrating issue with my webpack-hot-middleware where it's not 'hot reloading'. It builds and rebuilds the project when I make edits to files, but the changes are not displayed. It seems like the files are being cach ...

reactjswebpackwebpack-hot-middlewarehot-module-replacementwebpack-dev-middleware

Storing data from a service into an array in Angular: Best practices

I have a service that provides getter and setter methods, returning id: number and title: String values from my dialog component. I am trying to save these responses into my data array but struggling to achieve it. For instance: 0: {id: 0, title: &qu ...

arraysangulartypescriptserviceresponse

Filtering through an array object with PrimeNG

Is it feasible to utilize an array of objects for filtering data in a table? I'm currently using Angular 6 and PrimeNG 7. This is how my p-table appears: <p-table #table class="ui-table ui-table-responsive" [value]="arrays" [columns]="cols" > ...

angulartypescriptfilterprimengprimeng-turbotable

What is the best way to place text inside a TH element without any text within the TH's child nodes?

When parsing a website and obtaining the instance of a TH element, I use innerText to extract the text I need. However, sometimes there is additional unnecessary text that I want to exclude. Is there a way to only retrieve the top-level text? var th_elem ...

javascripthtml

Error: Unable to access the 'comments' property of a null value

Encountering an issue when trying to add comments to a post, resulting in the error message: TypeError: Cannot read property 'comments' of null Post routes: router.post("/", async (req, res) => { console.log(req.params); Post.findById(r ...

javascriptnode.jsexpressmongoose

Form a collection of JavaScript arrays using a string that includes strings

Here is a string that needs to be converted into a JavaScript array: ['Value',2],['Value2',4],['Value3',10] To convert this to a JavaScript array, the following code can be used: var tmpStrings = "['Value',2],[&ap ...

javascriptarraysjson

Having a problem with the xmlhttprequest, not confident if it is being called correctly

I encountered a problem with the code I have where a user selects a sales center and it should trigger a currency change. Both selections are dropdowns, but when I choose a sales center, I receive an error saying ReferenceError: makeRequest is not define ...

javascriptajax

Requesting Next Page via Angular GET Method for Paginated API

Having trouble loading data from a paginated REST API using the code below. Any suggestions for a better approach are welcome! component.ts import { Component, OnInit } from '@angular/core'; import {HttpClient} from '@angular/common/http&a ...

angulartypescriptpaginationhttpclient

Move the items downwards to occupy any empty space vertically

Just a quick overview of the code I'm working with (I am using Material UI in React). This container is meant to hold chat messages exclusively. const ChatContainer = ({ chatMessages }) => { const classes = useStyles(); return ( <Paper ...

javascriptcssreactjsmaterial-ui

The URL in React Router updates as expected, but when attempting to render a component using a button component link

I have encountered a situation similar to the one portrayed in this CodeSandBox example, where I am required to implement react routing within two distinct components. The issue that is perplexing me is that, when I navigate down to either the Profile or ...

javascriptreactjsreact-routermaterial-ui

Guide on organizing an array of objects by the sub-part of their property values

Is there a way to order the elements in the given array based on a custom criteria related to the last 3 letters of 'prop2' in descending order? The specific order should be 'ABR', 'FDE', 'ZFR'. Another array needs t ...

javascriptarrays