Not compatible with `ember-cli-typescript`

[MCJ93]

Hi, i'm having some issues with ember-react-components addon. Using your "Usage" guide i created simple component displaying hardcoded string. Sadly after rebuild babel threw an error:

Build Error (broccoli-persistent-filter:Babel > [Babel: [project-name]])
/[projectDir]/components/react-tasks-wrapper.js: Unterminated regular expression (9:22)
export default class extends React.Component {
  render() {
    return <p>Test</p>;             
  }
 }

After removing html tags component renders properly.

I tried to use both ts/js extensions and went through each step in https://medium.com/front-end-weekly/using-react-components-in-your-ember-app-8f7805d409b0 but it seemed to have no effect.

I am using ember 3.7.3 . ember-cli 3.5.0 and ember-react-components: ^3.0.1

Thanks for any help

[alexlafroscia]

Interesting! I've never come across this error before. Thanks for reporting it!

I can try to throw together a reproduction, but it would be super helpful if you could give me a repo where you're seeing the issue so I can make sure I can see the problem, too!

[alexlafroscia]

I just generated a project with the latest Ember CLI and ember-react-components and also got an error, albeit a different one:

Build Error (broccoli-persistent-filter:Babel > [Babel: erc-bug-repro]) in erc-bug-repro/components/react-component.js

/Users/alexlafroscia/Code/ember/erc-bug-repro/erc-bug-repro/components/react-component.js: Unexpected token, expected "," (8:26)

   6 |   render() {
   7 |     return (
>  8 |       <p>Hello, World!</p>;
     |                           ^
   9 |     )
  10 |   }
  11 | }

[alexlafroscia]

I am working on #35 to fix the problems that I ran into -- are you able to upgrade your ember-cli and/or ember-cli-babel versions to newer ones and then try this Addon again?

[MCJ93]

Thank you so much for Your response! Sadly my company's policy won't allow me to share our repository, but if needed i can recreate it with same package.json and whatever's necessary. I'll try to update ember-cli-babel and ember-cli together and separately and i'll let you know

[MCJ93]

I upgraded ember-cli to 3.12.0 and ember-cli-babel" to 7.10.0 but sadly nothing changed.

[alexlafroscia]

Now that is strange! I was not able to reproduce your error with the latest versions of the dependencies and the PR that I am working on to upgrade some packages seems to be passing (at least for the default test cases).

I think I’ll need you to provide a reproduction repo for me to fix this, unfortunately. Is there any way you can do that for me?

If not, can you let me know all the other dependencies you have installed?

On Aug 20, 2019, at 12:52 AM, MCJ93 notifications@github.com wrote:

 I upgraded ember-cli to 3.12.0 and ember-cli-babel" to 7.10.0 but sadly nothing changed.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

[MCJ93]

Finally got it! After adding ember-cli-typescript (2.0.2 to be precise) error appears. When i removed it in both test and my project, it worked smoothly.

[alexlafroscia]

Hmmmm… That’s very interesting!

So having ember-cli-typescript installed was causing an issue, even in files that had the .js extension?

On Aug 21, 2019, at 4:03 AM, MCJ93 notifications@github.com wrote:

Finally got it! After adding ember-cli-typescript (2.0.2 to be precise) error appears. When i removed it in both test and my project it worked smoothly.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/alexlafroscia/ember-react-components/issues/34?email_source=notifications&email_token=AAMR2OLMEESBUIYA4MOW3MLQFTZGDA5CNFSM4IM4F4J2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4YZ3GY#issuecomment-523345307, or mute the thread https://github.com/notifications/unsubscribe-auth/AAMR2OOKKS7P62ETGZZRIOLQFTZGDANCNFSM4IM4F4JQ.

[MCJ93]

Yes, seems like this is the issue. Even when i created new project, added both ember-react-components + ember-cli-typescript and i created test component, app couldn't build and was throwing an error i presented earlier.

[alexlafroscia]

Gotcha! I'll try to make a reproduction with the TypeScript addon and see if I can support that automatically, or at least document how to get them working together.

[stephencweiss]

@alexlafroscia - out of curiosity, were you ever able to get typescript working? Seems like I'm running into the same issue as @MCJ93 -- (ember-cli-typescript: 3.1.4 though)

Update - I think my issue was three fold:

1. Install react types (@types/react)
2. Update .tsconfig to handle jsx:react
3. Change the extension to .tsx from .ts

[alexlafroscia]

Sorry, I did not -- I don't use this addon and maintaining it actively isn't something I have time for, unfortunately.

If you managed to get it working @stephencweiss, I would absolutely welcome a PR that adds documentation of some sort on how to get it working!