Custom UI Component Library Import

JavaScript
,
1

I’m writing a Custom UI component that starts with

import TextField from 'import Autocomplete from './@mui/material/Autocomplete';

I can manually drag-and-drop the folder @mui/material/Autocomplete to make the library available, but every then import line in that code then needs manually updated. For example, to resolve
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
I need to manually upload the folder with this dependency and then change the path to "./../../../@babel/runtime/helpers/esm/objectWithoutPropertiesLoose"; and so on for 100s of files until it’s unmanageable.

Could you please advise on how to use import libraries with Custom UI Components? I looked for guidance in your other answer here, and an example would help make the process clear.

Thanks in advance for your support!

2

Hi @Grace_Young

Generally, UI libraries have many dependencies, and all of them must be present to build a source code.
At this moment we do not provide a way to import such library sources directly from NPM, because having +100500 files might take too long time to compose the UI Component and the process might be interrupted by timeout.

Locally, these modules are placed in the ./node_modules folder, that’s why you can import them using just a module name, so try to put them into ./node_modules folder although we do not recommend having raw complex modules.

Instead, you need to assemble the library(module) locally to have a few files and then put them into your UI Component

Regards, Vlad

3

Thanks Vlad for your quick response! That makes sense, except I’m not sure what you mean by assemble the library (module) locally. Might you be able to provide an example?

Thank you again!

4
  1. You need to create a new local nodejs project, see files above
    webpack.config.js — webpack 2023-02-21 12-40-30
    webpack.config.js — webpack 2023-02-21 12-40-301552×1180 117 KB
///webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  mode: "production",
  module: {
    rules: [
      { test: /\.(js|jsx)$/, use: 'babel-loader' },
    ],
  },

  resolve: {
    extensions: ['.js', '.jsx'],
  },

  externals: {
    react: 'react',
  },

  output: {
    clean: true,
    publicPath: '',
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
    libraryTarget: 'umd'
  }
};


///package.json
{
  "name": "ui-component-x-library",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0"
  },
  "dependencies": {
    "babel-loader": "^8.2.5"
  }
}
  1. install modules for building (webpack/babel/etc) run npm i
  2. install your library module(s) run npm run i chart.js -S
  3. re-export it in the src/index.js file
export * from 'chart.js';

  1. run npm run build

  2. get files from the dist folder and put them into your custom component

    main.js — webpack 2023-02-21 12-48-57
    main.js — webpack 2023-02-21 12-48-571829×812 79.7 KB

5

Thanks again Vlad for the example - that worked for me! I’m so happy, thanks again.