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.

Can I import npm packages dynamically from CDNs in Webpack?

I need to require a different version of Zoid npm package dynamically in my JS bundle, depending on a variable. So for example:
if (isLatestVersion) {
zoid = await import('https://unpkg.com/zoid#9.0.80/index.js')
} else {
zoid = await import('https://unpkg.com/zoid#9.0.31/index.js')
}
However when I try the above I get this error:
script.js:2 Uncaught (in promise) Error: Cannot find module 'https://unpkg.com/zoid#9.0.80/index.js'
at webpackMissingModule (script.js:2)
Presumably this is because I don't have zoid defined in my package.json.
So basically my question is, is there's a way to import libraries from a CDN such as unpkg.com or skypack.dev, using Webpack's dynamic imports (aka code splitting)?

The way I ended up solving this was by adding two versions of the same package in my package.json. So I ran these commands:
yarn add zoid9080#npm:zoid#9.0.80
yarn add zoid9031#npm:zoid#9.0.31
yarn remove zoid
Then I imported these two packages statically, since I didn't actually need dynamic importing, and the code ended up being simpler as well:
import zoid from 'zoid9080';

Error: Could not find declaration file for module VueJS application

Hi I am using NuxtJS to build a VueJS application. I have installed an image cropping library vue-croppie. I have imported the Vue component as per the documentation like below
import VueCroppie from 'vue-croppie'
However, I am getting the following error on import statement
Could not find a declaration file for module 'vue-croppie'. 'xxx/node_modules/vue-croppie/dist/vue-croppie.cjs.js' implicitly has an 'any' type.
Try npm i --save-dev #types/vue-croppie if it exists or add a new declaration (.d.ts) file containing `declare module 'vue-croppie';
I have tried declaring index.d.ts file at the root of my project with following content but id doesn't solve the problem
declare module 'vue-croppie';
I have tried using require like below as suggested on other posts but of no use
const VueCroppie = require('vue-croppie')
I understand this is a Typescript issue but have no knowledge about Typescript. Can somebody throw more light on this. What is happening and how to fix it.
Thanks

The issue was I had not installed the plugin with VueJS app. Here is how to do it.
VueJS
We can use Vue.use to isntall a plugin before it can be used like below
import Vue from 'vue';
import VueCroppie from 'vue-croppie';
Vue.use(VueCroppie)
NuxtJS
In case of NuxtJS it is little different. The plugin is registered globally, here's how.
Create a file called vue-croppie.js under plugin folder. And add the following to it
import Vue from 'vue'
import VueCroppie from 'vue-croppie'
Vue.use(VueCroppie)
In your nuxt.config.js add this under plugins
{ src: '~/plugins/vue-croppie.js', ssr: false }
Now, the plugin will be available globally. So there is no need to import and can be used directly.

Importing JS libraries to Vue.js

I'm trying to use hammer.js on my project, however I'm having trouble importing it. I have installed the library through npm by npm i hammerjs. Imported it on my main.js file as import 'hammerjs' and then when I do
var hammertime = new Hammer(myElement, myOptions)
hammertime.on('pan', function(ev) {
console.log(ev)
})
I get errors saying Hammer is not defined. What is the correct way to import libraries in vue?

You can include hammerjs with:
import * as Hammer from 'hammerjs'
A side note: You can do the same to include other libraries installed with npm in your vue project. For example, if you want to include ThreeJS In your .js or .vue files, simply type in:
import * as THREE from 'three'

if you want, install the wrapper hammerjs to vue, follow the link:
https://www.npmjs.com/package/vue2-hammer
otherwise, do you need include the lib on the index.html, but a don't recommend.
ps: I would like do comment, but i don't have reputation.

Adding the Intro.JS library to a Vue-Cli / Webpack project

I'm building my first project using vue-cli and webpack and I'm not sure how to properly use an external JavaScript library to my project.
I want to add the Intro.js library which simply requires me to import the intro.js, add some tags to some HTML elements, and call the introJs().start() function.
I've installed the library with npm install introj.js --save
I've imported the library by adding import introJS from 'intro.js' into my <script> section of my App.vue file.
I've checked the compiled app.js file and I know introJS is being compiled so everything is good there.
My question is, where do I put introJs().start()? I tried putting it in the mounted() function of the App.vue file but that doesn't work.
Additional Info: When I try to run introJS().start() from the mounted () method in App.vue I receive this error: Error in mounted hook: "TypeError: __WEBPACK_IMPORTED_MODULE_7_intro_js___default(...) is not a function"

This should work:
const { introJS } = require('intro.js')
introJS().start()