We're using Material UI in our project, but there're many components that's shared between a few projects, se I'm creating a React components library to share them.
But when I import the component from library, I got the warning about #material-ui/styles:
It looks like there are several instances of `#material-ui/styles` initialized in this application.
This may cause theme propagation issues, broken class names, specificity issues, and makes your application bigger without a good reason.
I've checked by npm ls #material-ui/styles that there're only a single version.
But this problem is still happening even I added #material-ui/core, #material-ui/styles to the peerDependencies.
How can I fix this?
From the Materal UI docs:
Possible reasons
There are several common reasons for this to happen:
You have another #material-ui/styles library somewhere in your dependencies.
You have a monorepo structure for your project (e.g, lerna, yarn workspaces) and #material-ui/styles module is a dependency in more than one package (this one is more or less the same as the previous one).
You have several applications that are using #material-ui/styles running on the same page (e.g., several entry points in webpack are loaded on the same page).
As said by #Code-Apprentice one or more libraries are using #material-ui/styles (I bet it's react bootstrap). It doesn't really seem to be harmful but one way of fixing it is removing dependencies that use the #material-ui/styles.
Related
I'm running multiple React projects that share several UI components. To keep them consistent and minimize the efforts to maintain, I created a mutual repository and use it as a dependency. Other projects will install this repo dependency and import components from it.
dependencies": {
repo: git+ssh://git#github.com:YourName/repo.git
}
For pure UI components in repo, everything works fine. But as I created a component that uses React Hooks to manage its own state, an error happened saying that I might have more than one copy of React in the same app (one belongs to the main app and one belongs to the dependency).
The same issue when you use npm link, which I found a few workaround as described here and here. However, I couldn't make it work with a Github dependency.
Has anyone tried something similar and found a way to tackle this issue?
I'm completely asea here.
We had a working app build with an old Electron Forge (^5.2.4; 5.2.6) created using the old React template (1.0.2-1.0.4) with the usual suspects of React tech (react-redux, react-router, etc.)
Up until about 1-2 weeks ago everything has been fine. Now, after running its startup code, showing some components, doing some things, then we get a Variant 119 error (ref issues or multiple versions of React).
Since the code used to work the ref thing seems spurious, but I checked all our refs (there are a total of two). I did the usual npm ls and yarn list, even checked a lot of modules for additional Reacts, but found nada.
Our yarn.lock file has not changed other than some internal dependencies that aren't Electron or React related. No external components (BlueprintJS, Semantic UI React, ...) have changed over the course of working-to-non-working.
Here's the kicker: reverting to previously-working versions (including deleting node_modules etc.) doesn't help. The build machine is running the same version of NodeJS as it has been (10.15.mumble). I've tried to track down caches (including Yarn) and deleted them, deleted the out directory, done full rebuilds, etc.
What could be impacting an Electron Forge build like this? What other code, directories, caches, configurations, etc. should I be looking for?
That it impacts previously-working versions points me towards build/environment problems, although this happens across machines, which points back at the project. After multiple days bisecting and rebuilding and having the same thing happen I've paid a visit to Witt's End. And I don't like it there.
Looking at the error message, it lists two different reasons for the error. It seems you have ruled out multiple react instances in your code, but be wary if you use npm link as that can do weird things with dependencies.
So have you check to see if someone on your project team checked in something that is trying to use a ref where they shouldn’t as that will also cause this error
I want to use my UI components as a reusable seperate repo/project for my react-native iniit App.
So i creatd a seperate project folder like this
and installed these dependencies
and few dependencies externally with my other app.
Then i used
yarn link
to link this project to my working app as a module just like a node module. but i get this error when i try to run my app?
Is there an issue with my method, or is there a sure way i can try to reach my goal because i found multiple ways and various configuration of creating such component libraries.but i didn't use any since the end goal is different.
This is a known issue with the React Native packager. See this discussion: https://github.com/facebook/react-native/issues/637.
This may have to do with using watchman, although there seem to be a few different cases where this can crop up.
TL;DR: React Native packager does not respect symlinks to projects, so npm and yarn link do not work like you would expect them to. Apparently this is being resolved in metro-bundler: https://github.com/facebook/metro-bundler/issues/1.
Unfortunately the workarounds are not that pretty, but there are a few options discussed in the issue 637 discussion. It also looks like you may be using a github repo for your package.
You could tell npm to get your library from github via your project's package.json, so you probably do not need npm link, though you will not be able to link to your local files for your module this way.
I want to split my web project into three: front-end, back-end and super-admin.
What is the best way to re-use the components across code bases? Npm packages? That seems hard to maintain:
Open component dev package
Make changes
Push changes
Tag version
Update all projects
Seems complex and prone to errors. Is there a better way?
Depends on if you need to use different versions of the shared components from different projects. If so, you probably need to make a versioned npm package. However, if you just want to share the packages and use the same version everywhere, you have other options. For one, you don't have to actually build and publish an npm packge, you can just use npm link. This will basically create a symlink to your shared code in node_modules of the other projects.
Alternatively, you can do it without any npm package at all, just have the shared components in a separate project (directory) and import them in javascript through an alias, using a bundling system (webpack alias / browserify aliasify).
I want to have a project structure like that:
./app/package.json
./app/src/index.js
./widget1/package.json
./widget1/src/index.js
./widget2/package.json
./widget2/src/index.js
./widget3/package.json
./widget3/src/index.js
As you can guess, this project is like an aggregation of NPM widget subprojects, and the app src folder is the real app, that uses the different widget subprojects.
I want a clear and strict separation between the widgets because my current experience shows me that developers tend to introduce unwanted cyclic dependencies between widgets even if I tell them not too.
In practice, all these widgets will be ReactJS widgets that have for most of them 3 common JS libs: React, JQuery and Lodash. Some will not need these 3 libs, some will need an additional lib like packery, react-slick or react-date-picker All these widgets should also share common test libraries like mocha.
They absolutly need to share the exact same common library versions (because obviously I don't want different versions of React in my project nor to increase my bundle size).
For example,
- widget1 could be a DatePicker widget, that depends on React + Lodash + react-date-picker (npm lib, not mine)
- The app project could depend on React + Redux + Normalizr + all the widgets and their transitive dependencies like react-date-picker
All the widgets will be Presentational components and do not need much more fancy dependencies. Some will only depend on React. Some may have a Redux reducer but as it is plain old JS code, there's no dependency needed.
The number of widgets can be quite big and I don't want to edit 200 package.json files on each library update (however I could eventually use some code to handle that).
When inside widget1/src, it should be forbidden to require code from widget2. If a widget had to be able to depend on another widget, this dependency must be set explicitly in package.json of the client widget.
I should be able to build with Webpack and test all the widgets independently. I should also be able to build and test at once the whole project, including all the subprojects, and having a single aggregated global test and code coverage report.
I don't want it to have a bad developer experience. React and Webpack permits to have Hot code reloading. If I have the real app in my browser and I modify code of a widget, I should be able to see the change live with react-hot-loader and not have to run npm commands nor hit F5.
What I look for is the equivalent of Java Maven's dependencyManagement system where you usually set versions for all your subprojects in parent POM, and versions are somehow inherited to all child projects. All child projects cannot see each others (unless explicit dependency is added), but they can say they depend on a library declared in parent project. All the lib version numbers can be set in the parent project.
Is it possible to do so with NPM and Webpack?
Or at least something close to it?
Thanks
You could put each widget in it's own git repo and install them with NPM via the repo URL. As long as each widget defines the libraries they use in their own NPM package, when they're used in the main project NPM will handle all of the dependencies for you.
Depending on the size of your team you could also sign up for NPM's private packages and host them there https://www.npmjs.com/npm/private-packages
You might want to try https://github.com/n8tz/layer-pack,
as it meets many of the needs mentioned
It allows to:
inherit several npm packages in 1 source tree
manage module inheritance ( drive node & webpack to resolve them well )
put all Webpack conf & profiles in a shared, inheritable and versioned package
etc...
Note that hot reloading with too many inherited packages can be slow.
Alternative is to use precompiled versions of your widgets & externalize theirs deps.