I want to import img when using typescript in my react project
import * as img from "./assets/webpack.png";
But I got the error TS2307: Cannot find module './assets/webpack.png'.
I search arround and find the solution saying that I have to add
declare module "*.png" {
const value: any;
export default value;
}
But I don't know where to add it.
I created a declarations.d.ts file at my root project and add it to the file but nothing happens. I still got the error
Could you show me how to add it. Thank you in advanced
The solution is that you have to put declarations.d.ts in the asserts folder, not the root folder. I have to be in the same folder with your image files
Related
I'm working on my website with react, but the files were getting a messy so I wanted to organize them into further sub-folders. I've always imported components from the component folders using "../" but now that my components folder is further than the reach of ../ I assumed that all you had to do was refer to it again, like ../../ but it does not seem to be working.
Files
src > Components > Component1 (file)
src > Pages > ICS4U0 > ICS4U0_DS (file)
The goal was to import Component1 into the ICS4U0_DS file
I referred to import as: import Component1 from '../../components/Component1';
But I got the error message is
Module not found: Error: Can't resolve '../../components/Component1' in '/Users/stephenni/portfolio/src/pages/ICS4U0/ICS4U0_DS'
When I refer to the import as: import Component1 from '../../../components/Component1';
I get the error message
Module not found: Error: You attempted to import ../../../components/Component1 which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.
Help pls :D
i think the problem might be coming from your exports in Component1 file, try Checking if Component1 has got a default export.
export default Component1
I hope this helps
Hi i am trying to make use of micro front end in nextjs , So as mentioned in this npm pkg link ,
lib folder is not present inside the #module-federation package
tried below way to import the include-defaults
import '#module-federation/nextjs-mf/lib/include-defaults'
but it throws the below error
Module not found: Can't resolve '#module-federation/nextjs-mf/lib/include-defaults'
import App, { AppContext as NextAppContext } from 'next/app'
import '#module-federation/nextjs-mf/lib/include-defaults'
We can find files inside the src folder, So we can point src like below
import '#module-federation/nextjs-mf/src/include-defaults'
This will importing lib as expected ,
** Note but i am not sure , why the lib folder and its files are not there in the package
I have done everything right when setting up my react app and for some reason I'm getting this error.
All my code is in a .js file called App.API.js which is located in the src folder.
The error is coming from the index.js which has the code: import App from './AppAPI';
I've gone through several guides and other posts with similar questions but no solution is working. I have created a whole new react app and tried again but have had no luck.
change :
import App from './AppAPI'
to :
import App from "./App.API";
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
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"