I am creating a REACT NODEJS Application using Create-React-App
I'm copying from a premade REACT site which imports images like this:
import Logo from '../../img/logo.png'
but when I do the same in my application, I get the error
Can not find module
My Folder stucture is:
\src\views\home\layout\layout.tsx \\this is the problem file
\src\views\img\logo.png \\this definitely exists
When I use require directly in my JSX it works fine, however I don't want to start off on the wrong foot doing things differently
<img src={require("../../img/logo.png")} alt="" /></a> //Works
From your folder structure your import statement should look like
import Logo from '../../../imgs/logo.png'
Edited and corrected after #zerkms pointed out my folly of counting one extra folder in the path.
Related
folder structure
As it shows in the picture, I have two projects that share some vue components.
I import ImageBlock.vue in my Card.vue component, it works fine. But when I write test cases for Card component, I got the error
> Cannot find module 'vue' from '../sharedComponents/ImageBlock.vue'
I searched, couldn't find any answers. How can I solve this?
I think the path from your test directory is wrong.
If your test is in project2/test,
you should try importing from ../../sharedComponents/ImageBlock.vue
I am using Netlify CMS. I want to import all the slides for a carousel into my component. I made a collection called slider and added a few slides. That created two markdown files (one for each slide) in public/content/slider/. I would like to import them all into an iteratable object so I can build the carousel.
Because I have a webpack loader set up for markdown files, I can import a single markdown file no problem, like this:
import post from '../public/content/posts/[post name].md
But when I try to use require.context, require-context, or import fs, it's no good. So I decide to try requiring those libs from within getStaticProps. But __dirname in getStaticProps is /, the root of my computer's filesystem.
All the getStaticProps examples use data fetching. I'm missing some info. How can I import all the markdown files in the /slides/ folder?
This is a known issue in Next.js (see related discussion #32236), __dirname incorrectly resolves to / - you should use process.cwd() instead.
From the Next.js Reading files documentation:
Files can be read directly from the filesystem in getStaticProps.
In order to do so you have to get the full path to a file.
Since Next.js compiles your code into a separate directory you can't
use __dirname as the path it will return will be different from the
pages directory.
Instead you can use process.cwd() which gives you the directory where
Next.js is being executed.
I am using Netlify CMS. I want to import all the slides for a carousel into my component. I made a collection called slider and added a few slides. That created two markdown files (one for each slide) in public/content/slider/. I would like to import them all into an iteratable object so I can build the carousel.
Because I have a webpack loader set up for markdown files, I can import a single markdown file no problem, like this:
import post from '../public/content/posts/[post name].md
But when I try to use require.context, require-context, or import fs, it's no good. So I decide to try requiring those libs from within getStaticProps. But __dirname in getStaticProps is /, the root of my computer's filesystem.
All the getStaticProps examples use data fetching. I'm missing some info. How can I import all the markdown files in the /slides/ folder?
This is a known issue in Next.js (see related discussion #32236), __dirname incorrectly resolves to / - you should use process.cwd() instead.
From the Next.js Reading files documentation:
Files can be read directly from the filesystem in getStaticProps.
In order to do so you have to get the full path to a file.
Since Next.js compiles your code into a separate directory you can't
use __dirname as the path it will return will be different from the
pages directory.
Instead you can use process.cwd() which gives you the directory where
Next.js is being executed.
I am running a Flask application at PythonAnywhere. I'm using Python 3.8. The folder structure looks like this:
project/
app.py
alpha/
beta/
gamma/
other.py
All of the folders have a blank __init__.py. From inside other.py, I want to do an import like:
from project.app import function
What is the cleanest way to make this happen?
I've seen suggestions to use import importlib.util in other answers. Will that work in PythonAnywhere? Instead of doing that in other.py is there a way to do this once and it work for the whole project? (so that things like from project.alpha.beta import function would work as well)
I have a partial answer. Partial because I'm not sure it is the best answer. In the PythonAnywhere web configuration the working directory is listed as /home/username/mysite/project. As per the example above, project had a module I was trying to reference. So at the top of app.py (in the project folder), I added this:
import sys
sys.path.append("/home/username/mysite")
Basically I added the directory above the module directory to the import path. That got me through the error, but it doesn't seem like the best solution.
I do want to give a shoutout to this PythonAnywhere help page because it has some good module debugging tips.
I have these import:
import {Input, InputTxtCenter} from '../../../components/forms/input/input.js';
import {ButtonRed} from '../../../components/buttons/';
import {TxtCenter} from '../../../components/misc/texts/texts.js';
and I want to transform these routes into something similar to this
import {ButtonRed, ButtonWarning} from 'buttons';
import {TxtCenter} from 'misc/text';
import {TxtCenter} from 'forms/input';
that is, that the system knows that importing will always be from the "components" folder
Is it possible to do this?
Without having to create the component in node_modules?
I think this less of a React question, and more of a module resolution/aliasing one.
I assume that you are using some tool like babel, in which you can try babel-plugin-module-resolver.
The main idea is to define aliases in your .babelrc file so that you can avoid keeping track of relative directory structure when importing.
You can create .env file containing NODE_PATH=src if you're using create-react-app.
I recommend you to start any project using CRA with possible eject option if you really require customization.