0

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]
    }
  }
}
Hardik Sharma
  • 3
  • 4
  • `And if I try to import it, it apparently returns a promise.` Try adding `await` in front of `import()`. `const langs = await import('langs');` – pxDav Oct 05 '21 at 05:26

1 Answers1

1

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.

Chase Ingebritson
  • 1,559
  • 1
  • 12
  • 25
  • Thanks. I followed the first one and it worked. Can you explain the difference between line 1 and 2, like how is it importing differently? – Hardik Sharma Oct 05 '21 at 05:40
  • And btw, I tried the 2nd and 3rd options too and they didn't work. – Hardik Sharma Oct 05 '21 at 05:43
  • I included an explanation of the differences between the methods. I also included a fix for the third method, as I had forgotten to reference the default property that your console.log statement highlighted. Regarding the require option not working, I'm not quite sure, you could try logging the langs variable to get more information into why it's not working. – Chase Ingebritson Oct 05 '21 at 06:03