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
Related
I wrote myself a small package which I use to share different React components between my projects.
The "exports" field in my package.json looks like this:
Since this is a TypeScript project, the transpiled .js in the output directory are specified below.
"exports": {
".": "./lib/index.js"
}
My index.ts file looks like this:
export * from "./Grids";
Then inside my Grids folder i have another index.ts file with the following content:
export * from "./UniversalGrid";
And finally inside the UniversalGrid folder, there is another index.ts file, in which the actual components is getting exported:
export * from "./UniversalGrid";
Now when I want to use the component in my app, I am shown two import suggestions, namely:
import {UniversalGrid} from "#privateComponents/react-components"
and
import {UniversalGrid} from "#privateComponents/react-components/lib/Grids/UniversalGrid"
The first approach (import from /react-components), works without problems.
However, with the second possible import statement (import from /react-components/lib/Grids/UniversalGrid) the following occurs:
Module not found: Error: Package path ./lib/Grids/UniversalGrid is not exported from package C:\Users\<user>\WebstormProjects\PKD\node_modules\#privateComponents\react-components
However, this way the component can be imported without any problems, and also when I select "Jump to definition" I am led to the correct file.
Now I have two questions, first, why is this happening?
And second, how can I import/export my components separately.
Say: Grid1 should be imported from /Grids/Grid1.
Grid 2 should be imported from /Grids/Grid2.
But none of the modules should be imported directly from the /Grids folder.
Thank you very much in advance!
Just dont export Grid in Grids/index.ts, change your transpiled to this
"exports": {
".": "./lib/index.js",
"./Grids/Grid1": "./lib/Grids/Grid1/index.js",
"./Grids/Grid2": "./lib/Grids/Grid2/index.js"
...
},
Now you can import Grid1 from /Grids/Grid1 not from /Grids
Having a project here not using TypeScript and trying to implement a Dropdown.
But I fail importing the Dropdown Option. Like documented in https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown
import { Dropdown, DropdownMenuItemType, IDropdownStyles, IDropdownOption } from '#fluentui/react/lib/Dropdown';
It cannot find the IDropdownOption export. It does not exist in the JS file, but in the TypeScript file.
Does that mean TypeScript is mandatory?
Thanks for any hints
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.
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.