I tried installing extra TypeScript libraries as suggested by others. My project JavaScript Language is set to ReactJSX. However when using the auto import, it only imports modules as if default imports. It recognizes the correct package, just doesn't do a named import.
The second image will fail as it should be a named import.
Looks similar to https://youtrack.jetbrains.com/issue/WEB-47925 that is planned to be fixed in 2020.3.
BTW, according to the documentation, the preferred way to import react-bootstrap components is using the default imports like import Button from 'react-bootstrap/Button';
Related
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!
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 have a project in React, using Material UI, and I am applying one of their suggested methods to reduce my bundle size.
Basically, I need to install the babel-plugin-transform-imports package and update the way we import components:
// Replace this (Option 1):
import Button from "#material-ui/core/Button";
// Whith this (Option 2):
import { Button } from "#material-ui/core";
Everything is working fine, however, I would like to prevent the "wrong" imports (Option 1) in the future.
Is there a way to customize a ESLint rule that will force the Option 2 import ONLY when importing from the Material UI package?
I was reading about creating a custom ESLint rule, but would prefer to avoid that route.
To my knowledge, custom is your only way to go. The only difference between these syntax is importing the default export or a named export. So if you want to prevent default imports specifically for the material-ui packages, you would need to create a custom eslint rule that looked at import statements AND match against material-ui as you don't want to error on all default imports.
After some research, I found that Material UI created a package with their own custom ESLint rules:
NPM Package:
https://www.npmjs.com/package/eslint-plugin-material-ui
GitHub page:
https://github.com/mui-org/material-ui/tree/master/packages/eslint-plugin-material-ui
They have a rule to solve my issue (restricted-path-imports), but that is not published yet. When they publish it, that may be the best way to go for me.
Discussion about publishing the rule:
https://github.com/mui-org/material-ui/issues/15610#issuecomment-512804075
UPDATE 2022
#kajirikajiri actually made eslint plugin exactly for this!
https://github.com/kajirikajiri/eslint-plugin-mui-path-imports
I'm writing a small React app with Create-React-App. For simple styling tweaks I use tachyons-css. Due to frequent reappearing CSS styling issues I recently switched from classic CSS styling to CSS modules (also valid question for SCSS). Now I wonder if there is a way to still use both - CSS modules and tachyons styling - even though it is not possible anymore to just add an additional "classic" className to the CSS module styles object.
Before using CSS modules I used to define a class and tachyons styling (padding5 in this example) by having multiple classNames.
For example:
<ExampleComponent className="examplecomponentstyle pa5"/>
When using CSS modules the CSS class definition will now look like this:
<ExampleComponent className={styles.examplecomponentstyle}/>
How can this syntax now be combined with the previous usage of the tachyons styling? Is there something like this that could work?:
<ExampleComponent className={styles.examplecomponentstyle & "pa5"}/>
Thanks a lot!
UPDATE from 05-Sep-19:
The clsx package is exactly doing what I was trying to achieve. After installing clsx
npm install --save clsx
the ExampleComponent can then e.g. be styled using clsx like this:
<ExampleComponent className={clsx(styles.examplecomponentstyle, "pa5 bg-yellow")}/>
UPDATE from 17-May-20:
As Sandip pointed out the ClassNames package can as well as the clsx package be used to achieve the same behaviour. The number of weekly downloads of both packages even indicates that ClassNames is much more frequently used than CLSX (~5.2 mio vs ~1.6 mio weekly downloads as of May 17 2020). This link on github discusses the performance differences between the two packages.
Without any package:
className={[styles.examplecomponentstyle, "pa5"].join(" ")};
Like you already mentioned, the package clsx is pretty good:
className={clsx(styles.examplecomponentstyle, "pa5 bg-yellow")}
When using CSS modules, you can combine classes like this
import styles from "./styles.module.css";
import "./index.css";
...
<div className={`${style.header} ${style.headerLight} container`}>
...
What is correct way to include BlueprintJS Css files to React-starter-kit?
I was able to do that in /src/components/Layout/Layout.js importing css file
import blueprintCss from '#blueprintjs/core/dist/blueprint.css';
and on export
export default withStyles(normalizeCss, blueprintCss, s)(Layout);
Is this correct way or is there another one like with webpack?
Thanks!
Simply import '#blueprintjs/core/dist/blueprint.css'; should include the CSS file in your webpack build.
I don't know enough specifics about react-starter-kit to tell you more, but the simple import statement above is the traditional approach.