I have created my own custom React.js Icons package, with the help of the #chakra-ui/react and #chakra-ui/icons packages. However, when I import an Icon from my custom package, create-react-app throws an Invalid hook call.
Here is the code:
My custom package:
export const Down = createIcon({ d: "M21 7l-9 10L3 7", displayName: "hey" });
The other project I import it into:
import { Down } from "#hashtag-design-system/icons";
...
return (
<Down />
)
Any help is appreciated!
I had to pass #chakra-ui/react & #chakra-ui/icons, as peerDependencies in the package.json file, in order to fit this. I also used Rollup.js, that did not include extra code, but adding the packages as peerDependencies, seem to solve the issue
Related
I'm trying to write a Jupyter Widget that uses react based on this cookiecutter. I specifically need to use a certain version of react. However, even when installing a specific version, after building the widget, a different version is used in the jupyterlab frontend.
The react version that is installed in the node_modules folder is the version that I want to use and no other module has react as a dependency. In the node_modules folder, there is also no trace of a different react version to be found.
Specifically, I want to use react 18.2.0. The version that I get by logging React.version in the frontend is react 17.0.2. Obviously, I am not able to use React 18 features like useId which results in an error.
How can I use a different version of react? And where does this other react version 17.0.2 come from?
Reproduce:
Install the cookiecutter as described in the README.
Install react and react-dom via jlpm/yarn add react#18.2.0 react-dom#18.2.0.
Add a simple React component in a new file:
import React from 'react';
export const SimpleComponent = () => {
console.log('React.version:', React.version);
return <div>Simple Test</div>;
};
Render the react component in the render() function of the view in index.ts:
render() {
this.component = React.createElement(SimpleComponent);
ReactDOM.render(this.component, this.el);
}
Console shows: "React.version: 17.0.2"
If you need to change to a specific version of React, you can run this in the terminal:
npm install --save react#18.2.0
Thanks to krassowski for giving me the link to the answer!
In my package.json, I added two entries for react and react-dom to sharedPackages so that I get:
"jupyterlab": {
"extension": "lib/plugin",
"outputDir": "testproject/labextension/",
"sharedPackages": {
"#jupyter-widgets/base": {
"bundled": false,
"singleton": true
},
"react": {
"bundled": true,
"singleton": true
},
"react-dom": {
"bundled": true,
"singleton": true
}
}
}
I have installed marked js in react app using npm install --save #types/marked.
Below is the react component:
import { marked } from "marked";
// import { marked } from "../../node_modules/#types/marked/index";
// import { marked } from "../../node_modules/#types/marked/index.mjs";
// import * as marked from "marked";
const MyPage : React.FC = () => {
return (
<div>
{ marked("Hello world from MyPage.") }
</div>
)
}
export default MyPage;
As you can see in below screenshot of tooltip in VS code, the intellisence knows where the actual function is.
But the app does not compile, I get the following errors (corresponding to different styles of imports for marked in comments):
Module not found: Can't resolve 'marked' in 'D:\coding\myblog\blog-frontend\src\app-components'
Module not found: Can't resolve '../../node_modules/#types/marked/index.mjs' in 'D:\coding\myblog\blog-frontend\src\app-components'
Basically, what ever string that I am providing after from in import statement, react tries to find it in ~/src/app-components. But all other imports are working fine (like my servies, models etc).
I know it's a bit late, but I had the same issue and could resolve it with:
npm install --save marked
In your package.json file you can look up dependencies if it's correct installed.
I used npm install -g marked at first and that wasn't really working despite getting the feedback that it was installed.
I have been trying to get react-select to work but somehow i have failed in every turn. What ever i have tried is:
1-create react project using vs2022
2-install react-select using "PM > npm i --save react-select" command
3-modify home.js as in following
import React, { Component } from 'react';
import Select from 'react-select'
export class Home extends Component {
render () {
return (
<div>
<Select />
</div>
);
}
}
4-Hit F5 key.
The above attempt results in Invalid hook call error. I have no idea what i have been doing wrong.
I have realized that aforementioned problem is not something specific to react-select. It exists in every single component that I have tried so far...
Problem is; I was using Package Manager Console ( PM ) which installs components under [PROJECT_DIR]/node_modules directory.
Navigating to [PROJECT_DIR]/clientapp using cd clientapp in Developer Powershell (PS) and then issuing same npm command fixes the problem.
By default prop-types do not run in production for a react app. I realize this is a good thing to improve performance. However, we have a Storybook that we have built and are deploying it to a static site. Storybook has an addon called Docs that detects the prop-types for components and creates a table of the prop-types for easy to read documentation.
When running the storybook locally, everything works perfectly. The prop-types are detected and this table is generated.
SpinningLoader.propTypes = {
color: PropTypes.string,
size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
};
However, since prop-types are disabled in production by default. They cannot be detected when the storybook is deployed to a static site.
Is there a way to enable prop-types in production? Or some other workaround?
It's a little difficult to know without seeing more of your setup. If you're building it with the default storybook commands without and additional configuration it should "just work"...as far as I can tell.
As mentioned in a comment, Storybook has a specific build command you can add to your package.json to export it as a static app:
"scripts": {
"build-storybook": "build-storybook -c .storybook -o .out"
}
If you're using that command and it's still not working, are you using any custom webpack/build workflow, and can you post those as well?
I've built a minimal repository for reference, which may be helpful in comparing your setup. Besides the packages in package.json it's really only 3 files; Storybook config, a React component, and a Component Story:
.storybook/main.js
module.exports = {
stories: ['../src/**/*.stories.[tj]s'],
addons: ['#storybook/addon-docs'],
};
src/components/message/message.js
import React from 'react'
import PropTypes from 'prop-types'
const Message = function Message({ text, color }) {
return (<div style={{ color }}>{text}</div>)
}
Message.propTypes = {
text: PropTypes.string.isRequired,
color: PropTypes.string.isRequired,
}
export default Message
src/components/message/message.stories.js
import React from 'react'
import Message from './message'
export default { title: 'Message', component: Message }
export const withText = () => <Message text="Hello World" color="green" />
If I run the build-storybook command, cd .out, and then npx live-server, I see the static-built storybook site, with my Message component, and the 'Docs' tab that includes the prop-types:
Full repository for reference
https://github.com/BenjaminWFox/react-storybook
A workaround would be to manually specify the information you want to display in the table for each component using ArgTypes: https://storybook.js.org/docs/react/api/argtypes. Then you can continue with the documentation with that approach.
Another option would be to complete and publish the storybook while the app is still in development. This way you will have the prop-types detected and the table generated for you, then you can later build your app for production.
This is how you would declare the argTypes in the first option
// Button.stories.js
export default {
title: 'Button',
component: Button,
argTypes: {
label: {
description: 'overwritten description',
table: {
type: {
summary: 'something short',
detail: 'something really really long'
},
defaultValue: { summary: 'default-label' }
},
control: {
type: 'text',
},
},
},
};
This is the result
In case anyone runs into this issue again, setting NODE_ENV to development, as suggested here https://github.com/storybookjs/storybook/issues/8140#issuecomment-621314565, solved our problems
The issue was ultimately caused by including the transform-react-remove-prop-types plugin in our babel.config.js production environment. Without propTypes to read, there's nothing to display.
'propTypes' is a useful feature through which we can validate typechecking of props in React but it also unnecessarily creates runtime overhead. It
downgrades the apps performance.
That is the reason it is NOT available in production.
It has been made to help developers especially in a team, to find out if there is any wrong type of props been passed to the component, while writing code during the development environment.
It does not add any extra functionality. It will also add extra lines of code unnecessarily.
By keeping it in the production flow it will defeat the whole purpose.
Whether you also use Flow/typescript for typechecking, there purpose are all same.
refer: https://reactjs.org/docs/typechecking-with-proptypes.html
Now, your issue is similar to the below known issue, kindly refer below:
https://github.com/storybookjs/storybook/issues/1661
I've been having errors after errors to the point where I've reset my Metro Bundle and performed updates, errors from required module "699" to "700" have been coming up and now this. I believe I have all the required dependencies for Drawer navigator and ionicicons but errors continue to persist. I have code written in different files but below is the one written in App.js. Feel free to ask for the other ones in order to solve the issue at hand.
import React from 'react';
import {
View,
Text,
StyleSheet
} from "react-native" ;
import DrawerNavigator from './Menu/DrawerNavigator';
import SettingScreen from './Menu/SettingScreen'
export default class App extends React.Component {
render(){
return (
<View style ={style.container}>
<SettingScreen/>
</View>
);
}
}
style = StyleSheet.create ({
container: {
flex: 1,
justifyContent: 'center',
},
});
For mac,
I have this error, I believe that you have npm install/yarn add a new package and you will require to Ctrl+C to exit the Metro Bundler and restart again. The error/issue will be solved.
For Windows,
I got the same error, what I did is
close your local-cli windows(picture attached)
uninstall the app from your device/emulator(there can be two apps with the slight change name of theirs).
run again the with react native command like 'react-native run-android'
I tried to reproduce it after these steps but I wasn't able
For Windows 10:
Restarting the Metro Bundler by pressing ctrl + c and then expo start will fix this issue.