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!

How do i import my file to app.js using javascript?

I'v been trying to import a javascript file to app.js found in create-react-app package. I used this code to import my file :
note:my file is located in a folder called components where you find the folder Navigation and its in that folder.
import script from './components/Navigation/script;
and i exported the file using :
export default App;
but in my terminal i got an error saying
Module not found : cant resolve'./components/Navigation/script'
Could someone please tell me how i can fix this error.
Thank you in advance :-)

You got the syntax wrong.
import script from './components/Navigation/script;
actually imports the default export from script.js
export default function() {}
You can also import named exports like this:
import {something} from "./script.js"
Which imports
const something = 42;
export something;
I guess you could import js(and css) files with
import "./scripts.js" //or import "./style.css"
But you generally want to export individual functions, values etc.
You can also import everything from a module like this
import * as React from "react";
But create-react-app configuration allows you to use this as
import React from "react"; //Internally equals to import * as React from "react";

How to run gulpfile.babel.js(ES6) tasks from subfolder?

Works if run from file root folder but on the subfolder, I get a syntax error.
The error is regarding import syntax, failing at first import which is gulp.
If I change to require it works but I need the setup in ES6.
I need to mention again, it works fine if I run the command from a terminal from the folder where gulfile is.
PS: I've updated some babel to 7 - I did not have this problem with babel 6.
Looks like if failing to use .babelrc from the outside root folder.
Everything I could find online.
'use strict';
/**
* Note: I updated most of the theme npm deps including gulp#4
*/
import gulp from 'gulp';
import babel from 'gulp-babel';
import uglify from 'gulp-uglify';
import sass from 'gulp-sass';
import sourcemaps from 'gulp-sourcemaps';
import autoprefixer from 'gulp-autoprefixer';
import revAll from 'gulp-rev-all';
import cleanCSS from 'gulp-clean-css';
import svgSprite from 'gulp-svg-sprite';
import del from 'del';
import merge from 'merge-stream';
import browserify from 'browserify';
import browserSync from 'browser-sync';
import source from 'vinyl-source-stream';
import buffer from "vinyl-buffer";
import babelify from 'babelify';
It should work the same as the task is run from root directory even if is run from the subfolder.

I believe you should update the main parameter of your package.json file.
Please refer to Node.js package.json main parameter for further info.
Hope it helps.

Webpack Import Ignore CSS

I'm importing a JS file with Webpack (2), e.g.
import Test from 'XYZ/test';
In the imported file test.js I'm loading a CSS file, e.g.:
import './test.css';
Now, in my first above mentioned import I want to import test.js but not the css file that is imported from the file itself. So I just want to import JavaScript and ignore the CSS from the imported file.
Is this possible in any way?

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.