Module not found: Can't resolve - javascript

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

Autosorting imports in WebStorm with comments (ReactJS)

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

How to fix Attempted import error: 'react-router' does not contain a default export (imported as 'Redirect').?

./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

Kindly Assist. I am trying to display text and background color but only the background color displays

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')

Failed to compile: module not found

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

Error when importing local component file into my LoginForm component

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!

Categories