Question

0

187

Views

How to work with ESM only npm packages and normal npm packages in a single JavaScript file?

Ok so I'm relatively new to web development. And I was trying to require two packages namely franc and langs in my index.js file. So it turns out that franc is now ESM only package and I have to import it and mention type:module in my package.json file. But if I do that I cannot require langs package. And if I try to import it, it apparently returns a promise. And also if I try to access langs' functions it says it is not a function. For e.g.

import {franc} from 'franc'
const langs = import('langs');
const langCode = franc('Alle menslike wesens word vry')
console.log(langCode)
console.log(langs.where("3", "kor"));

It says langs.where is not a function. Can someone help please?

And here is the promise returned if I write this code

import {franc} from 'franc'
const langs = import('langs');
const langCode = franc('Alle menslike wesens word vry')
console.log(langCode)
setTimeout(function(data){
    console.log(langs)
}, 1000)

Output

afr
Promise {
  [Module: null prototype] {
    default: {
      all: [Function: allLanguages],
      has: [Function: hasLanguage],
      codes: [Function: getCodes],
      names: [Function: getNames],
      where: [Function: findBy]
    }
  }
}

almost 3 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-12T03:51:45.386Z

To correctly import the library, you'll need to do any of the following

import {franc} from 'franc'
import langs from 'langs'
const langCode = franc('Alle menslike wesens word vry')
console.log(langCode)
console.log(langs.where("3", "kor"));

import {franc} from 'franc'
const langs = require('langs');
const langCode = franc('Alle menslike wesens word vry')
console.log(langCode)
console.log(langs.where("3", "kor"));

import {franc} from 'franc'
const langsModule = await import('langs');
let langs = langsModule.default;
const langCode = franc('Alle menslike wesens word vry')
console.log(langCode)
console.log(langs.where("3", "kor"));

I'd personally recommend taking the first route, but all 3 should technically work. More information on the import statement can be found in the MDN Web Docs.

Regarding the difference between the three options:

The first option utilizes the ES6 module functionality to import the default export of the langs package.
The second option uses the same method as the first, but specifically utilizes the dynamic import functionality of ES6 modules. This requires waiting for the file to load and selecting the default property, but offers the option to load files asynchronously.
The third option utilizes the CommonJS method for loading dependencies. With this method, you can only import the default export, meaning that the entire file needs to load which restricts performance. This is also must be done synchronously.

This SO post helps to define a couple of the differences between the ES6 and CommonJS method.

0

187

How to work with ESM only npm packages and normal npm packages in a single JavaScript file?

1 answers

0

Find remote jobs

Andres GPT