To my React project I added "Main.css" file and I imported it in Navigation.js component. Unfortunately, I get this error "Failed to compile. ./src/components/Navigation.js
Module not found: Can't resolve 'Main.css' in '/Users/monikastrzalka/Documents/INFORMATYKA/WEB DEVELOPMENT PROJECTS/PROJECT2/project2/src/components'". I have no idea why this is happening.That's the first time. Please help me. Below you will find necessary data.
enter image description here
I believe your issue lies in the import
import "./Main.css"
There's a few different ways import trys to find what you're indicating. Currently import is interpreting 'Main.css' as a full package - if there was a 'Main.css' library in your package.json and living in your node_modules folder import would be handling this correctly.
The other way to import is to identify a relative filepath. You can indicate the relative path the same way as your terminal.
If you try:
import "./Main.css"
import will know to look for a relative file pathway that exists inside your project.
Related
i love working with npm and my first package is working fine. In my IDE (Webstorm) when importing my package it highlights and says "Cannot resolve symbol" (well but it works).
But when using the suggested import on missing classes it imports it also wrong.
Within my project with working import:
import {APIRequest} from "nsfw-connector";
Not working:
import APIRequest from "nsfw-connector/src/APIRequest";
I believe my problem is in my npm package and how its exported.
index.js
module.exports = {
APIRequest: require('./APIRequest').default,
...
};
The corresponding class
export class APIRequest {
...
}
export default APIRequest;
Maybe the is a samaritan who knows what my stupid fault is.
IDE error highligt
The GitHub Project: https://github.com/NilsBaumgartner1994/NSFW-Connector
I experienced similar issue. We have a npm package and when importing it like:
import {SomeComponent} from "our-package". It works but I do not get intellisense. It is because the component is exported from within /src/index.js and thus, appending /src to the end of the package path erases the warnings.
I also tried to put "main": "src/index.js" into the package.json and import components like I used to originally but to no avail.
Another fix I tried and worked (sort of) was to place that /src/index.js into the root of the project that solved warnings and intellisense started to work as well (as it is the default value for aforementioned "main" field in package.json (interestingly enough) npmjs docs
I've wanted to add Expo in my React Native project to start it in a web browser. After doing that, I try to import file 'assets/styles/constants.ts'. This is my tsconfig.json:
tsconfig.json
This is constants.ts:
constants.ts
And here I try to import this file:
DropdownAlertCustom.tsx
After that, I get this error:
error message
What am I doing wrong? And how I can fix it?
UPD
Small fix of tsconfig.json:
small fix
Now I get the error 'Cannot find a module or it's corresponding type declarations:
Cannot find module
UPD 2
I understood that my IDE and VSCode see files and folders fine by these paths. When I hover on them, I can see their's content. I get the error Module not found. Can't resolve 'assets/styles/constants' when I type expo start --web. It starts in a browser and I get this error.
Maybe the problem is in Expo? I've added it in Create React Native app.
If anyone has any suggestions, please, help.
Replace assets/styles/constants with ../../../assets/styles/constants
Explanation
If you import like this assets/styles/constants, webpack that compiles your project into common js file that thinks that assets is the package name and that's why it will find in node_mouldes folder and it cant resolve the folder.
so if you want to import something from your local files you can give a relative path to that folder and import it successfully like I specified ../../../assets/styles/constants.
EDIT 1
It's the only way that create-react-app provides you to import any file but, there is another way you can build it manually called absolute path.
Like you can tell webpack that make src folder as the root of my project and if I specify # in URL than means its absolute path and root is src
after that you can call it as
#/assets
#/pages
#/store
#/anything/any
I'm new to react and I'm just trying to start a new website but not being successful at it. For some reason, I get this error Module not found: Can't resolve './pages' in '/Users/joanaleitaooliveira/repos/web-project/src'. Here you can see the App.js file and the about page file. All the other pages are the same.
I've also tried ./src/pages/About/index.jsx but got the same result. Can anyone tell me why is this happening?
[![enter image description here][1]][1]
The cause of the problem is due to the path mentioned in import statement not getting resolved.
Problem can be fixed by using the complete path to the component in the import statement.
Working example:
import Home from "./pages/Home"
import About from "./pages/About"
import Contact from "./pages/Contact"
You would need to create an index.js file in pages that exports all these components if you want to import through ./pages.
Trying to import my folders but they keep on saying that cannot find folder but the folder I'm import is the correct:
./src/LoginPage/Login.js
Module not found: Can't resolve '../_actions' in >'/Users/mirasmith/Desktop/KPV1-Project-master/src/LoginPage'
I don't know how to show the image so if someone can help fix it. Here the link to the folder hierarchy.
https://gyazo.com/410386debd550039400cf40e9e448196
Does _actions have a index.js? When require is given the path of a folder, it'll look for an index.js file in that folder. If there is one, it uses it. If not, it doesn't know what file you're trying to import.
If you don't have an index.js in there, you'll need something like:
"import actions from ../_actions/filename.js"
If you are trying to do an import of all the files from a folder, this answer talks about how to do that:
https://stackoverflow.com/a/5365577/5216218
import alert from "../_actions/alert.actions.js"
import user from "../_actions/user.actions.js"
I am trying to get ReactJs compatible with IE 10 and have added the following import statements before any other import.
import '#babel/polyfill';
import 'core-js/es6/map';
import 'core-js/es6/set';
The import is done in the index file of my app, App.tsx.
However I am still getting the following error and am unable to resolve it.
SCRIPT5009: 'Set' is undefined
How can I resolve this issue?
I also run in this same issue. To solve this, you need some additional node packages in order to perform polyfills.
Please, 1st install the npm package "core-js". After that, add
import 'core-js/es/set'
import 'core-js/es/map'
If still running into issues, install this other package react-app-polyfill and add the following additional import:
import 'react-app-polyfill/ie9'
These imports must be in the root index file of your project. Hope this helps.