Importing the "#mui/material" will stuck the VSCode - so TS warnings will come up after 10-15s instead of less than 10ms, for example:
import { Button } from '#mui/material'
// and make a use with this button.
Then:
new Date(). // will show the autocomplion very slow
If you remove the import of that button, or any module from this package, everything works great again.
To import components, use path imports instead of top-level imports:
// ❌ top-level imports
// import { Box, Typography } from '#mui/material'
// ✅ path imports
import Box from '#mui/material/Box'
import Typography from '#mui/material/Typography'
This will speed up Typescript autocompletion.
Related
I am using Create React App and have imported the way the documentation says to do, since Create React App doesn't support pure ESM packages yet.
import { EffectCards } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react/swiper-react.js";
But I get the error: Attempted import error: 'EffectCards' is not exported from 'swiper'.
EffectFade works fine, so why not EffectCards? Where else is it being exported from to be imported using Create React App?
The official documents stated that: "By default Swiper React uses core version of Swiper (without any additional components). If you want to use Navigation, Pagination and other components, you have to install them first."
To install them:
import SwiperCore, { EffectFade, EffectCards } from "swiper";
SwiperCore.use([EffectFade, EffectCards]);
In my case ("swiper": "^8.2.2") changing import statements helped
import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js';
import 'swiper/swiper.scss'; // core Swiper
import 'swiper/modules/effect-cards/effect-cards.scss';
import { EffectCards } from "swiper";
I'm currently converting one of my components to a .tsx file and I've run into some weird errors on the semantic ui components that I am currently using and I can't for the life of my figure out what is going on.
any advice is much appreciated
SemanticUI use named export and import so the import should be
import { Search, Icon } from "semantic-ui-react";
// or
import { Icon } from "semantic-ui-react";
import { Search } from "semantic-ui-react";
instead of
import Search from "semantic-ui-react";
import Icon from "semantic-ui-react";
I'm trying to use emotion in my create-react-app, but getting errors when using the macro method explained here.
I just tried copying over the import code in a component like this:
import React from "react";
import styled from "react-emotion/macro";
import { css, keyframes, injectGlobal, flush, hydrate } from "emotion/macro";
import css from "#emotion/css/macro";
import styled from "#emotion/styled/macro";
function Registration(props) {
return;
}
export default Registration;
The first error I get is Parsing error: Identifier 'css' has already been declared. So I commented out the import css and import styled lines to see if it would return anything else. This gave me the error Cannot find module 'react-emotion/macro' from ....
What step am I missing? Or is there another way that I should be including emotion in the app?
Answering my own question in case anyone has the same problem. With v10 of emotion and create-react-app (I believe greater than v2), react-emotion is not required. Also, I didn't need styled, so with the following it works:
import React from "react";
import css from "#emotion/css/macro";
function Registration(props) {
return
}
export default Registration;
I am running into this error where npm start just runs fine with the follwing import :
import Header from 'semantic-ui-react/dist/commonjs/elements/Header';
But when I do a npm test, It always shows me :
ReferenceError: Header is not defined
But When I change the import in the main file to the below line the npm test runs fine
import Header from '../node_modules/semantic-ui-react/dist/commonjs/elements/Header';
Is there any alternative for me to avoid referencing the import from node_modules folder?
semantic-ui-react exports all of its components as named modules, so that you don't have to dig all the way through the various paths to get to each component. Instead, you could do:
import { Button } from 'semantic-ui-react'
import { Header } from 'semantic-ui-react'
import { Container } from 'semantic-ui-react'
That's a lot simpler, yeah? 😊 And, in case semantic-ui-react changes their folder structure, you won't have to change your code.
Here is the semantic-ui-react documentation on how to import and use its components. Just click on the "Try it" icon for any of the examples.
I got this error when I wrote AppBar tag from material-ui into a code generated by gatsby new.
Warning: Unknown prop `onTouchTap` on <button> tag. Remove this prop from the element.
To avoid this, I wrote these code at the top of root template (_template.jsx) file.
import injectTapEventPlugin from 'react-tap-event-plugin';
try { // to prevent error because of loading twice
injectTapEventPlugin();
}
catch(e) {
console.warn( e );
}
This works perfectly with HMR, but it's ugly.
What is the correct way to resolve this problem?
UPDATE: To clarify - gatsby new clones gatsby-starter-default, and there are only React components.
Also, to import and write injectTapEventPlugin at the top of /html.js raises an error Warning: Unknown prop onTouchTap on <button> tag. It means injectTapEventPlugin() is not called properly.
You only need to import and add injectTapEventPlugin in your top level component from where you are rendering into your html element
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
You could put that code in html.js and it'll work everywhere
import React from 'react'
import PropTypes from 'prop-types'
import Helmet from 'react-helmet'
import { prefixLink } from 'gatsby-helpers'
import { TypographyStyle } from 'react-typography'
import typography from './utils/typography'
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
const BUILD_TIME = new Date().getTime()
export default class HTML extends React.Component {
...
You can take a look at this issue in gatsby repo on GitHub which also suggests that you put it in html.js