I followed this tutorial to do a server side render web app but when I attempted to implement React-Router I get the following error
Error: Element type is invalid: expected a string (for built-in components) or a
class/function (for composite components) but got: undefined. You likely forgot to export
your component from the file it's defined in, or you might have mixed up default and named imports.
I have been searching how to solve it but I cant seem to find a solution, any possible input would be awesome.
Thank you
Turns out the problem was in the imports one must need to import as follow
import Button from 'react-bootstrap/Button'
import Form from 'react-bootstrap/Form'
Also just the standard of loading the to the bootstrap file
Related
I have tried via weasyprint , pdfkit but showing errors even though if all errors removed, its showing very unsimilar output as expected .. Can anyone tell me what to do in changing django template that contains either Bootstrap or Css Or both in Django
Thanks for any help.
Here is the url where you can find how To Generate PDF in Django with WeasyPrint.
https://www.bedjango.com/blog/how-generate-pdf-django-weasyprint/
Weasyprint doesn't work well with bootstrap because it has media query and it is ignored by weasyprint.
This is the reference Link to Github site for clarity.
You can see the "Ignored ..." messsages in WeasyPrint error log(if you ever initilised).
So its better to use CSS for the print-pages and Internal CSS.
I heard that there are two different ways of importing components/modules.
Component way
Library way
Anybody has an idea about these concepts?
Take a look at the root index of material-ui. If you import something from this index, you are loading everything that is exported, which ends up being the entire library in this case. If you are not tree-shaking, your bundle will include everything exported by the library and all of its dependencies (whether you use them or not).
It is best to import from the component index (see Button/index.js), because you keep your consumption of the library to a minimum:
import Button from ‘material-ui/Button’;
This issue comes up a lot with lodash and is covered in the mui docs: Minimizing Bundle Size
I found solution to my question. Below is what I was looking for
Library way of importing
import { Button } from 'react-bootstrap';
import { FlatButton } from 'material-ui';
This is nice and handy but it does not only import Button and FlatButton (and their dependencies), but the whole libraries.
Component way of importing
One way to alleviate this is to try to only import or require what is needed, let's say the component way.
Using the same example:
import Button from 'react-bootstrap/lib/Button';
import FlatButton from 'material-ui/lib/flat-button';
This will only bundle Button, FlatButton and their respective dependencies. But not the whole library. So I would try to get rid of all your library imports and use the component way instead.
If you are not using lot of components then it should reduce considerably the size of your bundled file.
I am converting an existing web application to Polymer. The web application consists of components (in the Knockout component architecture) and modules. Both are loaded using RequireJS. I see how to convert the Knockout components to Polymer custom elements, but not how to deal with the JavaScript modules. RequireJS modules return a JavaScript object which is passed to the JavaScript that depends on it via a parameter to the “define” function. There does not appear to be a way to get that object if the module code is loaded via HTML import rather than RequireJS.
For example, several of the existing components use the moment.js module for date/time manipulation. They load it via RequireJS, which passed them a reference to the moment object. In one of the Polycast videos, Rob Dobson says that the recommended practice would be to write a moment.html file that contains just a <script> tag to import moment.js. A Polymer custom element can then do an HTML import of moment.html, but that does not give the component access to the object returned by the moment.js module. Moment does not put that object in the global namespace, so how does the Polymer custom element get access to the moment object?
This from Justin Fagnani of the Polymer team:
"Sounds here like you need a module loader/registry that works with Polymer / HTML Imports. I made such a thing called IMD: https://github.com/PolymerLabs/IMD
It's only a AMD-compliant module registry, but not a loader, so all modules have to be loaded via explicit or tags, which ensures that dependency ordering is preserved."
It does exactly what I was looking for.
I'm using Node / React / Webpack with leaflet. I installed leaflet using npm and in my map component I import 'leaflet'; which works fine for the js.
However, the map does not look correct due to the css not working correctly, however images stored in the leaflet/dist/images seem to work fine. In order to get the css to work I have to also import 'leaflet/dist/leaflet.css' but it feels to me like I shouldn't have to and that it should be included with the first import statement?
Yes, you have to have, see this link might be useful:
leaflet-css webpack require
I omitted its CSS in an ionic project but copied a few necessary lines to avoid a broken map UI.
I use chosen 1.2.0 from nuget. My chosen.css file contains class like .chosen-container, .chosen-container. When i call my dropdownlist class using .chosen() function. Resulted css class will be chzn-container, chzn-container-multi. It causes display ugly. but functionality work. I have no error in browser console.
When i check another sites, both generated markup and chosen.css contains chzn-container, chzn-container-multi classes only.
Nuget adds only css. It is not add chosen.jquery.js. I don't know why.
The Nuget package named simply "chosen" does not, as the OP says, contain the .js.
You need to search for Harvest.Chosen. Hopefully this will help someone in the future.