Synthax error in the component

[psyycker]

I tried your library and while requiring the file with component, It's throwing me a synthax error with my bit of JSX

return (
       <div>
           test
       </div>
    );

My full code is like this :

import React from 'react';
import {angularize} from "react-in-angularjs";

const SDDialogContainer = () =>  {
    return (
       <div>
           test
       </div>
    );
}

angularize(SDDialogContainer, "sdDialogContainer", angular.module("core"));

Did you already met this problem ? The whole AngularJS app is built with Webpack 4. Maybe it's related to that ?

[xjpro]

Hey! Thanks for checking out react-in-angularjs.

Would you mind posting the error you're getting? Looking over your syntax I don't see anything obviously incorrect so I share your suspicion that the issue is something to do with webpack.

[psyycker]

Hi, Sorry to not coming back to you, I actually found a solution. So the problem is, my whole angularjs project is compiled with webpack and babel (That's an ES6 project). And so is using the babel-loader without any react loader of course. My solution was to add a loader react compatible for jsx files. Then I have both js files for angular and jsx files for react. Working like a charm now !

[xjpro]

Ah, that makes sense. The section on webpack configuration is a bit sparse - I’ll see if I can add some more details.