Building ReactJS assets with hugo, JSX not enabled and images breaking build

support
1

I’m quite lost here, trying to port a React App to Hugo and removingt Webpack out of the process at the same time. My code right now is just three files, the App.js, App.css and the logo.svg

On hugo server I get the error:
Error: error building site: JSBUILD: failed to transform “js/App.js” (text/javascript): “/Users/brunoamaral/Labs/james/assets/js/App.js:7:4”: The JSX syntax extension is not currently enabled

And renaming the file to App.jsx returns an error for the logo:
Error: error building site: JSBUILD: failed to transform "js/App.jsx" (text/jsx): "/Users/brunoamaral/Labs/james/assets/static/logo.svg:1:0": The JSX syntax extension is not currently enabled

Removing the logo.svg import then breaks the build saying that there is no output dir configured for App.css.

I’m adding this to the html files with this bit:

{{ $app := resources.Get "js/App.jsx" | js.Build | babel | resources.Minify | resources.Fingerprint }}

My babel.config.js contains these settings:

module.exports = function (App) {
  App.cache(true);
  const presets = [
    "@babel/preset-react",
    "@babel/preset-env"
    ]
  const plugins = [];
  return {
    presets,
    plugins
  };
}

import logo from '../static/logo.svg';
import '../css/App.css';


function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <h1 className="text-3xl font-bold">
        Hello world!
        </h1>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;