Import a function in a React project - javascript

Having the following import done into a test file:
This works fine, but the problem appears when I want to import it into another file, here it is:
What is wrong with this import?

If you're in the components directory already, going up 3 levels takes you to /libs so you don't need the /libs in your path just
../../../shared
By the way - screenshots not so good text better.

Related

Importing js modules by directory name

I'm upgrading a React application and have found that I need to modify the import statements to get them to work.
For example, in the old version, the following import works without errors:
import { User } from '../System'
Note that System is a directory on my file system that contains User, a js file that ends with export default User.
In my upgraded version of the app, the System directory still exists, but the above import gives me Can't resolve '../System' in 'C:\my app\.
It turns out that to get the import working properly now, I need to change it to the following:
import User from '../System/User';
If I understand correctly, this relates to js module system changes made with ES6.
My question, though, is regarding the specification of a directory in the import statement (System above). Why would it be that I was previously able to name a file directory in the import statement instead of the actual js script/module itself? Is that approach of using a directory in the import statement still possible? And if so, is it ever advisable?
Update: based on AKX's comment, I noticed the System directory does indeed contain an index.js, which apparently is what makes the import from the directory itself possible.
When an import points to a directory, and only a file, Webpack (which most React setups use) follows Node's's conventions and will attempt to import index.js from that directory if it exists. That's the only condition under which importing from a path that points to a directory works - your previous build probably had /System/index.js (which would allow importing with from '../System'). If you rename the file you're importing to anything else - such as to User.js - importing using only the directory path will fail.
And if so, is it ever advisable?
Sure, if you want. It's a style choice but is commonly done.

warning only in design view on import statement to use qml component from file

I have a .qml file with a component 2 steps above in my project path because I want to have a component folder above many projects to be shared by some of these. So in my main.qml I do:
import 'qrc:/../../components'
That works and I can use my qml component from file.
However in the design view, I get the warning:
found not working imports: ...<file and import line number where the import is> "qrc:/../../components": no such directory
Many other things I tried make the project not compile or throwns error at runtime.
Trial1: import "qrc:/": compile time error: Unknown component. (M300). Makes sense as the component is in a path above.
Trial2: import './../../components': runtime error: import "./../../components" has no qmldir and no namespace.
Tried also to put a qmldir file in my components folder where my component is with the text "MyComponent MyComponent.qml" as explained in Importing QML Document Directories
Apart from the warning everything works fine. Project compiles, runs and the changes in the component are shown when I work in the design view.
info:
-> component resource is added to the .qrc resource file, and the file exists (project works)
-> QtQuick version QtQuick 2.9
-> Qt Creator 4.15.2 Based on Qt 5.15.2
How do I get rid of the warning?
Edit: I also tried following the steps of this answer with no success.
Adding the content of my .qrc file:
<RCC>
<qresource prefix="/">
...<other not relevant resources>
<file>../../components/MyComponent.qml</file>
</qresource>
</RCC>
Screenshot of the warning:
Adding an alias for the file in your .qrc should resolve the issue, like so:
<file alias="MyComponent.qml">../../components/MyComponent.qml</file>
and then for your import statement simply:
import "qrc:/"
The alias should resolve whatever relative path issue is causing the warning to be thrown by the designer.

carbon-addons-iot-react bundle size too big

I have an CRA typescript installiation and I'm using carbon-addons-iot-react design library.
https://github.com/carbon-design-system/carbon-addons-iot-react
When i check with source-map-explorer i saw my bundle size extremely big because of the carbon-addons-iot-react imports watson icon in a odd way.
You can see it in picture;
source-map
I tried to tree-shaking way to import icons inside my components
import { Add16 } from "#carbon/icons-react"; //this to
import Add from "#carbon/icons-react/es/add/16"; //this
but i think the reason is the way carbon-addons-iot-react imports icons.
I also tried route based code splitting but it's not reducing bucket sizes.
sizes-after-build
I research a little bit for _generated folder and why it's too big. But i can't find anything on the web or issues on their repository. They use PURE React.CreateElement inside buckets, but for some reason my webpack cant threeshake on them if it's the problem.
Anybody have some ideas?
Thank you very much.
We had a similar issue to this and tracked it down to an import of components from UIShell, which was causing the whole icons library to be included in the bundle.
Switch any full path imports from UIShell to import from the top level instead.
Before:
import { HeaderNavigation } from "carbon-components-react/lib/components/UIShell";
After:
import { HeaderNavigation } from "carbon-components-react";

How can i import a lib in global so i can access it in an imported js file?

Why i think that put my lib in global and access it in different files is a valid choice :
First i have one js file, but my file was getting bigger so i just separate it in two, and now i access to my second file functions with an export of functions.
So why do i have to import one time the lib when im on a single file, but multiple times when i use multiple files
What i want to do
I have an error when i try to use a lib in JavaScript.
For the example i will use 'lib' instead of a real library from js
This is my files
app.js
import lib from 'lib'
console.log(lib)
This is working, but when i add
app.js
import lib from 'lib'
import my_file from './file_path.js'
file_path.js
console.log(lib)
This is not working and i have to import my lib in the new file like
file_path.js
import lib from 'lib'
console.log(lib)
I GET THIS ERROR
Uncaught ReferenceError: lib is not defined
But i don't want to duplicate my import, How can i do it ? thanks
I found a solution who work with window
you just have to add your lib in a window variable like that:
app.js
import lib from 'lib';
window.lib = lib;
import my_file from './file_path.js'
And now you can use your lib in "my_file" without importing it again
PS: thanks to people who help me resolving my issue :)
/!\ You have to be in a node application to use this method /!\
I also find an alternative of the window and import
We can use require like that:
window.lib = require('lib');
Now we just have one line instead of 2
This is the best solution i found so far, don't know if we can do better, let me know

Bundling import es6 modules expressions across all javascript files

Let's say I have multiple javascript files, along with several node modules, and in each file I do something like this:
import 'node_module_a'
import 'node_module_b'
import 'node_module_c'
I find myself repeating this same code across all my javascript files, so I'm wondering is there a compact way (like bundling) to add all this to a single file, and just import from that?
Like:
in all_the_things.js:
import 'node_module_a'
import 'node_module_b'
import 'node_module_c'
Then add only this line in all javascript files:
import * from 'all_the_things.js'
I tried reading some documentation to give me ideas, but I'm at a loss here.
I had no idea I literally wrote the answer in the question. I tried all kinds of stuff, except what I posted. When I tried it, it worked.
If you put
in all_the_things.js:
import 'node_module_a'
import 'node_module_b'
import 'node_module_c'
then you do this in the caller js file:
import 'all_the_things'
it will import all the nodes. Also, I found out if you put those imports in a parent file, loading only once, it will be viewed by other child components.

Categories