Rich Text Editor with CRA transpiling

[Ivaylo Dimitrov]

Hey,

I've been using RTE, but I'm having some issues with the way styles (and more precisely the new icons in ^21.2.3) are imported.

The transpiled & bundled file (using CRA's transpiler) is named like ".c5f6158ac1190f9247b0", which is a problem on my Linux server because:

1. It's treated as a hidden file
2. Has no extension which might be a security risk

Now, these might be solvable on the backend side, but as a front-end dev, and not really familiar with all the webpack and babel settings I'm wondering if there's an easy to flip switch that would solve this?

As a note, this only seems to happen with this RTE. Other files I import seem to be working fine (getting proper names and extensions).
Also, this all works perfectly on a local server in Windows.

[Vinothkumar Yuvaraj]

Hi Ivaylo,

We have validated your query. The hash-valued file can cause problems in Linux machines because the filesystem treats files that start with a period (.) as hidden files. This means that the browser may not be able to find the file, which can cause errors.

To resolve this problem, you can change the settings in webpack to prevent the file from being named with a hash value. To do this, you need to add the following line to your webpack.config.js file:

output: {
  filename: '[name].js',
}

This will tell webpack to name the file with the name of your entry point, instead of a hash value.

For example, if your entry point is index.js, the file will be named index.js. This will allow the browser to find the file and load your JavaScript code.

Here is an example of a webpack.config.js file that prevents the file from being named with a hash value:

const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'public'),
  },
};

Once you have made this change, you need to rebuild your project. To do this, run the following command in your terminal:

npm run build

Once the project has been rebuilt, the hash-valued file will no longer be created. The browser will be able to find the file and load your JavaScript code.

If you are still facing an error, can you please share the following information to replicate your issue at our end?

• If possible, share the Linux OS Name and version.
• Could you please share the Node Version and React Version you used?
• If possible, share the package.json file.

Meanwhile, you can try the solution of using a CDN link for referring styles instead of using the styles from the package.

<link rel='nofollow' href="https://cdn.syncfusion.com/ej2/22.1.34/material.css" rel="stylesheet">

Regards,

Vinothkumar