We Keep Coding

Why this import line doesn't have an export

I just learned import/export for JS today but I saw this code from here but it uses something like,
import { modal, configure } from 'web3-login';
But I thought it was supposed to be like,
import { modal, configure } from './web3-login.js';
What does web3-login mean? It is a shorthand?
And also, I can't an export anywhere in the code. I thought we should have like,
export function modal()
How come?
UPDATE: I originally found the file when I downloaded from - wordpress.org/plugins/ethpress but it doesn't use node. It's just a WordPress plugin. And there're no traces of web3-login text in a function or export.

-- when you are importing from node_modueles you use just package folder name like 'web3-login'
-- when you import some exported function from your project structure you use './web3-login.js'. this means you are importing some function that is exported from same directory that you are currently into.

It uses web3-login instead of ./web3-login.js because it's downloaded with npm (Node Package Manager). If you were trying to import a local file you have created yourself in your folder structure you would use: ./web3-login.js but because it's now referring to a npm package you won't have to write more than just the package name.

Is there a way to use the screenfull javascript library within the Nextjs framework?

I've been trying to use Dynamic Importing in Nextjs in order to use the screenfull library but it hasn't worked.
import dynamic from "next/dynamic"
import screenfull from 'screenfull';
const Screenfull = dynamic(()=>{return import("screenfull")},{})

You're using dynamic imports incorrectly. The idea is that you can import part of a JS module inside of another piece of JS code, so you don't have to preload or load the entire library. An example might be doing a dynamic import after an async call.
Next has some other great examples of how to use this functionality in your application.

you can create file in #utils folder with below code:
import screenfull from 'screenfull';
export default screenfull
then in your component do something like so:
import dynamic from 'next/dynamic';
const screenful = dynamic(() => import('../#utils/screenfull'))

The first question that comes to mind is what's the error you're getting?
There's no reason you shouldn't be able to import any library you've installed locally!
Did you actually install that package by running npm install screenfull on your terminal?

How to read app.json programmatically from node module

I'm writing a module that I'll be using npm to install in the future. I need to be able to read app.json to get configuration information. I would like to reference app.json using an absolute path, but:
import app from 'AppName/app.json'
doesn't work because my module won't know the name of the app in the future. How can I accomplish this? Thanks in advance.

You should reference it using a relative path.
Using import won't work, unless you are using ES6, as you are not exporting anything in the app.json so you will have to use require instead. If the file that is requiring it is located in node_modules/your_module_name/ something like this should find the app.json
const app = require('../../app.json')
or if using ES6
import app from '../../app.json'

You can reference using a relative path.
For example:
import app from '../app.json'
or
import app from './app.json'

How to export a submodule in a Typescript library

So my goal is to create a library in Typescript. My intention is to split up core parts of the library into submodules like RxJS or Angular Material.
RxJS and Angular both support imports like so:
// RxJS
import { map, filter } from 'rxjs/operators';
// Angular
import { MatButtonModule } from '#angular/material/button';
However, I am unable to replicate this myself.
My goal is to do something similar and allow you to import a class with import { foo } from 'package/bar;
I have looked at RxJS's source on Github and have tried replicating what they've done but it's not working.
The library compiles fine but when I go about importing it I always get a Cannot resolve dependency 'package/foo' error.
Meanwhile doing import { test } from package (without the submodule part) works completely fine.
I've tried using paths in tsconfig to no avail. If that is the answer then I'm doing it wrong.
How do I go about doing this?

In order to achieve that, you can create your "sub-modules" in different directories (although they are technically part of the same module), and create an index.ts on each of those directories exporting there whatever you want to publish.
For example, I have done this in my NodeJs package Flowed, and you can for example do this:
import { FlowManager } from 'flowed/dist/engine';
Where the corresponding index.ts file is this one if you want to check.
Although in my case I put also available all the stuff from the root, so the previous line would be equivalent to:
import { FlowManager } from 'flowed';

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