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.
Related
Colleagues, I'm trying Parcel as an alternative to webpack project builder and I like it, but there are two BUTs that I still can't beat (here are links to starting builds - build on Parcel
and build on webpack):
1) In the assembly under the webpack, I used svg-sprite-loader to create svg sprites, which adds immediately after opening body svg with symbols like this:
there is no such plugin in the parcel assembly, I tried to install parcel-plugin-svg-sprite, but it does not compile a separate sprite (at least I did not find such a solution in the documentation).
As a result, for now, I am inserting svg in the way described in the parcel documentation (I use a pug in the project):
svg
use (href = "../../ icons / facebook.svg")
but in this case, I only get an empty space ((
2) When building a project, i get one folder with a lot of files, which is not very convenient, in the documentation I found that i can use the -d flag to set a name for the folder in which building the project, but did not find how to separate html/css/js/imgs by folders.
Thanks in advance for any help.
I don't think that there is yet a plugin for parcel2 that will allow you to easily create svg sprites. The parcel-plugin-svg-sprite package you mentioned is for parcel 1, so it is not expected to work. (In general, you can expect parcel 2 plugins to conform to this naming scheme - packages that start with parcel-plugin are probably for parcel 1).
As a workaround, the easiest way to use svgs in a pug template built with parcel would be to use an <img> or an <object> tag with a src property, e.g:
img(src="../../icons/facebook.svg")
or
object(data="../../icons/facebook.svg")
Doing it this way, where the svg file is "external" has a few limitations(discussed in the docs), notably there will be an extra round trip to download each svg (this would be good for caching, but bad if there were hundreds of svgs on your site). Also, you can't style the svg with css from the surrounding document.
You can avoid the first limitation (extra server round trip) by using css background-image/background property with a data URL (see docs)
.pug file
.icon-test
.(s)css file
.icon-test {
background-image: url('data-url:../../icons/facebook.svg');
}
(In react-based projects there is a way to avoid both these limitations and get parcel to inject the SVG as inline JSX through the #parcel/transformer-react-svg plugin (see docs), but I'm not aware of a similar plugin (yet) for pug templates.)
You can control the structure of the output files in parcel's dist folder by writing a custom namer plugin. I explained how to do this in this answer.
The plugin developer for the first parcel made the build for the parcel v2, and I say thank you! Here is the plugin, tested it with html and pug, everything works! https://github.com/Epimodev/parcel-plugin-svg-sprite
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
I am using material-ui in my react project. I found there are two different ways to use their icons.
One is from this web site: https://material.io/tools/icons/?icon=3d_rotation&style=baseline. You can download the icon on the left panel by click it. Or you can install material-design-icons on your project.
Another way is to import them like:
import SearchIcon from '#material-ui/icons/Search';
import ArrowDownwardIcon from '#material-ui/icons/ArrowDownward';
import Close from '#material-ui/icons/Close'
I wonder are they same? Or what is the different?
If you're using Material-UI, the way I (and they) suggest to use them is with SVGIcons, the #material-ui/icons package. What I typically do is look up icons on that website you posted and pull them in from #material-ui/icons.
For example, on that website you'll see one called alarm_on well you import it from that package like import YourIcon from '#material-ui/icons/AlarmOn'.
And the reason I like to do this and not use Icon Fonts is because when people with bad connections try to load your app, the icon might not even load and they'll see an ugly "alarm_on" in plain text where the icon would be.
Take a look at the usage section here.
I'm trying to use https://github.com/kisenka/svg-sprite-loader this package for using svg icons in my app.
Eventually it worked, but I have to import every icon:
import up from '#/assets/svg/up.svg'
How can I do it once, auto-importing all icons from my svg folder?
Prepare a module like sprites.js with the following (adjust your path to svgs):
require.context('path/to/your/svg/folder', true, /\.svg$/);
And include it in your entry point.
More information about require.context in the official Webpack docs
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.