score:3
Looking at the webpack config, I could see that, UI kit is getting bundled with react
included which might be causing the issue.
To avoid this you could use webpack externals.
https://webpack.js.org/configuration/externals/
The externals configuration option provides a way of excluding dependencies from the output bundles. Instead, the created bundle relies on that dependency to be present in the consumer's environment. This feature is typically most useful to library developers, however there are a variety of applications for it.
So you could update UI Kit webpack config to not include react
and the peerDependencies should take care of the dependency handling for any consumers of the library.
Updated webpack.config
const path = require("path");
module.exports = {
mode: "production",
entry: "./src/index.js",
output: {
path: path.resolve("dist"),
filename: "index.js",
libraryTarget: "commonjs2"
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /(node_modules)/,
use: "babel-loader"
},
{
test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].[ext]",
limit: 10000,
mimetype: "application/font-woff"
}
}
]
}
]
},
resolve: {
alias: {
components: path.resolve(__dirname, "src/components/"),
utils: path.resolve(__dirname, "src/utils/"),
themes: path.resolve(__dirname, "src/themes/")
},
extensions: [".js", ".jsx"]
},
externals: {
// Use external version of React
react: "react"
},
devtool: false
};
I have published a test package to confirm this (react-ui-kit-dontuse).
Demo links
v0.0.21(Without webpack externals)
https://stackblitz.com/edit/react-xyjgep
v0.0.23(With webpack externals)
https://stackblitz.com/edit/react-ihnmrl
Source code of test package: https://github.com/nithinthampi/react-ui-lib-test
Hope this helps!
Source: stackoverflow.com
Related Query
- Importing and using component from custom React Component Library results in Invariant Violation: Invalid hook call
- Importing React component from custom component library into HTML
- Importing script via script tag and using function from that script within react component
- Testing <Input/> component from Material UI using Testing React Library and the call back function is not recongnized in the onChange prop
- How to prevent child component from re-rendering when using React hooks and memo?
- React Context API not working from custom NPM component library
- Importing data from excel and displaying in a react component
- React 16: Call children's function from parent when using hooks and functional component
- Test custom method on React component has been called, using Enzyme and Sinon
- React : Firing a custom alert from multiple components using an existing component having its own styles
- Getting the ref from a dynamic component when using Redux, React and react-router-dom 4.x
- How to pass function from FUNCTIONAL to CLASS component and access it outside of render( without prop ), using context in react js?
- Handle a custom component using React Hook Forms and React Table
- I want to navigate to a page/component where I passed the data from another component using both React hooks and useHistory, but I get undefined
- Pass PageProps from Gatsby and Parent into Functional Component returns undefined using React and TS
- How to use the useHook in the component rather than passing the value returned from it as a prop to the components using react and typescript?
- How to fetch data from a custom React hook (API) with onClick and display it in a Div using TypeScript?
- In React How to pass object using history.push from a component to child component and read data
- How to reset child component from parent using React Context and Hooks
- Error Coming when passing props from one component to another and vice - versa in react using typescript
- Display data from API using react component and useEffect
- "Error: Invalid hook call." when importing React component from shared component library in monorepo (turborepo & npm workspaces)
- React / Next - importing component from external library cause : Element type is invalid: expected a string or a class/function but got: undefined
- How can I pass props from one component to another using Link and router in react
- Return checked value from Child to Parent and to Grandparent component using React
- How to pass a json array that comes from backend to child component using props and react hooks?
- How to properly export a component from a React custom hook and a function to control it?
- Importing React component and using its method not working
- Get react component from library using a list
- how to customize the shape height and width of a component from the props using react
More Query from same tag
- Use axios call as src of image
- React Router and this.props: this.props.location.state is undefined
- Showing loading indicator while writing data to Firestore
- vue.js: how to update state with object?
- Jest/Enzyme: Error: Uncaught [TypeError: Cannot read property 'query' of undefined] on component wrapped in withRouter
- React Error Boundaries cannot work, just break
- Map multiple arrays at the same time javascript/reactjs
- How can I update component whenever typing in input tag in React?
- React hook useState not updating state as desired?
- How to call actual callback function in Jest unit test
- How do I turn a JSX Element into a Function Component in React?
- React Router v4 fetch data based on params
- How to connect reactJS with mysql on node.js
- tslint:disable-next-line won't work for jsx prop error
- How can I update only part of the state
- How to share asset requests between components using react hooks?
- Access variable from script inside React component
- What is the preferred design pattern to delay rendering of a component in React?
- run my method when redux change store props. ReactJS
- React Redux how to get value in to my input
- TypeError: props.theTodos.map is not a function
- useState does not update the value on Component Re-render
- Flow - Defining interface based on props for a react component
- image coords changing on browser width change
- onClick animation not trigerring
- React.js - Material-ui DataGrid disable row width
- Updating variable of state and calling in react state?
- How do I update 2 objects with React Hook useState
- I am getting the following error using Next js. I am building an authentication pipeline using axios as the http client
- React - How to find out the last document in a FireStore collection