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.

Need help help knowing where to import Swiperjs

Like the title says, I'm in need of help knowing to import swiperjs. I'm fairly new to Javascript so I'm still learning the ropes.
I've already installed it via NPM and if you read the document is says "By default Swiper exports only core version without additional modules (like Navigation, Pagination, etc.). So you need to import and configure them too". My problem and question is how and where? Do I go to configure them? Do I go inside Swiperjs core.js and configure it there or do I use my current app.js and add the import there? or make a new js file and do it there?
Thank you for taking the time to answer my question.
Ps: All I'm using is html, css, sass, javascript, Jquery as a framework and using Babel

You can import Swiperjs inside your app.js if that is your main file.
You import it with this code:
// core version + navigation, pagination modules:
import Swiper, { Navigation, Pagination } from 'swiper';
// import Swiper and modules styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
// configure Swiper to use modules
Swiper.use([Navigation, Pagination]);
// init Swiper:
const swiper = new Swiper(...);

If anyone not using webpack then just use require
const Swiper = require('../../node_modules/swiper/swiper-bundle');
Note: correct the path of your node_modules folder. For me, nothing worked above.

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.

How can I exclude an ES6 module (VueJS) from treeshaking in RollupJS? (and should I?)

Right now I pull in all my own es6 modules and create a bundle using Rollup.
Recently I started using VueJS, which now has an ES6 Module which can be pulled in just like my own modules. Rollup does some treeshaking on it, but I don't know if that is a very good idea? I don't know what it is doing, so I would rather it does nothing!
Instead I just add vue at the end of my HTML:
<script src="dist/bundle.js"></script>
I love the convenience of having everything as one bundled file, but should I really treeshake the entire Vue app, is there a command in Rollup that I can not treeshake just this one module?
EDIT
I have found the --external option, which seems good as it would just keep the import for vue and bundle the rest, but it does not seem to work!
When I use rollup --format=iife --external=../node_modules/vue/dist/vue.esm.browser.js --file=dist/bundle.js -- src/main.js it says Error: Could not resolve '../node_modules/vue/dist/vue.esm.browser.js' from src/app.js.
In my main.js it has import Vue from '../node_modules/vue/dist/vue.esm.browser.js; which works fine for the app. I want to make Vue an external, but it won't work!

To prevent Rollup from treeshaking a particular module, you can simply import it blindly (instead of a part of it), so that Rollup thinks the module performs some side effect:
import 'vue'
Of course you can still import some bits in parallel, so that you can rename the default export for example:
import 'vue'
import Vue from 'vue'
As for your --external option, you probably just need to wrap the path value with quotes:
--external='../node_modules/vue/dist/vue.esm.browser.js'
Note that you should probably switch to Rollup configuration file (instead of CLI options) to make your life easier. You will also be able to use rollup plugins, e.g. rollup-plugin-alias to manage the exact location of the Vue file you want to use.

How to import a custom JS file into a React Single Page App?

The question is simple although the approach can vary.
First I am using the following:
1 - Webpack
2 - Babel
3 - ES6
4 - npm
I have the module Bootstrap included but can't figure out how to call the JS file via import
This is how I'm approaching it:
import Bootstrap from 'bootstrap'; and that doesn't work so my first problem is not being able to access bootstrap so i can't even begin to figure out how to access the bootstrap.js file.
The second approach was to scrap the idea of accessing Bootstrap from the node-modules folder and just add bootstrap.css and bootstrap.js to the src directory in my React build.
What I then tried was to access bootstrap css like this:
import './css/bootstrap.css'; and that works fine.
But when i attempt to import, bootstrap.js like this import './js/bootstrap.js I get an error when React tries to compile.
The image above shows how I'm trying to import my local JS file.
Any ideas what I'm doing wrong.
I would love either a solution using the bootstrap module (which is cleaner so I don't have to manually include) but would also like to know how to manually include as well.
Thank you.

You need to use the bootstrap WebPack package.
https://github.com/gowravshekar/bootstrap-webpack