import { getNativeName, getCode } from "iso-639-1" ; not working after updating webpack 4 version . about iso-639-1

[meikidd]

Could you share more detail about your use case? webpack config? A minimal reproduceable example will be better.

[Bopaiah-MD]

@meikidd I was able to reproduce the issue using “webpack 4 React boilerplate” https://github.com/FerJSsilva/webpack-4-react-boilerplate

So all I did is just clone https://github.com/FerJSsilva/webpack-4-react-boilerplate.git

You can find all the webpack4 config changes under folder config here https://github.com/FerJSsilva/webpack-4-react-boilerplate/tree/master/config

steps done to reproduce issue -

• npm install iso-639-1

And in App.jsx I added below code

import React, { Component } from 'react';
import logo from '../assets/images/logo.svg';

const ISO6391 = require('iso-639-1'); //imported 

class App extends Component {
render() {

      console.log("ISO6391 object",ISO6391);
      
      //This below code breaks 
      console.log("ISO6391",ISO6391.getNativeName('en'));
      console.log(ISO6391.getCode('Chinese'))

      // fix done 
      //console.log("ISO6391 en",ISO6391.default.getName('en')); // working 
      //console.log("ISO6391 Chinese",ISO6391.default.getCode('Chinese')) // working

        return (
            <div className="App">
            <header className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <h1 className="App-title">Welcome to React using ISO6391</h1>
              <h3>GetNativeName code('en'): {ISO6391.default.getName('en')}</h3>
            </header> 
          </div>
        );
    }
} 

export default App; 

Errors

Uncaught TypeError: ISO6391.getNativeName is not a function
    at App.render (VM428 main.005bf661e281ebe238ed.js:36991)
    at finishClassComponent (VM428 main.005bf661e281ebe238ed.js:18934)
    at updateClassComponent (VM428 main.005bf661e281ebe238ed.js:18889)
    at beginWork (VM428 main.005bf661e281ebe238ed.js:19837)
    at performUnitOfWork (VM428 main.005bf661e281ebe238ed.js:23505)
    at workLoop (VM428 main.005bf661e281ebe238ed.js:23545)
    at HTMLUnknownElement.callCallback (VM428 main.005bf661e281ebe238ed.js:4342)
    at Object.invokeGuardedCallbackDev (VM428 main.005bf661e281ebe238ed.js:4392)
    at invokeGuardedCallback (VM428 main.005bf661e281ebe238ed.js:4449)
    at replayUnitOfWork (VM428 main.005bf661e281ebe238ed.js:22771)

PFA the screenshots of the errors for the same i see

Note: As mentioned above i was able to fix doing as below

console.log("ISO6391 en",ISO6391.default.getName('en')); // working 
 console.log("ISO6391 Chinese",ISO6391.default.getCode('Chinese')) // working

Can you please help here for a proper fix for webpack4 .
Thanks.

[meikidd]

Hi @Bopaiah-MD , should use es6 module import instead of commonjs import:

👍correct

import ISO6391 from 'iso-639-1';

👎wrong

const ISO6391 = require('iso-639-1');

I'll update the readme later to make it clear.

[Bopaiah-MD]

👍 works , thanks for Quick response @meikidd .