# Integrating React + CSS support

**URL:** <https://discourse.gohugo.io/t/integrating-react-css-support/41014>\
**Category:** support\
**Created:** [October 19, 2022, 4:31pm UTC](https://discourse.gohugo.io/t/integrating-react-css-support/41014 "2022-10-19T16:31:42Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![enoldev](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/enoldev/32/17985_2.png) [@enoldev](https://discourse.gohugo.io/u/enoldev)\
**Post date:** [October 19, 2022, 4:31pm UTC](https://discourse.gohugo.io/t/integrating-react-css-support/41014/1 "2022-10-19T16:31:42Z")

</div>

Hello everyone!

I’ve been able to successfully integrate React into Hugo. However, when I import a CSS file, I get this error message

`Error: Error building site: JSBUILD: failed to transform "js/react/components/Test.js" (text/jsx): "/assets/js/react/components/page/Test.jsx:7:7": Cannot import "/assets/js/react/components/page/Test.css" into a JavaScript file without an output path configured`

I have my component “Test.jsx” inside the “assets” directory (/assets/js/react/components/page/Test.jsx) and my CSS file in the same directory “/assets/js/react/components/page/Test.css”.

`import "./Test.css"`

I import the JS this way:

```auto
{{ $component := resources.Get "js/react/components/Test.js" | babel }}
{{ $component := $component | js.Build }}

```

Without the CSS, the React works perfectly, any ideas on what I’m missing? I know the “js.Build” function uses ESBuild, maybe I’m missing some configurations?

Thanks in advance!

---

<div class="post-metadata">

**Author:** ![pamubay](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/pamubay/32/17838_2.png) [@pamubay](https://discourse.gohugo.io/u/pamubay)\
**Post date:** [October 19, 2022, 5:14pm UTC](https://discourse.gohugo.io/t/integrating-react-css-support/41014/2 "2022-10-19T17:14:01Z")

</div>

Check this issue:

> <https://github.com/gohugoio/hugo/issues/8411>
>
> \### What version of Hugo are you using (\`hugo version\`)?
> \<pre\>
> hugo v0.82.0-9D…960784
> \</pre\>
> 
> \### Does this issue reproduce with the latest release?
> Yes
> 
> \---
> 
> As per esbuild:
> 
> \> You can also import CSS from JavaScript. When you do this, esbuild will gather all CSS files referenced from a given entry point and bundle it into a sibling CSS output file next to the JavaScript output file for that JavaScript entry point. So if esbuild generates app.js it would also generate app.css containing all CSS files referenced by app.js.
> 
> This is not currently supported with js.Build and results in an error with modules that include an import in the javascript file.
> \`error: Cannot import "entry.css" into a JavaScript file without an output path configured\`