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.
Related
Anyone knows how I can import each of below function in Vue and React without an error?
Right now I am getting an error if I am importing vueFetch and reactFetch.
So if am importing vueFetch into a Vue project, I am getting an error for React that React is not defined and the same applies if I import reactFetch (Vue ref not defined).
import { vueFetch } from './composables/vue/vue-fetch';
import { reactFetch } from './composables/react/react-fetch';
export { vueFetch, reactFetch };
I am trying to make a Vue and React NPM package, but I only have one index file, and I need to import both Hook into the single index file. So I do not need to create 2 packages.
here is the link to the package: https://www.npmjs.com/package/use-lightweight-fetch
I am using that latest swiper version: swiper 8.2.4 with create-react-app.
These suggested import statements work:
import { Navigation, Pagination } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react/swiper-react.js";
However I cannot get the css imports to work with any of the suggestions of import statements online.
Currently I have tried to use these three import statement but they all give me an error.
import "swiper/swiper.scss";
import 'swiper/swiper.min.css'
import 'swiper/css';
I get this error Module not found: Error: Package path ./swiper.scss is not exported from package /app/node_modules/swiper (see exports field in /app/node_modules/swiper/package.json) even though I can see that file exists and is being exported in the package.json. Any ideas on this?
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.
I keep getting this error in React JS. I've never gotten this error ever and I literally cannot find anything on the internet. I installed react-spring. I imported it into App.js.
Attempted import error: 'animated' is not exported from 'react-spring'.
import { useSpring, animated } from "react-spring";
I already installed react-spring using: npm install react-spring
Please import 'animated' like so:
import {animated} from 'react-spring'
Since it's named export and not a default export. See the import statement example as guided here:
https://blog.logrocket.com/animations-with-react-spring/
I get this error when importing semantic > Can't resolve 'semantic-ui-react' <
(i've installed semantic and did gulp build and all that)
I tried this
import React from 'react'
import { Button } from 'semantic-ui-react'
const ButtonExampleButton = () => (
<Button>Click Here</Button>
)
export default ButtonExampleButton
In order to use the react components of semantic ui, you will need to install the semantic-ui-react library.
Note that this library doesn't include the CSS files of semantic-ui and you will need to include it yourself.
Either via a CDN or a npm package. See the docs for examples.