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
}
Related
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?
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 am attempting to create a React-Leaflet map setup with create-react-app, but I am unable to import my Simple-Map component, which is exported using Named Exports. This is the first example on the React-Leaflet Examples page.
The error is:
./src/Simple.js
Module not found: Can't resolve './components' in '/ice_map/src'
The import statement from the example has been changed to import {Map, TileLayer, Marker, Popup } from './components' to reflect actual location of file.
The components directory contains 4 files: Map.js, TileLayer.js, Marker.js, Popup.js
The rest of the Simple.js file has been left as in the example. This file is imported into App.js via import SimpleExample from './Simple'
I understand this is a simple issue and an error that I am making, however I have not been able to resolve this error.
Any input is appreciated.
Thanks in advance.
In case this helps, here is my folder structure in VS code.
ok if you can try to add index.js file in the components folder
and inside it, you will add these
import Map from './Map';
import Marder from './Marder';
import Popup from './Popup';
import TileLayer from './TileLayer';
module.exports = {Map, Marder, Popup, TileLayer};
and you must ensure you are export these files Map, Marder, Popup, TileLayer
and that's because when you import from the folder you already import index file and there didn't find it
import <somting> from './components' === import <somting> from './components/index'
or you try use this
import Map from './components/Map';
import Marder from './components/Marder';
import Popup from './components/Popup';
import TileLayer from './components/TileLayer';
and delete this
import {Map, TileLayer, Marker, Popup } from './components'
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'
For some reason when I try to import one particular module, react refuses to look in the correct directory (./node_modules/). Instead it looks in the ./src/ directory and throws this error:
/src/App.js
Module not found: Can't resolve 'react-d3gantt' in '/Users/RAVEN/Desktop/frontend/materialui/material/src'
All of my other modules are imported correctly. What is it about this one in particular?
Here is my code:
import React, { Component } from 'react';
import { DefaultButton, CompoundButton } from 'office-ui-fabric-react/lib/Button';
import { Image } from 'office-ui-fabric-react/lib/Image';
import { Icon } from 'office-ui-fabric-react/lib/Icon';
import { GanttChart } from "react-d3gantt";
import OilSite from './components/oilsite';
import BigButton from './components/bigButton';
import LeftNav from './components/leftNav';
import './index.css';
Edit: I used Create-React-App, in case this is relevant to my set up.