I'm using file loader and can load pngs just fine. I'm doing import myImage from "../../path/image.svg" and then <img src={myImage}/>. When I use the developer tools and click on the SVG I'm trying to include, I get a page with a message like:
"Error on line 1 at column 1: Document is empty
Below is a rendering of the page up to the first error."
Has anyone seen this error before and if so what can be done about it?
If you look at the file loader docs there is no mention of being able to load svg files.
You need to use a specialised loader. Here are webpack docs for one svg loader but there are plenty of others.
I found out about #svgr/webpack, with it you can import the SVGs like modules and then use them as components.
Related
I have started to configure lazy-loading for our application.
We have react 18 and webpack 5.
I started with the routes as that seems to be the place to start.
But after doing this I noticed that there are several bundles auto created.
For example we have a component library and several of them are auto created as a bundle when navigating to a route, it works but dont understand how this automagic works.
One thing is breaking the page though. We have a page where we show some charts.
When I navigate there I can see that this file is loaded:
vendors-node_modules_chart_js_dist_chart_mjs.bundle.js
But I have not specified anywhere to create this vendor bundle and this dont contain the correct code.
The import looks like this:
import { Chart, Tooltip, BarController, BarElement } from "chart.js";
To make the chart-page work I need to navigate to a completly other route that downloads a onther vendor-bundle containing the correct chart.js code. And heres the kicker.. that page dont use any charts at all...
This leads to my question, how and where to I configure this automatic bundle creation and why does this happen?
I’m having an issue with Snowpack and CSS modules. When I build the app it creates a .json file with the hashed and non-hashed class names but they are not loaded into index.js and all the classes show as undefined when inspecting the page. When I look at the source I can see an empty object that looks like it should have the JSON in and if I add it manually it works... is there something I need to configure to get this to work or should it just do it after importing the xxx.module.css file?
Additionally is there a way to bundle the css in with the JavaScript so it injects the styles at runtime rather than having a separate css file? Maybe using #snowpack/webpack to bundle them?
Update:
I just updated to the latest version of snowpack and it doesn’t even generate the .json file...
A quick note: Since I do not have enough reputations, I cannot create new relevant tags related to ORY Editor. I'm not sure whether this question will reach the right people.
While using react-page currently, we can get a HTML string output by using:
ReactDOMServer.renderToString(
<HTMLRenderer state={editorValue} plugins={plugins} />
)
However, this exports the HTML tags with pre-defined "class" names, which are then styled using the CSS files imported in the code.
I'm trying to implement something, where I use react-page/ORY on a web-page. Export the HTML, and render this is a mobile app, using react-native. CSS files cannot used in mobile app development.
Now there is no easy solution to when it comes to CSS files of react-page/ORY, because all the CSS files are distributed all along the node-modules in separate folders.
I even tried:
- putting a bunch of these CSS files in a single folder,
- creating a .html file, and importing these CSS files in that .html file,
- opening this .html file now on browser clearly shows CSS files weren't applied, maybe because of distributed nature of CSS files.
So, any ideas on getting inline-styled HTML as export from react-page/ORY?
I'm using react loadable to code split off components. I'm also using Extract CSS Chunks to split my stylesheets up. Everything works great during server side rendering and the initial client side render, but when I transition to a new page and a component is dynamically imported, the JS is being fetched, but the corresponding CSS for the component is not.
This wasn't an issue when all my CSS was in one file, but now that it's not, how am I to fetch the CSS along with the JS for dynamically imported components? Is that what Webpack Flush Chunks is supposed to help with?
Thanks in advance!
I solved this issue by upgrading to webpack 4 and using the mini-css-extract-plugin
I was wondering before starting to do it, if is posible to create a react proyect(i need to do a forum widget) code it on react and the compile it and put the .js output file in other proyect, not with react the other proyects uses php symphony and twig, would be as easy as importing the script and adding a ?
Yes it can be done. The bundle of a react app is a complete js with everything that you need to run it. At the end you only import one js file in your html. I recommend you use a bundler library like webpack or browserify to generate a minified bundle and apply other functionality before creating the final bundle.