How to compile jsx code inside a sails app?

Question

I'm trying to setup my Sails project to use Ant Design on the frontend but I've been getting errors when referencing my javascript file. I'm getting errors on the import statements which I can fix by added the type='module' attribute to the script tag, but once that fixes I get errors on my jsx code because the browser doesn't understand the <. I'm fairly new to the javascript stack so sorry in advance.

I've tried configuring Babel and Webpack but a lot of the guides are outdated and I'm just getting more and more confused. Linked below is my js file taken directly from the antd component example aswell as the html code. I added the script tag to reference the js file.

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import { Table, Divider, Tag } from 'antd';

const columns = [
  {
    title: 'Tags',
    key: 'tags',
    dataIndex: 'tags',
    render: tags => (

* Error Thrown Here *
      <span>
        {tags.map(tag => {
          let color = tag.length > 5 ? 'geekblue' : 'green';
          if (tag === 'loser') {
            color = 'volcano';
          }
          return (
            <Tag color={color} key={tag}>
              {tag.toUpperCase()}
            </Tag>
          );
        })}
      </span>
    ),
  }
];

const data = ...

ReactDOM.render(<Table columns={columns} dataSource={data} />, document.getElementById('container'));

<-- HTML -->

<div id="container" style="padding: 24px"></div>
<script>
  var mountNode = document.getElementById('container');
</script>
<script type='module' src='templates/table.js'></script>

I expect the js code to build a datatable and compile all jsx to es6 code that the browser can interpret. However I'm getting errors on the jsx code and I don't believe any code is being compiled.

Answer 1

First install webpack by following this article - https://medium.com/@Noitidart/replacing-grunt-with-webpack-in-sails-1-x-dd88afa22a01

Then follow the rest of this article to get react in - https://medium.com/@Noitidart/adding-code-split-react-frontend-without-losing-vue-to-sails-1-x-app-5642131ed8a0