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.
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
I am using Jest to test a React app. I keep repeating the same import statements for some common libraries/functionalities I need in every test. I was wondering if there was any way to tell Jest to import those libraries before every test.
I achieved it by importing the necessary libraries in setupTests.js, which, if existent, is called by default before every test file. In order to make the imported library available to the tests, I had to do the following:
Let's say I need mount from enzyme to be imported in every test.
// setupTests.js
import { mount } from 'enzyme';
global.mount = mount;
This way, I can directly use mount in any test file without needing to import it.
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 written a library published as an npm module
When a user installs the module, and then tries to use VSCode's IntelliSense to auto import functions from it, IntelliSense write the import line with a file path all the way to where the function is defined- deep inside the file-folder structure of my library
I would prefer that it import the function from where it is exported in the root file of the module, so that if multiple functions are imported from the library, all of the imports are expressed in a single line of the users code.
Thank you for reading, any advice on how to fix or where to start researching would be much appreciated. Have a blessed day!
I'm trying to get used to using npm packages brought in to Meteor 1.3 alongside regular Atmosphere packages. I have been able to use the slug package by using
meteor npm install slug
Then in one of my .js files I import slug with this command
import slug from 'slug';
And it seems to work. But it doesn't work when I try it from another .js file. Do I have to put the import command at the top of every file I want to use it in? Is this loading it multiple times in memory?
I'm also changing the default options using
slug.defaults.mode ='rfc3986';
And I'm wondering if I need to put that at the top of all my files as well. Atmosphere packages were a lot simpler. You simply added them and then you could use them throughout the whole project.
If you don't want to repeat the options, use this pattern:
Create a /lib/slug.js in your Meteor project with this content:
import slug from 'slug';
slug.defaults.mode = 'rfc3986';
export default slug;
Then throughout your project do not import slug from 'slug'; but rather import slug from '/lib/slug';.
Yes, you do have to import the module to another module to make it available there. Everything inside the module will not be available to other modules unless you import that module to each module. Please notice the keyword.
Yes you have to import here are some benefits of using imports:
You can control the load order of files by encoding dependencies
through imports.
You can create reusable “modules”.