Reactjs - Can xterm.js have problem with webpack configuration? - reactjs

Question

So far I am not able to properly integrate xterm.js with reactjs due to which my code breaks in production but works while development.
HELP !!!
import React, {useEffect} from 'react';
import {Terminal} from 'xterm';
import {FitAddon} from 'xterm-addon-fit';
const UITerminal = () => {
const term = new Terminal();
const fitAddon = new FitAddon();
term.loadAddon(fitAddon);
useEffect(() => {
let termDocument = document.getElementById('terminal')
if (termDocument) {
term.open(termDocument)
fitaddon.fit();
}
window.addEventListener('resize', () => {
fitaddon.fit();
})
}, [])
return (<div id="terminal"></div>)
}
Below is the error response from production code. clearly it fails to import xterm
react_devtools_backend.js:4012 ReferenceError: Cannot access 'r' before initialization
at new m (96209.72626fc1cc862aea477a.bundle.js:1:165467)
at new b (96209.72626fc1cc862aea477a.bundle.js:1:159758)
at new M (96209.72626fc1cc862aea477a.bundle.js:1:57572)
at new r.exports.i.Terminal (96209.72626fc1cc862aea477a.bundle.js:1:294972)
at w (96209.72626fc1cc862aea477a.bundle.js:1:15994)
at zo (main.71e827eabc798023c129.bundle.js:1:1260000)
at Ws (main.71e827eabc798023c129.bundle.js:1:1333492)
at Wi (main.71e827eabc798023c129.bundle.js:1:1294411)
at Ui (main.71e827eabc798023c129.bundle.js:1:1294336)
at Pi (main.71e827eabc798023c129.bundle.js:1:1291367)
UPDATE
I have found out that it is happening because of my production webpack configuration but still the root cause is unidentified. please help in soughting this out. I am adding my development and production webpack config here.
Please note that the dev webpack config absolutely works fine if build with it and serve.
webpack.dev.js
const fqdn = "some.fqdn.com"
const path = require("path");
const webpack = require("webpack")
const common = require("./webpack.common");
const { merge } = require("webpack-merge");
const fs = require('fs');
const jsonFormat = require('json-format');
var HtmlWebpackPlugin = require("html-webpack-plugin");
const jsonFromatConfig = {
type: 'space',
size: 4
}
module.exports = merge(common, {
mode: "development",
devtool: "source-map",
output: {
filename: "bundle.js",
publicPath: '/',
},
plugins: [
new HtmlWebpackPlugin({
template: "./public/index.html"
}),
new webpack.HotModuleReplacementPlugin()
],
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
target: "web",
devServer: {
open: true,
static: {
directory: path.join(__dirname, '../public'),
},
historyApiFallback: true,
},
});
webpack.prod.js
const path = require("path");
const common = require("./webpack.common");
const { merge } = require("webpack-merge");
var MinifyPlugin = require('babel-minify-webpack-plugin')
var CompressionPlugin = require('compression-webpack-plugin');
const CleanWebpackPlugin = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const TerserPlugin = require("terser-webpack-plugin");
var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = merge(common, {
mode: "production",
output: {
filename: "naming.[name].contenthash.[contenthash].bundle.js",
path: path.resolve(__dirname, "../build")
},
optimization: {
minimizer: [
new TerserPlugin(),
new HtmlWebpackPlugin( {
template: "./public/index.html",
minify: {
removeAttributeQuotes: true,
collapseWhitespace: true,
removeComments: true
}
} ),
new MinifyPlugin({}, {
comments: false
})
],
splitChunks: {
chunks: 'all',
minChunks: 3
}
},
plugins: [
new CompressionPlugin({
test: /\.js$|\.css$|\.html$/
}),
new MiniCssExtractPlugin({ filename: "naming.[name].contenthash.[contenthash].css" }),
new CleanWebpackPlugin()
],
module: {
rules: [
{
test: /\.css/i,
use: [
MiniCssExtractPlugin.loader,
"css-loader"
]
},
]
}
});

Answer 1

The error shows that you might use Xterm before its initialization,
You might find it useful to use react-aptor or the idea behind it to connect pure js packages like Xterm.js into react world.
import useAptor from 'react-aptor';
const initializer = (node, params) => {
// user params for further configuration
const terminal = new Terminal();
term.open(node);
return terminal;
}
const getAPI = (terminal, params) => {
return () => ({ terminal })
}
const ReactXterm = (props, ref) => {
const aptorRef = useAptor(ref, {
getAPI,
instantiate,
/* params: anything */
});
return <div ref={aptorRef} />;
};
function App() {
const ref = useRef();
const writeToTerminal = () => {
ref.current.terminal?.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ');
};
return (
<div>
<ReactXterm ref={ref} />
<button onClick={writeToTerminal}>write to terminal</button>
</div>
);
}
Disclosure: I am the maintainer of react-aptor