I used error boundary inside (componentDidCatch)I want to log which react component is break in producation build.
conclusion is get react component Name inside componentDidCatch in producation build.
I read many article and below link this is same as I asked in question but it's not solve my problem.
Getting React Component by name
and I also saw some webpack related things (production config's uglify) but it's not proper clear.
let me know if any simplest way to solve this issue
By design, you should never be able to see debugging information in a production build. What you are trying to accomplish here is an anti-pattern. However, if you still want to go through with it, you can use:
this._reactInternalFiber.elementType.name
Note that it might be instable due to using a private property that belongs to React.
Related
I'm trying to make a NestJS Library for an API I want to access. I split it off into its own library where the main module is a dynamic module that takes the baseUrl for the server it will be connecting to. I then have a second "child" api-section module that will actually be making the api calls. I need a way to pass that baseUrl into the api-section while also exporting the api-section service from the api-library to use in the main apps app.module. The modules are split this way since there will be many "child" modules to access different parts of the API as its very big.
Currently this leads to a circular dependency issue, with the cli suggesting I use a forwardRef. I've tried adding a forwardRef to both the ApiSectionModule import in ApiLibraryModule and vice versa but that leads to another error "TypeError: metatype is not a constructor"
I feel like this whole thing is just the wrong overall pattern, but not sure how else to approach it.
Sample repo:
https://github.com/computebender/libsample
I am preparing to use React Native for a company project. However, flowtype is giving me error out of the box, and the errors come from react-native library (and some other libraries), so I have little to no control over. The errors are about some type definitions not accessible, and there are about 200 of them.
I only use the standard .flowconfig as follow
[ignore]
; We fork some components by platform
.*/*[.]android.js
; Ignore "BUCK" generated dirs
<PROJECT_ROOT>/\.buckd/
; Ignore unexpected extra "#providesModule"
.*/node_modules/.*/node_modules/fbjs/.*
; Ignore duplicate module providers
; For RN Apps installed via npm, "Libraries" folder is inside
; "node_modules/react-native" but in the source repo it is in the root
.*/Libraries/react-native/React.js
.*/Libraries/react-native/ReactNative.js
and it already includes some ignore modules.
I also notice that flow is very unstable, i.e. initially it reports no errors, and then, without no to little code change, it reports hundreds of errors from elsewhere where the code change does not happen (no extra libraries installed or imported).
The first question is, how can I avoid these errors and make flow output more meaningful for development.
The second and more general question is what is the convention for using flow.
If you find this question too general or misleading, please comment so I can make it better, because I am just as confused.
I am using
- React Native 0.44
- React 16.0.0-alpha-6
- Flow 0.46.0
Are there any instructions or example set ups for how to inject dependencies in Angular 2, latest release?
The Testing Guide is still incomplete, and only takes you so far. If, for example, you want to test a component that takes #Input() parameters, my understanding is that you specifically need to inject it, but I've run into some problems getting this to work.
When I try to follow examples such as this one I get errors about configureCompiler not being a part of #angular/core/testing. I believe this may have been moved into TestBed but when I try to use call TestBed.createComponent(MyComponent) I get an error that there's No provider for TestingCompilerFactory! And when I try to import it from #angular/compiler/testing I get a Typescript compiler error that it isn't there. Doing a grep, I can find the file it's in in my local node_nodiles but then that file gives a bunch of Typescript errors if I try to import it!
Is there any straightforward guide on how to do this?
Getting testing in RC5 can be difficult as it's still so new. You can look at this angular2-starter (https://github.com/antonybudianto/angular2-starter) and see how he has implemented testing in RC5.
As a fairly Microsoft-centric and predominantly back-end programmer, tackling all of these (cool) new technologies all at once has proved pretty daunting. I'm fairly pleased to say that I've got a lot of things wired together and that I feel as if i'm very close to breaking through one last hurdle to a point where i can finally begin to work and produce code efficiently in this brave new world, but there's a major obstacle I'm hung up right now. This is all new to me so i'll try to explain as i can:
I'm using VS 2015 and building up a DNX ASP.NET 4.5 MVC 6 web application. I've used NPM to install react, flux, and all manner of supporting modules. I'm working on my first fully-functional JSX screen which is using the flux pattern to load data and I'm receiving callbacks from my store when the data is loaded from an API service.
I love being able to use the require('xxx') syntax to chain the dependencies together, so I've formed that habit and i'm using browserify & reactify from my gulp task to manage the dependencies, gather all of the input files, and convert my JSX files to JS at, er, gulp-time i guess.
The issue i'm running into now is one that I never expected: when I use require() in a JS file to include a JSX source file that defines one of my react components and then attempt to mount an instance of that component using ReactDOM.render and JSX syntax, i'm receiving the following error:
Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of xxx.
Up to this point in the other areas of my app I've always included the react components thusly:
ReactDOM.render(<MyComponent />, $("#reactTarget")[0]);
That has always worked. But now that I've bought in to the browserify world to chain these source files together, if i include the line
var MyComponent = require('./MyComponent.jsx');
...and then proceed to try to include an instance of the component with:
ReactDOM.render(<MyComponent />, $("#reactTarget")[0]);
I receive the error above. Now given that all of this is new and somewhat fuzzy to me, i'm not 100% sure that it's the browserify aspect of this which is causing the issue, but it sure feels like it.
I've also tried react.createClass, passing in the 'MyComponent' variable from the requires line, but no joy.
I have this mostly working but of course putting the data on the screen - in this case using react - is the whole point of the thing so, the fact that i now have a functional dispatcher, actions, stores and API calls is exciting but i can no longer simply compose my react components as i used to.
what am i missing here? There must be a way to combine these techniques and technologies but i haven't been able to find an example that equates to this particular combination.
Thanks in advance.
I sometimes wonder what life would be like if I were a smarter animal. I've just spent an entire day - a weekend day, no less, chasing down phantom solutions and alternate configurations until I wanted to cry when in fact my issue was that I'd left off the 's' in module.exports at the end of my component definition. That bloody 's' cost me years of my life, I suspect. That's what I get for not copying/pasting when I'm toying with tings I barely understand. I guess I learned a lot in the process, maybe I'll get those hours back over time.
Thanks to anyone who made an effort here, or even pondered it at all.
Based on recommendations for the preparation for Ember 2.0...
• In general, replace views + controllers with components
• Only use controllers at the route level...
...we're supposed to eschew Controllers and Views in favor of Components. I haven't been able to figure out and/or understand how to generate Components that aren't direct parents of the components folder, i.e. components/component-name.js.
My current controllers folder looks something like:
/controllers
/account
index.js
edit.js
/business
index.js
Basically, there are sub-folders that group logic based on the sections of the application. How do I accomplish this with just components?
Seeing that components must have a "-" in them, I tried, but get an error...
ember generate component account/index-module.js
You specified "account/index-module.js", but due to a bug in Handlebars (< 2.0) slashes within components/helpers are not allowed.
Do all components have to be like
components
account-index.js
account-new.js
business-index.js
i.e. all in the same folder? This will start to get out of hand with the addition of what I actually consider to be components (things like video-viewer.js, text-editor.js, radio-button.js).
I would really like to have components in sub-folders, but unsure how to do this.
components
/media
/audio
audio-player.js
/video
video-player.js
/text-editing
text-editor.js
editor-toolbar.js
My components folder is already gross and I just got started:
Is it okay to leave the account/business logic in Controllers (seeing that it does say you should only use controllers at the Route level)?
I'm really confused about this "all components, all the time" convention.
Ok, so I had the same problem and as of ember 1.9-beta.3 (that's the version I tested). It is possible to have components nested under resource directories.
That means that you can have a "user" route or resource. And let's say you have a component which you only want to use with the user resource, so you want to put the component under the resource directory.
The way to do it is to put the component under the resource directory app/pods/user/component-name/template.hbs. The important part is to remember that components must have a dash in their name. It can't be just .../user/component it has to be .../user/component-name with a dash. Then you can use the component as {{user/component-name}} in your templates.
Also I think this is only possible when you're using the pod structure.
Ok, I think this question/answer needs a bit of an update for 2019. I have been using Ember for all of about a month, and my components folder has already become a pigpen. And the tutorial and main API docs don't really cover how to organize your components.
So I did a search of course. And the only answers I could find (like this one) are from around 2014-2015, and don't reflect modern Ember. I was about to accept my fate when I found this in the Ember syntax conversion guide.
(Note to the Ember folks: This is an important issue, one that almost every new user will encounter. It should feature a bit more prominently in the documentation. Maybe not the tutorial, but definitely in Components section)
You can in fact generate components under a sub-folder in Ember as such:
$ ember generate component foo/bar-baz
installing component
create app/components/foo/bar-baz.js
create app/templates/components/foo/bar-baz.hbs
installing component-test
create tests/integration/components/foo/bar-baz-test.js
So that's great, the files are created under components/foo and templates/components/foo. And to resolve the name of the component for use in another template, you can use either the old style syntax:
{{foo/bar-baz }}
Or the new style angle bracket syntax:
<Foo::BarBaz />
As the assertion suggests this is due to Handlebars 1.x, and will be available soon.
Ember 1.9 beta builds currently support this, though I'm not positive if ember-cli's resolver would work with it right now. You can read more about Handlebars 2.0 here.
Using a pods structure will also help with organization, and I believe is going to be the recommended strategy going forward.
For now, I'd suggest not to worry about it! Remember the transition plan will be smooth, and as the official releases come out for Ember and Ember CLI, you'll get deprecation warnings.