Develop Reference

Using SVG as React Component from Private React UI Library-(CRA) inside React app with Webpack 5 crash

I created a UI Library with CRA.
The library is published on npm.
Components in the library use SVG, which I use with the syntax of
import {ReactCompoent as Icon} from 'assets / icon'
I want to use the library inside my main app that I create with react 17.0.2 and webpack 5.
I add the loaders to Webpack and I can use svg as components inside Main app
as -
import CalendarIcon from './Calendar.svg'
and it works.
After I install the library and import the component that use SVG as ReactComponent:
import {BadgeBox} from '#privatelib/ui/lib/src'
the app crashes. With an error of:
WARNING in ./node_modules/#privatelib/ui/lib/src/components/BadgeBox/index.js 107:1697-1707
export 'ReactComponent' (imported as 'CloseIcon') was not found in '../../assets/sm/xsmall-icon.svg' (possible exports: default)
My React UI Library:
components:
import { ReactComponent as CloseIcon } from '../../assets/sm/x-small-icon.svg';
tsconfig file:
{
"compilerOptions": {
"target": "es5",
"baseUrl": "src",
"lib": [
"dom",
"dom.iterable",
"esnext",
"es5",
"es2015",
"es2016"
],
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "react-jsx",
"sourceMap": true,
"declarationMap": true,
"declaration": true,
"outDir": "lib"
},
"types": ["cypress", "cypress-file-upload"],
"include": [
"src/**/*",
"custom.d.ts",
],
}
My Main App:
webpack config:
const HtmlWebPackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const deps = require('./package.json').dependencies;
module.exports = {
output: {
filename: '[name].[contenthash:20].esm.js',
chunkFilename: '[name].[chunkhash:20].esm.js',
hashFunction: 'xxhash64',
pathinfo: false,
crossOriginLoading: false,
clean: true,
publicPath: 'auto',
},
resolve: {
extensions: ['.tsx', '.ts', '.jsx', '.js', '.json'],
},
devServer: {
port: 3011,
historyApiFallback: true,
},
module: {
rules: [
{
test: /\.m?js/,
type: 'javascript/auto',
resolve: {
fullySpecified: false,
},
},
{
test: /\.(css|s[ac]ss)$/i,
use: ['style-loader', 'css-loader', 'postcss-loader'],
},
{
test: /\.(ts|tsx|js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.svg$/i,
issuer: /\.[jt]sx?$/,
use: ['#svgr/webpack'],
},
{
test: /\.(?:ico|gif|png|jpg|jpeg|)$/i,
type: 'asset/resource',
},
{
test: /\.(woff(2)?|eot|ttf|otf|)$/,
type: 'asset/inline',
},
],
},
plugins: [
new ModuleFederationPlugin({
name: 'sidebar',
filename: 'remoteEntry.js',
remotes: {},
exposes: {
'./SideBar': './src/components/Sidebar/index.tsx',
},
shared: {
...deps,
react: {
singleton: true,
requiredVersion: deps.react,
},
'react-dom': {
singleton: true,
requiredVersion: deps['react-dom'],
},
},
}),
new HtmlWebPackPlugin({
template: './src/index.html',
}),
],
};
babelrc:
{
"presets": ["#babel/preset-typescript", "#babel/preset-react", "#babel/preset-env"],
"plugins": [
["#babel/transform-runtime"],
"babel-plugin-styled-components"
]
}

TL;DR
The right way of importing default exports in JavaScript is
import CloseIcon from '../../assets/sm/x-small-icon.svg';
In JavaScript, the import syntax is as follows:
import defaultExport from "module-name";
import { export1 } from "module-name";
which means:
"import the component of module-name that is exported as default and use it as defaultExport"
"import the component of module-name that is exported as export1 and use it as such"
According to the SVGR docs (1),
Please note that by default, #svgr/webpack will try to export the React Component via default export if there is no other loader handling svg files with default export.
Translated to plain JavaScript-English, this means "as long as you do not tell us otherwise, we will export the ReactComponent as the default". Since you are not configuring anything different in your webpack config and trying to import the ReactComponent, I assume it should be available as the default export. Therefore, the right way to importing it is
import CloseIcon from '../../assets/sm/x-small-icon.svg';
This is just a guess, of course you can proof me wrong. (2)
I assume you are using #svgr/webpack again, as in your previous question.
Since this proposal is deducted from the docs and your code, there might be other factors involved that I'm not aware of.

imported apiService undefined in typescript

We are using typescript and exporting one class as following (we are using nuxt and class style component if this relates to webpack issue).
export class ApiService {
static apiHost = '/';
}
When we try to import it as following, it gives ApiService as undefined and so gives error on apiHost access as ApiService gets undefined.
import { ApiService } from '../services/api-service';
my tsconfig is as following.
{
"compilerOptions": {
"module": "commonjs",
"declaration": false,
"removeComments": true,
"noLib": false,
"allowSyntheticDefaultImports": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"allowJs": true,
"target": "esnext",
"resolveJsonModule": true,
"sourceMap": true,
"outDir": "./dist",
"esModuleInterop": true,
"moduleResolution": "node",
"baseUrl": "./",
"skipLibCheck": true, // TODO: Remove. Temporary. https://github.com/nuxt/typescript/issues/49
"paths": {
"~/*": ["server/*"],
"#/*": [
"client/*"
],
},
"types": [
"node",
"#types/node",
"#nuxt/vue-app",
"vuex-class-component/dist",
]
},
"include": [
"server/**/*",
"client/**/*"
],
"exclude": [
"node_modules"
]
}
my webpack.config.js
const webpack = require('webpack');
const path = require('path');
const nodeExternals = require('webpack-node-externals');
const WebpackShellPlugin = require('webpack-shell-plugin');
module.exports = {
entry: ['webpack/hot/poll?1000', './server/main.ts'],
watch: true,
target: 'node',
externals: [
nodeExternals({
allowlist: ['webpack/hot/poll?1000'],
}),
],
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
mode: 'development',
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new WebpackShellPlugin({ onBuildEnd: ['node dist/main.js'] }),
],
output: {
path: `${__dirname}/dist`,
publicPath: '/',
},
};
Command I am running
ts-node -r tsconfig-paths/register server/main.ts

Actually I didn't post entire code as I thought it wasn't necessary.
But service was also calling back the class where service was imported.
import { AuthConfig } from '../config/auth-config';
export class ApiService {
static apiHost = '/';
static mgr = new Oidc.UserManager(
new AuthConfig().IdentityServerOAuth2Config, // This was causing issue as it was causing cyclic imports.
);
}
Follwing is the code where cyclic dependency was happening.
import ApiService from '../services/api-service';
export class AuthConfig {
`${ApiService.apiHost}api/callback` // This was again calling back the apiService resulting in cyclic dependency.
}

ImmutableJS List type not defined in React

I'm getting the Typescript error:
'List' refers to a value, but is being used as a type here.
But the immutable.d.ts does have the export interface List type. So I'm unsure of what is going on.
Here is the file I'm trying to reference it from:
import * as React from 'react';
import {IProduct} from "./Product";
const { List } = require('immutable');
interface GantryFootProps {
orders: List<IOrder>;
}
export interface IOrder {
product: IProduct
quantity: number;
}
export const GantryFoot: React.FunctionComponent<GantryFootProps> = (props) => {
return (<div>
<h2>Gantry Foot</h2>
</div>)
}
my tsconfig
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": true,
"module": "es6",
"target": "es2015",
"jsx": "react",
"allowJs": true,
"lib": ["es2015", "dom"]
},
"exclude": [
"node_modules"
]
}
and my webpack.config
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: 'development',
entry: './src/index.tsx',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
{
test: /\.scss/,
use: [
MiniCssExtractPlugin.loader,
'css-loader','sass-loader'],
}
],
},
resolve: {
extensions: [ '.tsx', '.ts', '.js' ],
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
externals: {
"react": 'React'
},
devServer: {
contentBase: './dist'
},
plugins: [new MiniCssExtractPlugin({
filename: 'main.css',
chunkFilename: '[name].css'
})]
};
Any other clues as to the reason for the error would be greatly appreciated. Thanks!

Assuming you are running TypeScript 3.8+ you can use import type { List } from "immutable"(Playground),
for lower TypeScript versions you can use import { List } from "immutable"(Playground) and have webpack remove immutable from your chunk.
Documentation for import type

Webpack - import const from .d.ts file not working - Can't resolve '#nuvolo/servicenow-types/server/GlideRecord'

I'm doing this:
import { GlideRecord } from "#nuvolo/servicenow-types/server/GlideRecord";
I have a file node_modules/#nuvolo/servicenow-types/server/GlideRecord.d.ts
It contains:
...
type GlideRecordConstructor = { new <T>(table: string): GlideRecord<T> };
type GlideRecord<T> = GlideRecordBase<T> & T;
declare const GlideRecord: GlideRecordConstructor;
export { GlideRecord };
If I run tsc it works, no errors
Webpack says:
Module not found: Error: Can't resolve '#nuvolo/servicenow-types/server/GlideRecord' in ...
Webpack config:
{
mode: "production",
//set name of record as the library name
output: {
filename: "file.js"
},
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
//use: 'awesome-typescript-loader',
exclude: /node_modules/,
},
],
},
resolve: {
//modules: ['node_modules'],
extensions: [ '.ts', '.js' ], // Allows imports to work from .ts and .js
},
}
tsconfig.json:
{
"transpile": false,
"compilerOptions": {
"lib": ["es2015", "dom"],
"esModuleInterop": true,
"baseUrl": ".",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true
}
}
how do I fix this?
I've also created a GH issue here: https://github.com/nuvolo/sincronia/issues/138

import node modules in electron angular webpack app

I have a electron application using Angular (2) and I pack it using Webpack. I want to use my node modules in my Angular components
import { Injectable } from '#angular/core';
import {Bonjour} from 'bonjour';
Update:
I set the target to electron-renderer in my webpack configuration. Now I get the error error TS2693: 'Bonjour' only refers to a type, but is being used as a value here
Bonjour remains undefined.
Here is my webpack.config.js:
var path = require('path');
var webpack = require('webpack');
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
module.exports = {
devtool: 'source-map',
target: 'electron-renderer',
entry: {
'angular': [
'rxjs',
'reflect-metadata',
'#angular/core',
'#angular/router',
'#angular/http'
],
'app': './app/main'
},
output: {
path: __dirname + '/build/',
publicPath: 'build/',
filename: '[name].js',
sourceMapFilename: '[name].js.map',
chunkFilename: '[id].chunk.js'
},
resolve: {
extensions: ['.ts', '.js', '.json', '.css', '.html']
},
module: {
loaders: [{
test: /\.ts$/,
loader: 'ts-loader',
exclude: [/node_modules/]
}]
},
plugins: [
new CommonsChunkPlugin({ name: 'angular', filename: 'angular.js', minChunks: Infinity }),
new CommonsChunkPlugin({ name: 'common', filename: 'common.js' })
]
};
How can I setup my Electron/Angular application in such a way that I can import node modules as mentioned above?
added tsconfig:
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"moduleResolution": "node",
"removeComments": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"sourceMap": true,
"typeRoots": [
"../node_modules/#types"
]
},
"files": [
"app/main.ts"
]
}

This plugin in question exported a prototype function in its module.exports. Thus the plugin needed to be instantiated like this:
var Bonjour = require('bonjour')
var bonjour = new Bonjour();