I am working on some React Native project. If you work with react native or react before, you know that even in the middle-size projects, imports increase dramatically. Due to that, I use the technique which is creating index.js/ts and import a file from the one reference. Everything was quite perfect until upgrading the react version. When I had upgraded the version of the project, the project started to show me a warning message as you can see below.
But the thing is, I made this cycling dependency on purpose. I don't know how can I fix the thing by continuing to make the all imports together.
here is my Plugings/index.ts file;
and here is my Plugins/Contact.ts file;
PS: I know that the solution by making import directly, which means not importing from index.ts file.
Thanks for the time.
I think you could try import your Localization from './Localization' at Contact.ts
And you could work as what in index do in Contact.ts, and then you will not import
index at Contact.ts to disconnect the chicken-egg problem.
Related
First of all, thank you for reading and trying to understand this question.
In my team we have built a library for common Components with React for about 2+ years. This library is built with Babel creating two different transpilations. One in CommonJS for our Test Runner to run tests (because Jest cannot use ESM) and another one in ESM for Create React App (Webpack inside) to make Tree Shaking possible. We use Create React App to build and develop our Apps.
This is working for us perfectly. But we have encounter a problem when managing Final Form Peer Dependencies (or any other library). This is our scenario:
Common Components Library
PeerDependencies
Final Form
DevDependencies
Final Form
App1
Dependencies
Common Components Library
Final Form
App2
Dependencies
Common Components Library
Final Form
App3 (It dont use FinalForm but it uses other Common Components)
Dependencies
Common Components Library
I'll explain this:
In our Common Components Library, which I spoke earlier, we have React Components that works with Final Form, like for example a Vitaminated Autocomplete Text Input Component that we share among many Apps. This Apps also use Final Form to create Components that implement forms locally for that App.
So App1 is right. Everything works fine. But for one thing, now if we want to upgrade Final Form version for this App because, lets say, we need a bug fix of Final Form. We are been forced to upgrade also our Common Components Library and the other App's Final Form version. We need to do this if we want to avoid execution errors within the Final Form React Context. If you are familiar with Final Form or React Context in general you probably have encountered this problem. You can't use different versions of a library that uses React Context. i.e: if we have final-form#1.2.3 in our Common Components Library and final-form#1.2.4 in our App1 it would genereate an execution error. So as I said, we are forced to upgrade not only on App1 and Common Component Library also on the other Apps that uses a Common Component on the Library that uses Final Form. The statement would be: 'Now, if we upgrade somewhere we have to upgrade everywhere'. And we don't want to do that. Probably we aren't handleling dependencies correctly.
So this drove us to move Final Form dependencies (we also use react-final-form, final-form-arrays, etc...) to PeerDependencies. Our problem was solved. But now, another one appeared when we saw that in Apps like App3 we were having an error when we build our App3 with Create React App. This is our output when using npm run build:
module not found `react-final-form' in file 'node_modules/CommonComponentsLibrary/VitaminatedAutoCompleteTextInput.js'
This means that, even with our App not using this VitaminatedAutoCompleteTextInput when we build its checking for every import in the node_modules so this is making us unable to build our App3. When we add the 'missing' depednencies to our App this builds with no problem and then when analyzing our bundle with source-map-explorer we see that final form depdenencies are not included in the bundle.
Is this necessary? I felt like we are missing something here. One solution for us has been including final form depdnencies on the Common Components Library as 'normal' dependencies but we were still having the first problem I mentioned before.
Maybe this problem is not only related with Create React App or Final Form. This is probably a more global isse within ESModules Libraries with Npm dependencies. Probably you will need me to enchance the explanation or have questions. I'll be glad to improve this question where needed. I have also searched on Google and here to find a similar question but I only found this. I dont know exactlcy if it's the same question but It have no answer yet.
Many thanks for trying to help or understand this issue,
I have to maintain an old project, and when I look into the code, it shocks me.
(function($, React, ReactDOM){
...............
ReactDOM.render(<App/>, $("#root")[0]);
})(
jQuery, React, ReactDOM)
The backend language is C#. I didn't know backend so it's hard for me to figure out how this project works.
it put all components in one file(one file one page), the code is really long.
It didn't use any import and export syntax.
Now I need to add new page, I want to use many files and use import to put it together. Is this possible?
I didn't find where it import react, maybe the cshtml file in the Views folder I guess. I want to use a new version of React with my new page, is this possible?
The question is pretty vague as it stands, but I don't see how it could be improved in its current state.
Depending on the lifetime, future ownership, and current use of the project you're maintaining, it may make sense to refactor it as you describe in [1] and update to the React version you want to use. Yes, it is of course possible, but it is work.
As for [2], I don't know either way if it is possible to use different versions of React to render different parts of the project. That would certainly be interesting to see. I would recommend trying to stick to one version across the application -- otherwise the next poor soul who needs to update this project will have the same reaction you've had.
I was looking into three libraries to start the private project that will help me know more JavaScript. Those libraries are React, Preact and Svelte. Knowing that every library that I listed is guided by different (or similar) principles React is the most popular one. But two others are faster / smaller and these are the two attributes that I would like to follow.
My question is:
When React is imported...
import React from 'react';
... is there a way to make it smaller using webpack to bundle only what I will use from the main library?
Maybe there is something I don't understand or misunderstand when I was reading the documentation for React and webpack?
I'm currently writing a few components I want to open source and I always struggle to find the right way to bundle my components and logic so it can be easily imported in any React project.
I want to use React hooks and my current way of using tsc for it (I prefer Typescript) is not really working because React complains that React Hooks need to be used inside a function component (which they are, it seems TSC kicks out some of the context).
Are there any good resources for that or even boilerplates? Thank you already for your answers. Cheers to everyone contributing! I owe you.
You can use create-react-library. It also supports typescript.
I've been working with a lot of Material-UI components recently, and for the most part, they are pretty easy to import. I'm starting to find that the documentation on http://www.material-ui.com/ is not very good when it comes to showing where to import components from.
For example, to import the List component, one needs to import from material-ui/lib/lists/list. Is there a known dictionary with these component and import paths associated? It gets quite frustrating to not be able to import the necessary components, even though they do seem to follow a fairly common path, i.e., material-ui/lib/.
It doesn't look like the repo on GitHub contains the true paths to the components, so better documentation might be the answer.
Thanks!
The example code in the docs is the very code that is run to create the examples. The imports shown there are the imports actually used by that code (for the version of Material-UI you are checking the docs for).
If an import isn't working, it is likely that either you're using a different version of Material-UI to that for which you are looking at the docs, or you have a typo in your import.
I had to import List using 'material-ui/lib/lists/list'
This confirms that your installed version of Material-UI is 0.15.0-alpha.2 or prior. We moved to the new directory structure in beta.1: https://github.com/callemall/material-ui/releases/tag/v0.15.0-beta.1, thanks to this PR: https://github.com/callemall/material-ui/pull/3749