I'm working on a POC on stackblitz environment, while trying to import the app.tsx file, Import error, can't find file: getting this error in browser.
Below is my project link
https://stackblitz.com/edit/react-ts-kvyax9
Please help.
You have lots of typos/spelling mistakes in your imports.
In index.tsx, you have this import:
import App from './App';
whereas your app file exists as app.tsx not as App.tsx. You need to mention the filename correctly as
import App from './app';
Similarly, in app.tsx, all your imports are referencing incorrect filenames. Change them to this:
import A from './a';
import B from './b';
import C from './c';
import D from './d';
import './style';
Related
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.
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'
I have an action folder inside the src folder as you can see in above pic. I have component file in which I have import statements as below.
import React from "react";
import { connect } from "react-redux";
import "./Login.css";
import * as LoginAction from "../../actions/loginAction";
import rp from "request-promise";
import "bootstrap/dist/css/bootstrap.min.css";
But I am getting error as
/src/Components/LoginComponent.js
Module not found: You attempted to import ../../actions/loginAction which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
Can you please help to find what is wrong here. Thanks in advance.
When you use ../.. you're trying to access to the parent of parent folder. That's why now you're out of the src folder. And this import is not currently supported.
In your code, try to modify:
import * as LoginAction from "../../actions/loginAction";
to something like one of the followings:
import * as LoginAction from "../actions/loginAction";
import * as LoginAction from "./action/loginAction";
import * as LoginAction from "../redux/actions/loginAction";
I have created component folder in src folder and tried to write simple greeting program for that I have created 3 files:
GreetUser.jsx
index.jsx
index.html
while compiling it is showing that could not find required index.js file.
I have written 3 files in Component folder and have imported GreetingUser module in the index.jsx file and while compiling it is showing that could not find required index.js file.
1.GreetingUser.jsx
import React , {component} from 'react';
class GreetUser extends component
{
render()
{
return <h1>Greetings from suraj!!!!</h1>;
}
}
export default GreetUser;
2.index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import * as serviceWorker from './serviceWorker';
import GreetUser from './Component/GreetUser.jsx';
ReactDOM.render(<GreetUser/>,document.getElementById('aaa'));
serviceWorker.unregister();
Could not find a required file.
Name: index.js
Fundamentally, JSX just provides syntactic sugar for the React.createElement(component, props, ...children) function.
index file must with .js extension and not jsx is not react component.
index.js file in a folder lets you perform an import from the folder implicitly without specifying the index.js in the import statement – just like how web servers will serve up the index.html in a folder without you needing to explicitly put the index.html in the URL.
You can modify webpack configuration if you need it.
You can look at additional answers: Renaming index.js to index.jsx in react app and Why does create-react-app creates both App.js and index.js?
I've to use bootstrap-select, bootstrap, jquery, popper, isotope, wow and a script file that uses all these libs with Gatsby. I did like this in layout.js:
import React from "react"
import { StaticQuery, graphql } from 'gatsby'
import "bootstrap/dist/css/bootstrap.min.css"
import "./vendors/themify-icon/themify-icons.css"
import "font-awesome/css/font-awesome.min.css"
import "./vendors/flaticon/flaticon.css"
import "animate.css/animate.min.css"
import "./vendors/magnify-pop/magnific-popup.css"
import "./layout.css"
import "./responsive.css"
import "jquery/dist/jquery.min.js"
import "popper.js/dist/popper"
import "bootstrap/dist/js/bootstrap.min.js"
import "bootstrap-select/dist/js/bootstrap-select.min.js"
import "wowjs/dist/wow.min.js"
import "jquery.scroll-parallax/dist/js/jquery.scrollParallax.js"
import "./vendors/isotope/isotope-min.js"
import "./vendors/magnify-pop/jquery.magnific-popup.min.js"
import Loader from "./loader"
import Header from "./header"
import Breadcrumb from "./breadcrumb"
Is this a correct way to import all these dependencies ?
During gatsby develop I am not sure it works or not but I am not getting any errors. During gatsby build it failed. So, I copied all these files to static and build passed.
Then I checked for all these files in common.js but not a single file code is there. How do I use all these dependencies with Gatsby ?