I've installed the React Developer Tools extension on Google Chrome to debug a React application written in TypeScript, but once I start debugging the application and open the "Components" window, all components are shown as "Anonymous".
Granted, the application uses mostly function components.
Does anyone know if there is a way to get React Developer Tools to show component names in its component tree?
This happens when you define your components like so:
// Default arrow function export
export default () => {
// ...
}
// Default function export
export default function() {
// ...
}
You can replace with the following to fix the issue:
const CustomComponent = () => {
// ...
}
export default CustomComponent;
// or
export default function YourComponent() {
// ...
}
If you're using an exported anonymous functional component or a memo'ed component; it would be shown as Anonymous
Refer this - https://github.com/facebook/react/issues/17876
Or try solutions mentioned here - React Dev tools show my Component as Unknown
Related
I have this react component. It works just fine for me.
import { Widget } from 'rasa-webchat';
function CustomWidget(){
return (
<Widget
initPayload={"payload"}
socketPath={"/socket.io/"}
customData={{"language": "en"}}
/>
)
}
export default CustomWidget;
But when I try to use it on my next.js website it fails to work.
It gives me a window is not defined error.
I think I resolved this particular error by using the dynamic importer:
import dynamic from "next/dynamic";
const webchat = dynamic(
() => {
return import('rasa-webchat');
},
{ ssr: false }
);
But now I can't figure out how to actually use the widget component from the package.
Am I allowed to import { Widget } from 'rasa-webchat' or is this just not compatible with next.js for some reason? If it's possible, how do I do it?
The syntax for named exports is slightly different. You can use the widget with a dynamic import as follows:
import dynamic from 'next/dynamic';
const Widget = dynamic(
() => import('rasa-webchat').then((mod) => mod.Widget),
{ ssr: false }
);
function CustomWidget(){
return (
<Widget
initPayload={"payload"}
socketPath={"/socket.io/"}
customData={{"language": "en"}}
/>
)
}
export default CustomWidget;
For further details check Next.js dynamic import documentation.
Nextjs is a frame work that allows you to build Static and Server Side rendered apps. So, it uses Nodesj under hood and window is not defined in nodejs. Only way to accessing window in react ssr frameworks is useEffect hook. Your dynamic import solution is right , becuase you are getting file on client side. I hope it makes sense.
Have a great day
Does anybody knows what the shortcut is for React functional components snippet in WebStorm?
So far I only found shortcut for class components.
Please try rsf - it creates a code like
import React from 'react';
function Func(props) {
return (<div></div>);
}
export default Func;
I use the rsc live template a lot for new components.
This creates code like:
import React from 'react';
const MyComponent = () => {
return (
<div>
</div>
);
};
export default MyComponent;
Apart from that I created my own live template in the JavaScript category for creating arrow functions to save even more time, which creates code like:
const myFunction = () => {
};
Just add a new Live Template under the JavaScript category with this template text:
const $1$ = () => {
$END$
};
And make sure to set applicable in to JavaScript and TypeScript and select the checkboxes for:
statement
top level statement
i. rsf - Creates a stateless React component as a named function without PropTypes.
import React from 'react';
function AppComponent(props) {
return (
<div></div>
);
}
export default AppComponent;
ii. rsfp - Creates a stateless React component as a named function with PropTypes.
import React from 'react';
import PropTypes from 'prop-types';
AppComponent.propTypes = {
};
function AppComponent(props) {
return (
<div></div>
);
}
export default AppComponent;
You can configure your own templates in the web-storm by your own key word
go to settings -> editor -> live templates
Selecting React, on the right side press the add button or alt + insert to create a new template key bindings are based on Linux system
Click Live template it will open a pane on below
Add your desired abbreviation in my case i wanted a arrow function with export so i added rafce, description is optional
In the live template paste your desired format of code generation for your abbreviation
Example:
// Created on $DATE$ by $USER$: for project $project$
import React from 'react'
const $FileName$ = () => {
return (
<div>$FileName$</div>
)
}
export default $FileName$
${var_name}$ can be used to describe a inbuilt function on the ide or your custom variable
for more reference refer the webstorm documentation on inbuilt functions for live templates webstorm live templates
You can edit these variable declarations on edit variables to get your desired behavior
Variable declaration for above template
Set the application context to java script and type script click save and apply your template is ready
I’m using Storybook 5.2.6 for React 16.9.0 with Typescript 3.5.3 and using Material UI themed components.
Having added, and configured, #storybook/addon-docs the Storybook Docs page displays: “Cannot read property 'classes' of undefined” in the PropsTable when a component is wrapped withStyles from #material-ui.
Component:
import React, {FunctionComponent} from 'react';
import { Typography } from '#material-ui/core';
import {
withStyles,
WithStyles,
} from '#material-ui/core/styles';
import styles from './index.styles';
export interface IProps extends WithStyles<typeof styles> {
message?: string;
testId?: string;
}
const Bar: FunctionComponent<IProps> = (props) => {
const {
classes,
message,
testId = ‘test-bar',
} = props;
if (!message) { return null; }
return (
<Typography className={classes.message} data-testid={testId}>
{message}
</Typography>
);
};
export default withStyles(styles)(Bar);
Story
import React from 'react';
import { storiesOf } from '#storybook/react';
import { MuiThemeProvider } from '#material-ui/core/styles';
import Bar from './index';
import theme from '../../../others/global/material-ui-theme';
storiesOf('Bar', module)
.addDecorator(story => <MuiThemeProvider theme={theme}>{story()}</MuiThemeProvider>)
.addParameters({ component: Bar, componentSubtitle: 'Displays the Bar with message’ })
.add('Warning', () => <Bar message="warning" />);
In React devtools and debugging in Chrome devtools I can see the classes do get injected as props so I’m kinda stumped at the moment how to resolve this?
So a work around exists, you export the "unwrapped" component and use that as the component in docs:
As mentioned here:
https://github.com/storybookjs/storybook/issues/8361
and commented here: https://github.com/storybookjs/storybook/issues/8435#issuecomment-547075209
Example:
export const PureBar: FunctionComponent<IProps> = (props) => {
// ...
};
export default withStyles(styles)(PureBar);
Then in the story, update the component parameters to target the "Pure" component:
// import both the pure and wrapped components:
import Bar, { PureBar } from './Bar'
// Add to the story:
storiesOf('Bar', module)
.addParameters({ component: PureBar, componentSubtitle: 'Displays the Bar with message’ })
.add(/* ... */);
I'm pretty new to rxjs, and trying to understand what's needed here to expose the Chat object in the Bot Framework, as I need to call some methods in it I'll add. I essentially need access to the created Chat component from the webpage, which right now has a BotChat.App. There's also a BotChat.Chat, but that doesn't seem to be the instance I need access to.
The following is used from the Bot Framework by calling BotChat.App({params});
That in turn creates a Chat component (eventually in App.tsx below). I need to basically expose the Chat instance that is used, as I want to modify it.
BotChat.ts (Complete)
export { App, AppProps } from './App';
export { Chat, ChatProps } from './Chat';
export * from 'botframework-directlinejs';
export { queryParams } from './Attachment';
export { SpeechOptions } from './SpeechOptions'
export { Speech } from './SpeechModule'
import { FormatOptions } from './Types';
// below are shims for compatibility with old browsers (IE 10 being the main culprit)
import 'core-js/modules/es6.string.starts-with';
import 'core-js/modules/es6.array.find';
import 'core-js/modules/es6.array.find-index';
And here in App.tsx note the Chat component used below. That is what I need to expose up through the webpage. A bit confused as to if it's exporting a "Chat" type as opposed to getting access to the instance of Chat being used in App.tsx. Hope this makes some sense :)
App.tsx (Complete)
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Chat, ChatProps } from './Chat';
import * as konsole from './Konsole';
export type AppProps = ChatProps;
export const App = (props: AppProps, container: HTMLElement) => {
konsole.log("BotChat.App props", props);
ReactDOM.render(React.createElement(AppContainer, props), container);
}
const AppContainer = (props: AppProps) =>
<div className="wc-app">
<Chat { ...props } /> //<--------------This is what I want to get
//access to on the webpage, which currently
//only uses BotChat.App() to initialize the
//web chat control. Not sure how to expose
//this _instance_ to App.tsx and then expose
//that instance to the webpage.
</div>;
Web Chat has a Redux store and a RxJS stream that you can expose to interact with the <Chat> component. In React, you can, but people usually don't expose any functions out of it. Short reason: the contract of a React component is props, not functions.
For RxJS stream that you can access the chat history, you can look at the backchannel sample. But it's a read-only stream.
For other interactivities, look at Store.ts to see what actions it is using. Then, expose the Redux store at Chat.ts (easy hack: thru window variable, better: make a callback props at <Chat>).
If you need more interactivities that is not in the existing Redux actions, feel free to add some more. For example, this pull request should give you a sense of injecting chat history.
I am building a React-redux library that displays a widget chat. The library should provide an interface allowing the client to configure and understand the state of the library and, render widgets into their document.
I use Webpack for the build process.
I use Twilio-Chat library for the chat features.
My index file looks like this:
Index.js
import MyChatWidget from 'components/MyChatWidget';
export default {
widgets: {
MyChatWidget: {
render: (args) => {
ReactDOM.render(
<MyChatWidget />
);
},
logout: () => {
// this function should call a the logout in the MyChatWidget
// React Component
}
}
}
MyChatWidget
import Chat from 'twilio-chat';
class MyChatWidget extends Component {
logout() {
Chat.shutdown()
}
}
export default connect()(MyChatWidget);
The logout is exposed to the client and it should call a function inside the MyChatWidget component.
How can I achieve this behaviour?
Am I including the Twilio Chat in the wrong place(MyChatWidget Component)?
I read this article for the building with webpack (https://codeburst.io/building-react-widget-libraries-using-webpack-e0a140c16ce4)
Disclaimer: I'm not a huge fan of putting anything on the window object, especially because if you use server rendering the window isn't available. But passing an instance of your class to the window object would make it accessible anywhere JS has access to the window object.
constructor() { super(); if ( window ) { window.mychatwidget = this; } }
You can declare the logout method static and access that method as MyChatWidget.logout() in your index.js