React Integration using Content management

[Tamojit Dalal]

We are trying to embed react in ServiceNow page :
a. We are uploading JS and CSS as style sheets and referencing these using their Sys_Id in html file
Issue - We are getting MIME type issue
b. We are uploading JS as UI scripts; CSS as style sheets and referencing these using their Sys_Id in html file
Issue - Not able to render in the given root element
c. We are uploading JS as attachment; CSS as style sheets and referencing these using their respective Sys_Id in html file
Issue - Not able to render in the given root element


Tried Integration using Scripted Rest APIS
Issue : Build not rendering - seems to be webpack issue

Please help

[Ratnakar7]

Hi @Tamojit Dalal ,

Integrating React into ServiceNow can be done using different approaches, but it requires careful configuration and setup. Here are some suggestions to address the issues you mentioned:

a. Uploading JS and CSS as style sheets: To resolve the MIME type issue, make sure you have correctly specified the MIME types for your uploaded files. For JavaScript files, use "application/javascript" as the MIME type, and for CSS files, use "text/css". Verify that the MIME types are set correctly in the ServiceNow instance.

b. Uploading JS as UI scripts and CSS as style sheets: When using UI scripts, ensure that you have defined the appropriate dependencies and have included React and any other necessary libraries. Verify that the UI script is properly referenced and loaded in the HTML file. Additionally, check that the CSS file is correctly referenced and applied to the HTML elements.

c. Uploading JS as attachments: When using attachments, ensure that the JS file is uploaded as a client script attachment. Again, verify that the CSS file is uploaded as a style sheet attachment. Make sure the attachments are referenced correctly in the HTML file, and that the root element is specified properly.

For all these approaches, it's important to ensure that you have correctly configured the HTML file that will render the React components. Verify that the root element in the HTML file matches the element where you want to render your React app in ServiceNow. Also, confirm that the necessary dependencies and libraries are included in your React app, such as React, ReactDOM, and any additional packages.

If you are facing issues with the webpack build, make sure you have configured the webpack build process correctly for your React app. Check the webpack configuration file to ensure it is set up appropriately for your project, including any necessary loaders and plugins.

Additionally, consider using Service Portal if you have access, as it provides built-in support for creating custom pages and integrating React components more seamlessly within ServiceNow.

If you continue to face difficulties, please provide more specific details or error messages you are encountering, so that I can assist you further.

Thanks,

Ratnakar

[Tamojit Dalal]

Hi Ratnakar,

Thank you for the detailed guidance. 

Though we found, javascript we are trying to upload is written in ES6. But ServiceNow Tokyo version is supporting ES5.

Is there a way we can enable ES6 in our instance?

Regards,

Tamojit

[Ratnakar7]

Hi @Tamojit Dalal ,

In ServiceNow, the support for JavaScript ES6 (ECMAScript 2015) depends on the version of the platform you are using. As you mentioned that you are using the Tokyo version, it is based on an older version of the ServiceNow platform, which may have limited or no support for ES6 features.

Unfortunately, you cannot directly enable ES6 support in the Tokyo version of ServiceNow since it is dependent on the underlying platform's capabilities. However, there are a few alternatives you can consider:

 -->> Transpile ES6 to ES5: You can use a build tool like Babel to transpile your ES6 code into ES5 code that is compatible with the Tokyo version. Babel allows you to write modern JavaScript code using ES6 syntax and automatically converts it to ES5 syntax. You can integrate Babel into your build process to ensure that the transpiled code is used in your ServiceNow instance.

Refer jstool.gitlab.io/babel-es6-to-es5/  , babeljs.io 

Thanks,

Ratnakar