We Keep Coding

How to use code splitting with webpack in react app with components exported as export * from '...'

I'm trying to use code splitting in my react app and overall it works great, but I noticed something strange in bundle analyzer. My components folder is loaded in the first chunk with all its components (even the ones that are only used in lazy loaded components).
I think the problem is that I follow the structure of using index.ts files to export my components:
/components:
/Component1
/Child1
Child1.tsx
index.ts
Component1.tsx
index.ts
/Component2
Component2.tsx
index.ts
index.ts
The index.ts files just export the needed components like so
export * from './Component';
this is the same as
import { Component } from './Component';
export { Component };
in javascript.
By doing it that way I get very nice looking imports:
import { Component } from 'components';
without the deep paths and all that stuff.
But i think because of that webpack can not recognize how to split it and just bundles it all.
Are there any solutions for this? Maybe I'm doing something wrong?
I use the default create react app config right now.

export * from './Component';
This is causing webpack to bundle all the components which are there in './Component' and whatever it importing and so on.
You should export components individually without using *
Like export { Component1, Component2 } from './Component'
Also if you are using Webpack 5, it creates a mapping of which component import is used and discard unused components. This is not available in Webpack 4.

Import all imports from another js file

Is it possible to have a JS file import all the imports from another js file? I want to have a set of imports for my react app that only import when the app is in dev mode and I want to store these imports in a dev-config.js file, any ideas?

The export parameters specify individual named exports, while the import * as name syntax imports all of them. Below are examples to clarify the syntax.
import * as myModule from '/modules/my-module.js';
Here, accessing the exports means using the module name ("myModule" in this case) as a namespace. For example, if the module imported above includes an export doAllTheAmazingThings(), you would call it like this:
myModule.doAllTheAmazingThings();

Import classes from a Javascript library to Typescript

I am trying to import an external JavaScript library with no typings or installable package. The plugin is: https://github.com/amw/jpeg_camera/tree/master/dist/jpeg_camera_no_flash.js. I want to import three classes from that plugin: JpegCamera, JpegCameraHTML5 and Snapshot. With the help of some tutorials, I was able to export the three classes with their interfaces in a .d.ts file. The .d.ts file looks something like:.
declare module Camera {}
export class JpegCamera {...}
export class JpegCameraHTML5 {...}
export class Snapshot {...}
Now, I don't know how to create a link between the plugin source file (.js), my own .d.ts file and the typescript file where I want to import these three classes. I tried
import * as X from "path/to/d.ts
but it won't work. Thanks :)

I don't know in which context you are running your application, but trying locally I got the message: ReferenceError: document is not defined loading with the syntax:
import * as camera from './jpeg_camera_no_flash'
You should not have this message if you are running your script through a browser.
I downloaded the file physically to my project folder.

You could try doing this:
/// <reference path="path to the .d.ts" />
Or you could export each class using default, so you can import them like this: import className from './file-path'

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';

What does import Module from 'module' import when no default export is defined and why is it different from import * as Module?

I am pretty new to JavaScript and have been struggling with imports recently. There has been one thing I cannot wrap my head around.
In older node modules (mostly those which came to see the light prior to ES6), which may be installed using the npm, such as express, usually no default export is defined.
My IDE (WebStorm) marks the following line with the Default export is not declared in the imported module notification.
import express from 'express';
This message may be circumvented by trying to import the whole module as an alias using
import * as express from 'express';
implicitly telling my IDE to just import everything and name it express, however doing so then leads to an express is not a function error when trying to instantiate the application on the following line.
const app = express();
Peculiarly the original import (without the alias) works.
What exactly is imported using the import statement without the alias, when no default export is defined? I would think it is the whole module, but it does not seems so.

What does import Module from 'module' import when no default export is defined?
Nothing. In fact, instantiating the module will throw a SyntaxError when something is imported that is not exported or exported multiple times from the imported module.
Why is it different from import * as Module?
Because import * just imports a module namespace object that has the exports as properties. If you don't export anything, it'll be an empty object.
In older, pre-ES6 node modules usually no default export is defined.
Which means that you cannot import them as an ES6 module. Your IDE seems to expect that though and puts up the warning.
So what happens if you refer to them in an import declaration? Your module loader might do anything with it, and HostResolveImportedModule will return a module record that is not an source text "ES6 module" record - i.e. it might do anything implementation-dependent with CommonJS modules.