Unable to use a shared component library that uses material-ui #16862
Comments
|
Any leads would be helpful. Thanks in advance. |
This comment has been minimized.
This comment has been minimized.
|
Thanks for the fast response @oliviertassinari . Thanks in advance |
|
Deleting every node_modules folder in my workspaces and root folder, then installing everything afresh solved this issue for me. @prasanna-mswamy |
|
@Akuukis, Thanks for the suggestion. But this didn't solve the issue. |
|
I have the same issue, using material-ui in a shared ui component library. The issue for me was with using npm link (so that the main app can access the library directly through a symlink). When including the built and published library, only the |
|
Having same issue, haven't found a solution yet |
|
This is likely an issue with your build setup bundling multiple versions of react. See facebook/react#13991 for for an in-depth discussion and possible workarounds. |
oliviertassinari
added
the
support: question
|
I made the mistake of upgrading |
|
I have the same issue. Here's my setup: when I updated on the package.json of /sharedcomponents/ to "@material-ui/core": "4.5.0" (but tested on all 4.x.x) I start the get the error on the /app/ and /admin/ apps. I double checked all versions of react/react-dom and they all match. Issue is trigger by updating to the @material-ui 4.x.x version. If useful I can try to create a small sample to reproduce the error. -- Here's the /sharedcomponents/ webpack.config.js var path = require('path');
https: module.exports = {
mode: 'production', // "production" | "development" | "none"
entry: './index.js',
output: {
path: path.resolve(__dirname, 'build'),
library: 'nispero',
libraryTarget: 'commonjs2',
filename: 'index.js',
//umdNamedDefine: true,
// libraryTarget: 'commonjs2', // THIS IS THE MOST IMPORTANT LINE! :mindblow: I wasted more than 2 days until realize this was the line most important in all this guide.
},
module: {
rules: [
{
loader: 'babel-loader',
test: /\.js$/,
include: path.resolve(__dirname, 'src'),
exclude: /(node_modules|bower_components|build)/,
},
],
},
resolve: {
alias: {
react: path.resolve(__dirname, './node_modules/react'),
'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
'@material-ui/styles': path.resolve(__dirname, './node_modules/@material-ui/styles'),
'@material-ui/core': path.resolve(__dirname, './node_modules/@material-ui/core'),
},
},
externals: {
// Don't bundle react or react-dom
react: {
commonjs: 'react',
commonjs2: 'react',
amd: 'React',
root: 'React',
},
'react-dom': {
commonjs: 'react-dom',
commonjs2: 'react-dom',
amd: 'ReactDOM',
root: 'ReactDOM',
},
moment: 'moment',
'../moment': 'moment',
//'@material-ui/core': 'MaterialUI',
'@material-ui': {
root: 'MaterialUI',
commonjs2: 'material-ui',
commonjs: 'material-ui',
amd: 'material-ui',
},
},
}; |
|
@prasanna-mswamy, @gknapp , @ryan-gray not sure if you have found another solution but, I keep digging into this and it looks when we are linking the /sharedcomponents/ as part of the npm link, so if you build the library and then delete the /sharedcomponents/node_modules/ folder it won't find 2 copies of react. I found this while reading another thread there's a @dmart914 post about this specific. There's another workaround which is using Yarn resolutions "resolutions": {
"**/react": "16.7.0-alpha.2",
"**/react-dom": "16.7.0-alpha.2"
},I haven't tried because i'm using NPM, I was looking for a good reason to switch to yarn and it looks I found it. I will test and write on this thread the result. Edit: I tried with Yarn Resolutions and it works perfectly. |
|
@kennethrivera I upgraded |
|
I'm getting the same original error. and have done all the suggestions in here. But the issue only occurs on the im on |
oliviertassinari
added
discussion
and removed
support: question
|
I'm on
|
|
The attached is a copy of our private package. the package src and the demo app are found in here too. The issue exists currently in this package |
|
Moving react to webpack externals worked for me. Seems to be more of a workaround though. |
|
I am still having an issue with this. |
|
I am also having major issues trying to include material-ui with create-react-library. Use-case is simple, same as OPs: to create a library of resusable components with material-ui as the base, but this issue makes it impossible |
oliviertassinari
added
support: question
|
I had this issue and I solved it by delete |
My Question has nothing to do with hook realted issue but in fact its related to sharing theme object...My component library is not picking up the theme provided from consumer App...Any help would be appreciated |
|
In your library's package.json, move react and react-dom out of dependencies and into peerDependencies. |
Maybe I'm missing something, but how does one develop the components in the shared library without the ability to render them and view them as they're being built? |
|
@shaninizan, that's exactly it! Thanks. |
Expected Behavior 馃
To be able to use material ui in a shared component library built with webpack and for the components to be usable in consumer apps of the shared library.
Current Behavior 馃槸
We started getting the below error when running the consumer apps. The components in the library itself are available for testing and storybook without any issues. But we get the below error in the consumer app when a component built with material-ui is used.
I know that this issue might be linked to a known react issue, I have tried the changes suggested in the following issues. But none of the directions have helped solve the issue.
#15832
facebook/react#15628
#16452
facebook/react#13991
Steps to Reproduce 馃暪
Unable to reproduce this in codesandbox. But created a repository with the example instead.
https://github.com/traversals-analytics-and-intelligence/material-ui-react-hooks-issue
Context 馃敠
We have a shared component library that uses material-ui to build the components. I have added a simpler version of the library and an example consumer of the library. With this, we were able to add components needed in the library and use them in the consumer apps.
Your Environment 馃寧
The text was updated successfully, but these errors were encountered: