We Keep Coding

Import a single export seems to import the whole js file. How can I import just the exported object?

Exporting from one file index.js like this: export const categoriesObj = new Object(); and trying to import from another index.js file like this: import { categoriesObj } from "../app/index.js";, but I get an Uncaught ReferenceError: (variable from the other file) is not defined because instead of just importing the categoriesObj, I think is importing the whole file.
Currently I'm using webpack and babel. Both index.js files have separate bundle files. The folder structure looks like this:
dist
bundle1.js
bundle2.js
src
app
index.js
history
index.js
What I have tried is:
Add "type": "module" in package.json file.
Added babel-loader. Thought it was some problem with ES6 modules.
renamed ../app/index.js to index.mjs.
What I'm trying to do is to import an object which is generated in another file so I can use it on this other file.
Hope this makes sense. I've been stuck in this for days. Thanks for reading!

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.

Can't get the relative path right React

Folder structure:
my-app/
node_modules/
package.json
src/
websites/Home.js
pictures/Group140.png
App.js
index.js
I am located in Home.js
I am trying to import Logo from "../pictures/Group140.png";
and use it as a src={Logo} on img. Keep getting this error
Module not found: Can't resolve '../pictures/Group140.png' in 'C:\Users\User\Desktop\Website\my-app\src\websites'

In react-create-app you have to import the image if you want to use it in your javascript code, you can see that in the default app.js file where it imports the logo.
Alternatively you can put your images (or other assets) inside the public folder and access them directly. RCA already saved the public folder path in the handy env var process.env.PUBLIC_URL.
See here.

Do not import "index.js" on folder import?

I am wondering if it is possible to re-configure the import behavior (looking for index.js) on importing module folders directly. By default, when you assume this module folder structure:
/components
/Button
/index.js
/style.scss
/Checkbox
/index.js
/style.scss
I can easily import the components like this:
import Button from 'components/Button';
import Checkbox from 'components/Checkbox';
But when I am working on that components, I will have multiple index.js files open in my editor/ide which will lead to confusion very quickly. Same applies for the style files.
What I did now is changing my folder structure to this:
/components
/Button
/Button.js
/Button.scss
/Checkbox
/Checkbox.js
/Checkbox.scss
Which solved that problem and I can see directly where each opened file belongs to.
However, now my component imports look a bit... verbose:
import Button from 'components/Button/Button';
import Checkbox from 'components/Checkbox/Checkbox';
Because obviously, webpack/babel would look for an "index.js" when I am importing a folder directly. Now my question is: can I change that behavior somehow? I'd like to tell webpack/babel that it should try to import a file named the same way as the folder as the index file.
You can re-configure directory indexes on every webserver, so I am hoping the same is possible with webpack/babel but googling didnt show anything up so far.

I went with the following solution:
In each of my folders, I will create a index.js next to the "real" module, that has the follwing content:
import module from './Button.js';
export default module;
This way I am able to keep my code in Button.js but am not required to import Button/Button someplace else.
I created a little script which automates the creation of the index.js files for me, so I don't have any additional work.

ES6 imports using module names without path

I would like to be able to import my modules using just name without path.
For example, say I want to use:
import ViewportChecker from 'viewport-checker';
instead of
import ViewportChecker from '../ViewportChecker';
But I want to keep the file where it is and not create a new npm module of it. Would it be possible to define it as module for exmaple in package.json?

You can use webpack's alias feature : https://webpack.js.org/configuration/resolve/#resolve-alias

You can put a default file with naming convention of index.js which contains all the exports.
like:
-App
--home
---index.js // <--it will hold all the exports from otherClass.js and anotherClass.js
---otherClass.js
---anotherClass.js
Now you have to import just folder name and it will automatically search for index.js file to get the particular exported item.
It might look like this:
import Home from './home';