I'm developing a component with React.js and the console is throwing the following error:
Failed to compile:
./src/components/file_tree.js
Module not found: Can't resolve '.src/components/directory.js' in
'D:\Treebeard\src'
Here you can see the code inside file_tree.js:
import React from 'react';
import ReactDOM from 'react';
import { Directory } from './components/directory.js';
The code inside directory.js:
import React from 'react';
import { TriangleDown } from './components/file_tree.js';
import { FolderIcon } from './components/file_tree.js';
import { formatName } from './components/file_tree.js';
import { renderTree } from './components/file_tree.js';
And here, the App.js code, just in case:
import React from 'react';
import ReactDOM from 'react-dom';
import { SearchEngine } from './components/search_engine.js';
import { FileTree } from './components/file_tree.js';
import { Directory } from './components/directory.js';
I checked the file paths from both files and everything seems okay, but this error is thrown. Am I missing something about the file paths? Both directory.js and file_tree.js are inside './src/components' folder.
App.js is inside './src' folder.
Since you are accessing file path from same directory. It should be:
file_tree.js:
import React from 'react';
import ReactDOM from 'react';
import { Directory } from './directory.js';
directory.js:
import React from 'react';
import { TriangleDown } from './file_tree.js';
import { FolderIcon } from './file_tree.js';
import { formatName } from './file_tree.js';
import { renderTree } from './file_tree.js';
App.js: It's okay. Since you're accessing components file path from the current directory.
import React from 'react';
import ReactDOM from 'react-dom';
import { SearchEngine } from './components/search_engine.js';
import { FileTree } from './components/file_tree.js';
import { Directory } from './components/directory.js';
For further help, see this post which will help you in relevant case.
Related
Maybe somebody have solution for automation of bringing imports in a beautiful form?
Maybe you know some extention or pachake for this? Something where you can set the structure, connect directories and comments for them...
For example, I create a page and in the end I have something like this:
import React, { useEffect } from 'react';
import Container from 'containers/Container';
import { FEMALE_IMAGES, MALE_IMAGES } from './config';
import { IGender } from 'types/commonInterfaces';
import { useDispatch } from 'react-redux';
import { setGender } from 'redux/actions';
import { compose } from 'redux';
And I have to turn it to the:
import React, { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { compose } from 'redux';
// actions
import { setGender } from 'redux/actions';
// configs
import { FEMALE_IMAGES, MALE_IMAGES } from './config';
// container
import Container from 'containers/Container';
// types
import { IGender } from 'types/commonInterfaces';
./src/components/Login.jsx
Attempted import error: 'react-router' does not contain a default export (imported as 'Redirect').
here is the error
import React from "react";
import { connect } from "react-redux";
import Redirect from "react-router";
import styled from "styled-components";
import { signInAPI } from "../action";
const Container = styled.div``;
some const and stuff then end
export default connect(mapStateToProps, mapDispatchToProps)(Login);
here is the code for login.js
I tried yarn and adding the latest version of react-router
Also When importing reactDom from "react-dom", it gives me an error
e.g import { ReactDOM } from "react-dom"
Gives the error:
ReactDOM' is not exported from 'react-dom' (imported as 'ReactDOM').
index.js
import React from "react"
import { ReactDOM } from "react-dom"
import App from "./App"
import "./index.css"
ReactDOM.render(
<App/>,document.querySelector("#root"))
App.jsx
import React from 'react'
const App = () => {
return (
<div>Hello maaaannnnnnnnnn!!!!</div>
)
}
export default App
index.css
body{
background: black;
color: white;
}
Error in Debug Console: Cannot read properties of undefined (reading 'render')
I'm not sure what i'm doing wrong but i keep getting this message:
Module not found: Can't resolve 'components/List' in 'C:\Users\kobby\Documents\Lambda-School\buildwene\src\coek\hn-clone\src\components\App'
This is what the import looks like in App/index.js:
import React, { Component } from 'react';
import { ThemeProvider } from 'styled-components';
import List from 'components/List';
import { colorsDark } from 'styles/palette';
My folder dir is like so:
C:\Users\kobby\Documents\Lambda-School\buildweek\hn-clone\src\components\App\index.js
This is the path for List:
C:\Users\kobby\Documents\Lambda-School\buildweek\hn-clone\src\components\List
Path should be like this: import List from '../List/index';
I am new to react-native but I have successfully imported local files into another before and I am getting this error message:
Unable to resolve "./common" from "src/components/LoginForm.js"
I am using expo XDE for the first time as well if that provides any insight. This seems so simple but I can't seem to find if I have a typo.
Here is a screenshot of my project file structure:
These are my imports in LoginForm.js
import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { FormLabel, FormInput, FormValidationMessage } from 'react-native-elements';
import { Form, FormSection } from './common'; // what am i doing wrong with this????
These are my imports in App.js
import React from 'react';
import LoginForm from './src/components/LoginForm';
you have to create an index.js in your /common, Then export all of you components:
export * from "./Button";
export * from "./Card";
export * from "./CardSection";
export * from "./Header";
export * from "./Input";
export * from "./Spinner";
also be sure to export { YourComponentName }; in each file as well!