ESBUILD Error building site: JSBUILD: failed to transform "index.jsx" (text/jsx): Unexpected "<"

hendry · August 20, 2020, 9:45am

Hi, I’m using the newish @bep esbuild Hugo pipeline https://gohugo.io/hugo-pipes/js/ as mentioned here: React Hugo Starter i.e. it requires Hugo >= 0.74.2 !!

Now I’m trying to get a more complex React project running within Hugo here: https://github.com/dayhaysoos/use-shopping-cart/tree/master/examples/cra

And I’m hitting this error: Error building site: JSBUILD: failed to transform “index.jsx” (text/jsx): Unexpected “<” despite there is not JSX angled brackets in https://github.com/kaihendry/react-hugo-esbuild/blob/uSC-cra/assets/index.jsx

Sorry, the React / build chain is something I am a bit uncertain about. So any debug info or pointers would be great. I think it might be an esbuild issue and I need Babel. Btw I don’t know if https://gohugo.io/hugo-pipes/babel/ is supposed to be married with https://gohugo.io/hugo-pipes/js/ somehow??

Nonetheless I did try creating another project https://github.com/kaihendry/react-hugo-babel but that has its own problems. It moans about require is not defined and I have no idea how to fix it. cc @jmooring Many thanks!

hendry · August 22, 2020, 4:23am

A guy https://www.christopherbiscardi.com/ told me that I need to rename my JSX in .js files to .jsx for esbuild. Now I am much further!

Now I am hitting Uncaught ReferenceError: process is not defined despite the env being set here IIUC

github.com

kaihendry/react-hugo-esbuild/blob/uSC-cra/layouts/index.html#L7


<!DOCTYPE html>
<html lang=en>
<head>
<title>{{ .Title }}</title>
<meta charset="utf-8">
{{ with resources.Get "index.jsx" }}
{{ $options := dict "defines" (dict "process.env.NODE_ENV" "\"development\"") }}
{{ $script := . | js.Build $options }}
<script src="{{ $script.RelPermalink }}" defer></script>
{{ end }}
</head>
<body>
<h1>Hello World</h1>
<div id="react"></div>
</body>
</html>

git clone -b uSC-cra https://github.com/kaihendry/react-hugo-esbuild.git
Test site: https://elastic-pasteur-9b282b.netlify.app/

Hugo Static Site Generator v0.74.3/extended linux/amd64 BuildDate: unknown

hendry · August 23, 2020, 4:14am

Ah! Uncaught ReferenceError: process is not defined was actually just moaning that a process.env.FOOBAR was not defined!! 🤦

system · August 25, 2020, 4:14am

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Integrating React + CSS support support	1	667	October 19, 2022
Building ReactJS assets with hugo, JSX not enabled and images breaking build support	0	464	July 3, 2023
JSBuild fail after update support	3	380	November 27, 2020
jsBuild error on Windows support	8	832	October 12, 2020
Is it possible to add plugins to ESBuild for JS in Hugo? support	3	1047	May 25, 2023

ESBUILD Error building site: JSBUILD: failed to transform "index.jsx" (text/jsx): Unexpected "<"

Related topics