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!

My css doesn't load automatically in react with vite

I have some css and js files that I try to import into a view in React with vite so that it loads the styles, but it doesn't load, and when I enter the view, I have to comment and uncomment the import in code for the styles to be read.
I leave a capture of how I import the files in the view.
My folder tree.
The js file "custom.min.js"

The import path /src/* maybe is wrong. I may need more info, but if this file you've shown is inside the src folder then the import path is incorrect. To be explicit, you need a relative path to any .css files.
Now I may be mistaken, but the js imports need to be named. I can see you're using TypeScript and you're using import statements, so I am only guessing but you'll need to name the import or import the specific "thing" you export in the js files. This can look like the following:
import fit from "/src/assets/js/*";
or
import { fit } from "/src/assets/js/*";
and the export in the custom.min.js file should look like:
export default fit;
or
export { fit };
Now for your .css and .js, if this is your directory:
__src
|___ assets
|
|___ components
|
|
|___ App.tsx
|___ App.css
|___ ...(everything else that lives in `src/` from a `create-react-app`)
then you will need to import the .css file like so into the App.tsx:
import "./assets/style/style.css"
You can optionally leave out the extension, but I am not 100% sure for .css files.
Hope this helps!

In case you're trying to use an absolute path for your imports, you need to remove the backslash before the 'src'.
In your case, the imports are prefixed with '/' so it looks for the 'src' folder inside the current directory, 'src/components/organisms/sidebar/src/{your imports}'.
Choosing between relative and absolute imports is a matter of a personal opinion as they both have trade-offs, this will make it clearer, and this.

import js package not working inside another import js file in webpack

i am using webpack js bundle for my project.I have published a npm module and which included in my webpack entry file.i can access it inside entry file.But that file i can not access inside another file which included in entry file in webpack.Here is my entry file
import myClass from "sbkkoovery-esign";
console.log(myClass);
import "jquery";
import 'bootstrap';
import "./js/app";
here 'myClass' is working properly.But i tried to access 'myClass' inside '/js/app' file.But i am getting error.Here is mu 'js/app' file
console.log("here");
console.log(myClass);

I was also facing same issue few days back, In this case, rather then to use any node-plugin I have directly given "javascriptfilename.min.js" file path inside tags in "index.html".
Note: This is not the correct solution, this is just temporary.

How webpack reads what to import?

I was wondering and trying to find out how webpack internally finds out which are the import statements a entry file has?
For example my index.js looks like
import React, { PropTypes, Component } from 'react';
import { findDOMNode } from 'react-dom';
import classnames from 'classnames';
import Loading from 'components/Loading';
import Button from 'components/Button';
import Header from 'components/Header';
import Footer from 'components/Footer';
class App extends Component {
render() {
return (
<div className="shopping-list">
<Header />
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
<Footer />
</div>
);
}
};
export default App;
Now I am trying to understand how webpack is finding out what are the other imports that file has? And then one of the imported files has other imported files?

Basically, Webpack is build tool and it is design to convert your app into optimized solution like compressing the js/scss/css and many more files.
Webpack can be configurable according to your choice and there are many loaders and plugins developed, you can use them to add support for that type of file.
It's like telling a system to take list of source files (input) and compiling them by using related webpack plugin or loader and giving optimized solution as output.
by webpack configuration, you tell it that load this type of file and generate output here and it normally convert your advanced source code to native source code so, it can work on any system.
for example,
we know that scss file is not supported by browsers, we need to convert it into css and then we can import it, but using scss loader plugin and by configuring it with webpack you can directly use scss file no need to manually convert scss to css and directly can import scss file into component and webpack will read the file, see the type and convert it for us.
configuring the webpack is the difficult part but there are pretty good pre-configured solution available to use like create-react-app where you don't need to worry about the configurations
for more info see the webpack documentation

Meteor import all files in a directory

I'm having an issue while trying to import all files in one of my directories.
This works:
import '../pages/guidance/target_access_client_relationships.js';
While this doesn't:
import '../pages/guidance';
What am I doing wrong? I am planning to have quite a lot of files in 'guidance' and I'd rather not have to import every single file individually.
Thanks!

The only way I know is to use a index.js and import all the file inside it.
EX:
dir A index.js
import './fileA.js'
import './fileB.js'
dir B index.js
import './fileA.js'
import './fileB.js'
and finally you can make a parent dir and import both
parent dir index.js
import './dirB'
import './dirA'

This is not possible I don't think, but what you can do is this...
Create in the directory a index.js file which imports everything from the directory and exports it.
import modules from files in directory has a similar answer.