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.
Related
I'm upgrading a React application and have found that I need to modify the import statements to get them to work.
For example, in the old version, the following import works without errors:
import { User } from '../System'
Note that System is a directory on my file system that contains User, a js file that ends with export default User.
In my upgraded version of the app, the System directory still exists, but the above import gives me Can't resolve '../System' in 'C:\my app\.
It turns out that to get the import working properly now, I need to change it to the following:
import User from '../System/User';
If I understand correctly, this relates to js module system changes made with ES6.
My question, though, is regarding the specification of a directory in the import statement (System above). Why would it be that I was previously able to name a file directory in the import statement instead of the actual js script/module itself? Is that approach of using a directory in the import statement still possible? And if so, is it ever advisable?
Update: based on AKX's comment, I noticed the System directory does indeed contain an index.js, which apparently is what makes the import from the directory itself possible.
When an import points to a directory, and only a file, Webpack (which most React setups use) follows Node's's conventions and will attempt to import index.js from that directory if it exists. That's the only condition under which importing from a path that points to a directory works - your previous build probably had /System/index.js (which would allow importing with from '../System'). If you rename the file you're importing to anything else - such as to User.js - importing using only the directory path will fail.
And if so, is it ever advisable?
Sure, if you want. It's a style choice but is commonly done.
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.
Why i think that put my lib in global and access it in different files is a valid choice :
First i have one js file, but my file was getting bigger so i just separate it in two, and now i access to my second file functions with an export of functions.
So why do i have to import one time the lib when im on a single file, but multiple times when i use multiple files
What i want to do
I have an error when i try to use a lib in JavaScript.
For the example i will use 'lib' instead of a real library from js
This is my files
app.js
import lib from 'lib'
console.log(lib)
This is working, but when i add
app.js
import lib from 'lib'
import my_file from './file_path.js'
file_path.js
console.log(lib)
This is not working and i have to import my lib in the new file like
file_path.js
import lib from 'lib'
console.log(lib)
I GET THIS ERROR
Uncaught ReferenceError: lib is not defined
But i don't want to duplicate my import, How can i do it ? thanks
I found a solution who work with window
you just have to add your lib in a window variable like that:
app.js
import lib from 'lib';
window.lib = lib;
import my_file from './file_path.js'
And now you can use your lib in "my_file" without importing it again
PS: thanks to people who help me resolving my issue :)
/!\ You have to be in a node application to use this method /!\
I also find an alternative of the window and import
We can use require like that:
window.lib = require('lib');
Now we just have one line instead of 2
This is the best solution i found so far, don't know if we can do better, let me know
I have an npm package. Let's say example-package. This is normal way of importing.
import RootModule from "example-package";
Now I have one more file nested here.
Package Root > src > Feature > index.js
Now if I have to import this Feature, I would do this.
import Feature from "example-package/src/Feature";
What can I do to avoid developers using my npm package from writing long nested paths and they use something like this.
import Feature from "example-package/Feature";
Just to make it clear, Feature exports multiple options - { A, B ..} . I do not want to import Feature from package and again extract options from Feature. Just want to import it with one slash no matter how long the path is!
I found a solution online. Possible solution would be to create a file /Feature/index.js in the root folder with following content.
module.exports = require('example-package/src/Feature')
Now you can access it like this,
import Feature from "example-package/Feature";
You can add the feature as an export of your index -
index.js:
import Feature from './Feature.js'
export Feature
Then anyone using the package can just import like
import { Feature } from 'example-package'
I am working on a simple app in react with ES6 and babel. Recently I faced this issue. I used react-notifications package here: https://github.com/minhtranite/react-notifications
I just followed the docs and it works fine. I can import it with import {NotificationContainer, NotificationManager} from 'react-notifications';
But then I tried to work with this: https://github.com/cezary/react-loading
Now in the example of react-loading, the developer isn't using the ES6 way to get the component. I tried to look at the JS file and tried this after doing npm install react-loading:
import {Loading} from 'react-loading'; but somehow this doesn't work. I get this:
You likely forgot to export your component from the file it's defined in
But I can see it is exported. What am I doing wrong?
Since it is a single module, it is exported as default. You'll have to do this:
import Loading from 'react-loading';