The module imported by Webpack appears to be nothing more than a blank

Question

The module imported by Webpack appears to be nothing more than a blank

I am attempting to integrate the "virtual-select-plugin" library into my Typescript project using webpack. Unfortunately, this library does not have any type definitions. Upon installation via npm, I encountered the following error in the browser:

TypeError: virtual_select_plugin__WEBPACK_IMPORTED_MODULE_13___default(...).init is not a function

Surprisingly, Typescript and webpack did not raise any errors.

In comparison, webpack successfully handles other libraries like bootstrap and flickity without any issues:

...

/* harmony import */ var flickity__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! flickity */ "./node_modules/flickity/js/index.js");
/* harmony import */ var flickity__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(flickity__WEBPACK_IMPORTED_MODULE_2__);

...

/* harmony import */ var virtual_select_plugin__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! virtual-select-plugin */ "./node_modules/virtual-select-plugin/dist/virtual-select.min.js");
/* harmony import */ var virtual_select_plugin__WEBPACK_IMPORTED_MODULE_13___default = /*#__PURE__*/__webpack_require__.n(virtual_select_plugin__WEBPACK_IMPORTED_MODULE_13__);

...

An observation made was that

var flickity__WEBPACK_IMPORTED_MODULE_2__

contains properties and functions, while

var virtual_select_plugin__WEBPACK_IMPORTED_MODULE_13__

appears as an empty object. The code from virtual-select-plugin is imported later in the bundle from the file

"./node_modules/virtual-select-plugin/dist/virtual-select.min.js"

.

To address this issue, I created a typedef in decs.d.ts:

declare module 'virtual-select-plugin'

The plugin is imported with the following statement:

import VirtualSelect from 'virtual-select-plugin';

Subsequently, when attempting to call the init function:

// However, the browser says no...
VirtualSelect.init({
  ele:     ...,
  options: ...,
});

An alias has been included in the webpack configuration:

...

  resolve: {
    alias:      {
      'virtual-select-plugin': 'virtual-select-plugin/dist/virtual-select.min',
    },
    extensions: [
      '.js',
      '.jsx',
      '.ts',
      '.tsx',
    ],
  },

...

After spending 6 hours on research, I still cannot find a solution. Any assistance would be greatly appreciated. Thank you.

typescript webpack

Answer 1

Answer №1

I decided to incorporate the minified js file through the DOM and move necessary files from node_modules to dist using webpack.

I found a workaround that I'm not entirely satisfied with, as it may become cumbersome with larger libraries. However, it could potentially benefit others with smaller libraries.

tl;dr: Essentially, I imported the source files of the library and compiled them myself.

Installed the dependencies popover-plugin and popper-plugin (as per browser instructions)
Updated/added resolve aliases in the webpack configuration

  resolve: {
    alias:      {
      'virtual-select-plugin': 'virtual-select-plugin/src/virtual-select',
      'PopoverComponent':      'popover-plugin/src/popover',
      'PopperComponent':       'popper-plugin/src/popper',
    },
  ...
  }

Imported these dependencies into the code (note the usage of braces around VirtualSelect)

import {VirtualSelect} from 'virtual-select-plugin';

require('PopoverComponent');
require('PopperComponent');

No need to include the two extra libraries in the declaration since TypeScript does not utilize them.

How I arrived at this solution

I received some advice indicating that a webpack-imported library must have an export (though I am uncertain about this). The minified js file for "virtual-select-plugin" lacked one. However, the src file (src/virtual-select.js) did export "VirtualSelect".

To address this, I directed webpack to that particular file by adjusting the alias of 'virtual-select-plugin' as mentioned above. Due to the absence of a default export, I had to enclose VirtualSelect in braces during the import process import {VirtualSelect} ...

Upon refreshing the page, the browser raised an error regarding the "missing undefined PopoverComponent". Upon reviewing the code, I observed a reference to that component. Since it was not defined elsewhere, I examined the package.json of the library and identified it there. Subsequently, I installed the package as a dev dependency, added the alias to this library, and included a require statement in my project's code (refer to steps 2 and 3 above).

After another refresh, the browser alerted me about the "missing PopperComponent". I repeated the same procedure as with the PopoverComponent. Everything now functions smoothly.

I am confident that this method can be applied to any small library. Nevertheless, there might be a more efficient approach available. Perhaps webpack is incapable of directly importing plain JavaScript?

Answer 2

I decided to incorporate the minified js file through the DOM and move necessary files from node_modules to dist using webpack.

I found a workaround that I'm not entirely satisfied with, as it may become cumbersome with larger libraries. However, it could potentially benefit others with smaller libraries.

tl;dr: Essentially, I imported the source files of the library and compiled them myself.

Installed the dependencies popover-plugin and popper-plugin (as per browser instructions)
Updated/added resolve aliases in the webpack configuration

  resolve: {
    alias:      {
      'virtual-select-plugin': 'virtual-select-plugin/src/virtual-select',
      'PopoverComponent':      'popover-plugin/src/popover',
      'PopperComponent':       'popper-plugin/src/popper',
    },
  ...
  }

Imported these dependencies into the code (note the usage of braces around VirtualSelect)

import {VirtualSelect} from 'virtual-select-plugin';

require('PopoverComponent');
require('PopperComponent');

No need to include the two extra libraries in the declaration since TypeScript does not utilize them.

How I arrived at this solution

I received some advice indicating that a webpack-imported library must have an export (though I am uncertain about this). The minified js file for "virtual-select-plugin" lacked one. However, the src file (src/virtual-select.js) did export "VirtualSelect".

To address this, I directed webpack to that particular file by adjusting the alias of 'virtual-select-plugin' as mentioned above. Due to the absence of a default export, I had to enclose VirtualSelect in braces during the import process import {VirtualSelect} ...

Upon refreshing the page, the browser raised an error regarding the "missing undefined PopoverComponent". Upon reviewing the code, I observed a reference to that component. Since it was not defined elsewhere, I examined the package.json of the library and identified it there. Subsequently, I installed the package as a dev dependency, added the alias to this library, and included a require statement in my project's code (refer to steps 2 and 3 above).

After another refresh, the browser alerted me about the "missing PopperComponent". I repeated the same procedure as with the PopoverComponent. Everything now functions smoothly.

I am confident that this method can be applied to any small library. Nevertheless, there might be a more efficient approach available. Perhaps webpack is incapable of directly importing plain JavaScript?

The module imported by Webpack appears to be nothing more than a blank

Answer №1

How I arrived at this solution

Similar questions

Error message in Angular 2 RC-4: "Type 'FormGroup' is not compatible with type 'typeof FormGroup'"

Restrict the number of subscriptions allowed for an rxjs observable

Error in VueJS/Typescript: Module 'my-module' or its type declarations are not found

What is the syntax for declaring a list of JSON objects in TypeScript?

Passing the value of the attribute from event.target as a parameter in a knockout click event

Trouble with Styling React-Toastify in TypeScript: struggling to adjust z-index in Toast Container

The automatic inference of function argument types and the implementation of conditional types

What is the best way to utilize proxyTable for handling cross-origin requests within a vue-cli project?

Is there a way to convert a JSON input object to a model class using TypeScript in a Node.js application?

What causes me to create components with incorrect paths?

Having difficulty selecting an item from the MaterialUI package

Is there a way to streamline this generator without using recursion?

Having trouble getting TypeScript to install using npm on a Mac?

Ways to import a library in JavaScript/TypeScript on a web browser?

Docz: Utilizing Typescript definitions for props rendering beyond just interfaces

What is the method for extracting children from a singular object in json-server rather than an array?

Angular 6 - Receiving @Input causes output to multiply by 4 instead of displaying just once

Express: Every declaration of 'user' must have the same modifiers

Obtain a tuple of identical length from a function

Having trouble pushing to an array in Angular typescript? It seems to be returning as undefined