alexlafroscia / ember-react-components Goto Github PK

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

We currently use this.attrs to get all of the things passed to the Ember invocation of a component and use them as the props on the React component.

This API is not public and should be avoided.

We need to:

• Investigate a different way to get all of the arguments to a component in JavaScript (there is already a Handlebars API for this, but that doesn't help us)
• Update the implementation

@alansouzati pointed out to me that installing this addon makes ESLint start choking on decorators. That's not nice!

The ember-decorators repo automatically installs and configured babel-eslint if needed so that the user just don't have to worry about it. I want to do the same thing here.

Alternatively, if that's too hard, we can just issue a warning on install (or even in the README) but if I can just do the "hard part" myself I might as well.

Related to #16

This is a great addon and the use of a decorator to add React support within Ember is a nice solution.

Everything is working great at runtime, however, using the outputFile config option to lazy load react/react-dom is not actually splitting out the dependencies in a separate file.

I also tried to just use dynamic imports to load react and react-dom, since the app I work on also has ember-auto-import, but this doesn't work either.

It seems like react and react-dom always get added to the consuming app's vendor.js.

Let's assume the following example:

{{#my-app}}
  {{app-header}}
  {{outlet}}
{{/my-app}}

my-app is a react component that uses the new context API to set values to be shared across children.

app-header is another react component that should be able to read from my-app context.

outlet is not a react component.

From what I understand, this addon will first mount app-header and then my-app (behind the scenes yield-wrapper is being used to create the children to be passed to my-app).

Since app-header is mounting first, it never gets a chance to receive the context values that will be set by its parent. In react, the order is different, my-app render is called first, then app-header render is called.

I've tried for a couple of hours to fix this issue. But, I don't think we will be able to fix it if the order is reversed.

@alexlafroscia this addon is really great, and provides a very easy and fun way to write React components in an ember application.

However, I've been having trouble using React components from other packages distributed as UMD libraries.

For example, as a quick and dirty test, I tried to use <StarRatingComponent /> from https://www.npmjs.com/package/react-star-rating-component, by npm installing it and then app.importing it's UMD build in ember-cli-build.js:

 app.import('node_modules/react-star-rating-component/dist/react-star-rating-component.js');

I can see that file is successfully appended to vendor.js, however, when I run ember s I see a blank white screen and an Uncaught TypeError: Cannot read property 'Component' of undefined error in the console:

Which lead me to check if window.React was defined, and I was surprised to discover that it is not.

So then I tried loading that package "the right(er?) way" by removing the above app.import() and using ember-auto-import. I then generated a new React component with:

import React from 'react';
import WithEmberSupport from 'ember-react-components';
import StarRatingComponent from 'react-star-rating-component';

@WithEmberSupport
export default class TestRating extends React.Component {
  render() {
    return <div>
      <StarRatingComponent name="test" value={1} starCount={3} />
    </div>;
  }
}

I got a little further this time - the app at least loaded and worked until I got to the route where I invoked the above component I got a Uncaught TypeError: Cannot read property 'unstable_cancelScheduledWork' of undefined:

My ultimate goal is to be able to load and use my own React components that I author in another package (so that they can be shared w/ other teams that are writing React apps). I only chose react-star-rating-component b/c it seemed like it would be compatible, but if you have a different example that you know works that would be great.

Getting this error:
Uncaught TypeError: A class descriptor's .kind property must be "class", but a decorator created a class descriptor with .kind "undefined"
at Object.toClassDescriptor (decorate.js:258)

when you use this syntax:

@WithEmberSupport
export default class SayHi extends React.Component {...}

but this one works:

class SayHi extends React.Component {...}
export default WithEmberSupport(SayHi)

dependencies installed:

"ember-cli": "~3.7.1",
"ember-decorators": "^5.1.2"
"ember-react-components": "^2.0.3",
"@ember-decorators/babel-transforms": "^3.1.5",

• Whatever content is within the block of the component invocation should be passed through to children on the React component

Is any way to get only one solution?

Currently, only class-based components are supported. It would be great to support function-based components as well.

Nice work. I hope you keep it up.

Any advice on an easy way to get Ember to build .jsx extensions instead of .js?

I am trying to test and pass the data from ember to react which works good.

But may I know if I want to trigger callbacks function from react,

some thing like

which seems the passed function onClick would be undefined. Not sure if this plugin support this? Or maybe I use wrong format or something

This might be more of a question, but I wasn't able to find an answer to this - is there a way to set tagName on the component returned by the @WithEmberSupport decorator, so that the React components are not wrapped in extraneous divs? I can't seem to find a way, using @tagName('') from ember-decorators doesn't seem to work here.

• Ensure this actually works
• Add an example to the documentation site

Hi! Does this addon support Ember 2.x? I'm working with an Ember app that's running 2.14.2, and I'm getting the following after installation:

$ ember server
[...]
The Broccoli Plugin: [BroccoliMergeTrees: TreeMerger (vendor & appJS)] failed with:
Error: ENOENT: no such file or directory, open '/Users/peterjmag/git/[project-name]/tmp/source_map_concat-input_base_path-1IIoQwbO.tmp/node_modules/react/umd/react.development.js'

package.json makes me think that it only supports 3.x, but I thought I'd check first before I go through the whole process of upgrading my Ember app! And if not, perhaps I can do some digging and see if I can help contribute compatibility for 2.x. ☺️

a functional component with arrow function, eg:

const Test = ({ name }) => (

Hello, {name}

you get this error:
component-is-functional.js:10 Uncaught TypeError: Cannot read property 'render' of undefined
at componentIsFunctional (component-is-functional.js:10)

since arrow functions doesn't have prototype, is breaks this condition: arg.prototype.render === undefined

as a work around I initialized Test.prototype = {} and it works.

Hello,

Is it possible to load the development build of React instead of the production one ?

Tried to set alias via ember-auto-import but it did not work.

autoImport: {
	alias: {
		react: 'react/cjs/react.development'
	}
}

Am I missing something ?

I'm wondering if anyone knows the best way to import scss files. Simply doing:

import "./MyComponent.scss";

doesn't work. I get a browser error: Could not find module my-project/sub-dir/MyComponent.scss.

Thanks!
Alvaro

Fresh install in Ember 3.7

• installed ember-decorators: ember install ember-decorators

Then I got this error: Uncaught TypeError: A class descriptor's .kind property must be "class", but a decorator created a class descriptor with .kind "undefined"

After, I read in another bug about the ember-auto-import, so I installed: ember install ember-auto-import too, and got this error: Uncaught TypeError: Cannot read property 'unstable_cancelCallback' of undefined react-dom.development.js:8711