REACT ERROR WHILE IMPORTING THE REACT MODULES - reactjs

Attempted import error: 'AlertContainer' is not exported from 'react-alert'.
import AlertContainer from 'react-alert'
I am getting this import error by running the project

react-alert has only named imports:
import { transitions, positions, Provider as AlertProvider } from 'react-alert'

Related

The requested module 'react' is expected to be of type CommonJS

I'm having this kind of error when I added this to my Next.js app
import { Fragment } from 'react'
import { Popover, Transition } from '#headlessui/react'
import { MenuIcon, XIcon } from '#heroicons/react/outline'
Node version is 14.6.0
Next version is 12.1.0
Here's the full error message:
SyntaxError: The requested module 'react' is expected to be of type
CommonJS, which does not support named exports. CommonJS modules can
be imported by importing the default export.
I've tried to just use this instead but no luck:
import React from 'react'
import Headless from '#headlessui/react'
import HeadlessOutline from '#heroicons/react/outline'
And use it like React.Fragment or Headless.Transition

Attempted import error: 'useSwiper' is not exported from 'swiper/react/swiper-react'

I am using SwiperJS in Next.js and trying to set up custom navigation. I want to use the useSwiper hook as explained in the docs (https://swiperjs.com/react#use-swiper) but the import is not working.
When trying to import the hook;
import {Swiper, SwiperSlide, useSwiper} from 'swiper/react/swiper-react' i am running in to error Attempted import error: 'useSwiper' is not exported from 'swiper/react/swiper-react'.
I have checked the swiper-react.js file and as far as i can see it does export the useSwiper hook;
import { Swiper } from './swiper.js';
import { SwiperSlide } from './swiper-slide.js';
export { useSwiperSlide, useSwiper } from './context.js';
export { Swiper, SwiperSlide }
The Swiper and SwiperSlide imports are working fine.
Unsure as to why this is happening if anyone can please help?

How to Fix "export 'React' (imported as 'React') was not found in 'react'" Error in React js

When i run react app it shows me export 'React' (imported as 'React') was not found in 'react'. Error for all pages see image here.
Based on the errors in the image, you are probably doing this:
import { React } from 'react';
This is wrong, because React is not a named export, it's a default export, and you should import default exports like this:
import React from 'react';
You can read more about this here.

Why do I get "Attempted import error: 'EffectCards' is not exported from 'swiper'"?

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";

Module not found: Can't resolve './containers'

I am getting the error below
import { Home, Services, Contact} from "./containers";
every time I try to import like this
Module not found: Can't resolve './containers' in 'C:\Users\Admin\source\Project\src
however if I do the below it works without problem.
import Home from "./containers/Home/index.js";
import Servicesfrom "./containers/Servicesfrom/index.js";
import Contactfrom "./containers/Contact/index.js";
inside containers there is
Home/index.js, Servicesfrom/index.js and Contact/index.js
It would be better if there is a "index.js" file in your containers folder that exports the other components as so
index.js
import Home from "./containers/Home/index.js";
import Servicesfrom "./containers/Servicesfrom/index.js";
import Contactfrom "./containers/Contact/index.js";
export {
Home,Servicesfrom, Contactfrom
}

Resources