hopefully someone can help me, I already invested 36 hours trying to solve this issue, but no luck. I'm redirecting a customer to a success page, which is generated by a Gatsby function that runs from /api/orders/success.js, this function should return a response similar to having an Express server. I used res.send(ReactDOMServer.renderToString(<Test />)) to send back a response, I wish to use my own <Layout /> component. However, I always get an error so I tried with another component <Test />, it seems to be an issue with either webpack, babel, or both, because as soon as I uncomment for example the Layout component I also get an error about not having a loader to understand the module import, I already tried adding a custom loader for webpack but I don't know how to make it work. In this case from the code attached the component <Test /> will render an <h1> with no problems, but as soon as I add a css file imported to it as import * as Styles from 'test.module.css' it will break, again, a problem related to some loader regarding webpack not understanding css, but I have no idea how all of this works, what loader/loaders should I add, where, and how I make it work along with Gatsby. Thanks!
import * as ReactDOMServer from 'react-dom/server'
// import Layout from '../../components/layout'
import Test from '../../components/test'
const Success = (req, res) => {
res.send(ReactDOMServer.renderToString(<Test />))
}