I'm currently working on an application using preact, tailwindcss and vite. Unfortunately, importing svgs seems to be a bit problematic.
There is a separate repository that only contains the svg resources.
My original plan was to just import them as components as I was used to do it in classic react with webpack applications using SVGR and the following syntax:
import { ReactComponent as Search } from 'assets/icons/search-lg.svg';
This won't work for (at least) two reasons. One being preact the other one being the lack of SVGR.
I then proceeded to give vite-plugin-svgr a try by importing it in my vite.config.js.
plugins: [svgr({ svgrOptions: { jsxRuntime: 'classic-preact' } }), preact(), tsconfigPaths()],
It kinda works using the following import syntax:
import Search from 'assets/icons/search-lg.svg?component';
Unfortunately this raises the following error which I couldn't manage to work around besides ignoring it which is not really an option:
TS2307: Cannot find module 'assets/icons/search-lg.svg?component' or its corresponding type declarations
The alternate plan would now be to create a wrapper component that just imports the svg from the given path and create a component from it myself. This would also simplify styling it with tailwind.
Unfortunately I fail to import the file in a way I can wrap it with <svg> tags. Using <img> is not really an option because I need to be able to manipulate the svg.
So, does anybody have an idea how to either
correctly use the component import in my setup
create a preact component that imports an svg from a file and still is customizable
Thanks in advance!
I finally got it to work by using vite-plugin-svgr. In the end adding /// <reference types="vite-plugin-svgr/client" /> to vite-env.d.ts made the compiler happy.
I can now use the good 'ol syntax:
import { ReactComponent as Search } from 'assets/icons/search-lg.svg';
Thanks to #user-28 for pointing me in the right direction!
Related
Maybe this question has already been asked, but I wasn't able to find anything regarding the matter.
I'm currently trying to build a simple website using firebase in combination with React. I'm using vscode as my IDE. While the process of building the site itself is going quite well, I'm still having some issues getting used to vscode's code suggestions.
'use strict';
import ReactDOM from 'react-dom';
let element = <h1>Hello world test</h1>;
ReactDOM.render(
element,
document.querySelector('#root')
);
In my file app.jsx I'm calling the method ReactDOM.render(...). Here is where my issue comes into play. When I specifically import the class ReactDOM (import ReactDOM from 'react-dom';), my code suggestions work as expected. All available methods with their arguments are suggested, etc. Unfortunatly though, my browser does not like those import statements and throws an error. I am aware that I can use tools like webpack or browserify to solve this issue, but since the ReactDOM-class is available without the import anyways, I don't really see the imminent need to use those tools.
I was just wondering whether I could configrue vscode to just suggest these classes and their methods without explicitly importing them. Thanks for the help!
(In case this was unclear, here's what I want to happen, but without importing ReactDOM:
need a Stepper component from somewhere and the only adequate one I found was the MUI one. But my app uses react-bootstrap and I don't have it. In this post (Is it possible to install a package that contains only one component of Material-UI? ) the guys have given a package where you can import only the component you need, but for some reason I am required to do npm config set '#bit:registry' https://node.bit.dev which I am not okay with since I want everyone to be able to just do an npm install without additional configuration. Is there a workaround around that and is it actually okay to install the whole MUI kit and import just the Stepper ?
If you're using ES6 modules and a bundler that supports tree-shaking (webpack >= 2.x, parcel with a flag) you can safely use named imports and still get an optimised bundle size automatically.
You can use path imports to avoid pulling in unused modules. For instance, use:
import Stepper from '#material-ui/core/Stepper';
instead of
import { Stepper } from '#material-ui/core';
Read more about minimizing bundle size here
Please, let me know if it works or not )
I'm building a react component library (using typescript and styled-components) and I want to reuse as much as possible code between the two targets (web and native).
I have a folder called styled, and inside that folder, I have two index files: index.ts and index.native.ts.
Inside the index.ts I have: export { default as styled } from 'styled-components'; while in the index.native.ts I have export { default as styled } from 'styled-components/native';
I know react-native uses index.native.ts instead index.ts during the build process when it is available but I really need to make the IDE (vscode) to understand that, I mean, when I'm building a Button.native.ts the statement: import { styled } from '../styled' should import from the .native barrel and the ctrl + click should let us to the .native file.
I don't know if there is a configuration to change the default import file used as a barrel, I already tried to search in the typescript documentation for some react-native preset but I didn't find anything.
It is not related to TypeScript, it is an open issue on VSCode GitHub page. Still doesn't have any solution.
Even I didn't find solution on react native vscode plugin.
By my understanding you are working on RNW, so it is not a correct expectation that VSCode understand by Ctrl+CLICK your meaning is Web or Native side.When it works in development and production so forget about opening right code by click.
I've installed Styled Components into my Create React App, and everything works fine, but by default, it looks as though the class name it appends to the element isn't based off of the styled component name (ie. MyButton should create an element with the class MyButton-134as23f).
In the Styled Components documentation, it says to install the babel-plugin-styled-components, and then configure the .babelrc file, however, from what I understand, we don't have access to that file until we eject from the app.
So how can I debug styled components while I am developing an app within Create React App?
I was able to find an answer to this:
Because Create React App is a zero-config application, the only way to add anything to the .babelrc file is to eject from React.
Obviously, I wanted to keep all of my tooling, and came across babel-plugin-macro. It's essentially a way for users to run libraries at compile time, without having to configure their Babel file beforehand.
So after installing it to my devDependencies, I then changed the import path to import styled from 'styled-components/macro, and all of the Babel plugin features that you would normally need to eject for came standard with Styled Components.
Let me know if you have any questions or trouble with my answer.
Hope this helps!
I've created a react application using create-react-app, and installed element-react as a dependency. I followed the instructions stated here to use internationalization -- specifically adding these lines of code to what I think is the entry file (App.js):
import { i18n } from 'element-react'
import locale from 'element-react/src/locale/lang/en'
i18n.use(locale);
Unfortunately, this doesn't work. The other approach stated is using webpack but I don't want to do that. How do I make internationalization work with element-react? What is the entry file in a react application?
Actually, it did work when I placed the il8n code in index.js. It just doesn't seem to work for tables when they don't have data. The workaround for that is to set the emptyText property of the Table component.