[SOLVED] React JS and Suitelet


This Content is from Stack Overflow. Question asked by metagorski

I created a React JS application.

How can I execute this on NetSuite Suitelet? Can you provide some examples? Thanks!

Here’s a sample of index.js and App.js file I want to show on my Suitelet.


import React from 'react';
import ReactDOM from 'react-dom/client';

import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);


import Todo from './components/Test';

function App() {
  return (
      <Test text='Test Project' />

export default App;


Here’s an example where the whole page content is the react app. Note that this uses configurator_root instead of root:

 *@NApiVersion 2.x
 *@NScriptType Suitelet
define(["N/search", "N/ui/serverWidget"], function (search, ui) {

    function getFileURL(filename) {
        var fileURL = null;
            type: 'file',
            filters: [
                ['name', 'is', filename]
            columns: [
        }).run().each(function (ref) {
            fileURL = ref.getValue({ name: 'url' });
            return false;
        return fileURL;

    function onRequest(context) {
        var request = context.request;
        var response = context.response;
        var form = ui.createForm({
            title: 'Embedded Configurator Configurator'
        var wrapper = form.addField({
            id: 'custpage_wrapper',
            type: ui.FieldType.INLINEHTML,
            label: 'na/'
        var scriptFileName = 'kotn-configurator-app.js'; // a unique name somewhere in your Netsuite file cabinet
        var scriptURL = getFileURL(scriptFileName);
        var cssFileName = 'kotn-configurator.css'; // a unique name somewhere in your Netsuite file cabinet
        var styleURL = getFileURL(cssFileName);
        wrapper.defaultValue = '<div id="configurator_wrap"><div id="configurator_root"></div>\n' +
            (styleURL ? '<link rel="stylesheet" href="' + styleURL + '"/>\n' : '') +
            '<script type="text/javascript" src="' + scriptURL + '"></script>' +
    return {

Note that your bundler shouldn’t emit any chunks for this app since the files in Netsuite’s file cabinet won’t have a hash parameter

This Question was asked in StackOverflow by metagorski and Answered by bknights It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?