Also the Yves documentation says "Web Components are used only for behavior management. No client-si

U0451PX20EA

Also the Yves documentation says "Web Components are used only for behavior management. No client-side rendering or logic is implemented in the frontend." But I guess it's only by defult, because this React integration seems to be doing exactly that - client-side rendering, right?#

U019JM2HE7N

Hi @U0451PX20EA, your error sounds like a misconfiguration in your webpack config. You can probably make use of the existing babel-loader instead of the additional ts-loader. You can simply modify the according test line here: https://github.com/spryker-shop/suite/blob/master/frontend/configs/development.js#L90
https://babeljs.io/docs/en/babel-preset-react

U019JM2HE7N

Since Web Components in Yves Atomic Frontend do not make use of shadow DOM, they can be rendered and styled upfront, before async loaded Javascript put behavior management on top. That's the default. So yeah you are right by integrating React this will work slightly different. But you are free to do so

U0451PX20EA

Thank you! 🙂 The babel thing produces the following error. It can not recognize jsx... Strange.

U019JM2HE7N

Did you setup the @babel/preset-react from the link above?
Anyways this sounds like a more React specific issue (nullish coalescing) for me. You can try to fix this with the recommendations from the following threads:
https://stackoverflow.com/questions/67543182/react-babel-you-may-need-an-additional-loader-to-handle-the-results-of-these
https://github.com/facebook/create-react-app/issues/9468
Hope this helps! Good luck

U0451PX20EA

Thanks for the help! It was also missing @babel/preset-typescript in the development.js file.