es6 imports

[AntonOfTheWoods]

Sorry if this is obvious (JS is still somewhat opaque to me...), but how would one use this with es6 imports? I tried various versions of what is described here but none worked. Thanks!

[sgalal]

$ cat package.json
{
  "private": true,
  "type": "module",
  "dependencies": {
    "opencc-js": "^1.0.2"
  }
}

$ npm install

$ cat index.js
import OpenCC from 'opencc-js';
const converter = OpenCC.Converter({ from: 'hk', to: 'cn' });
console.log(converter('漢語'));

$ node index.js
汉语

[AntonOfTheWoods]

Thanks for your reply @sgalal

$ asdf shell nodejs 15.11.0
$ npx create-react-app default-react-app
...
$ cd default-react-app
$ npm i openjs-cc
$ grep opencc package.json
    "opencc-js": "^1.0.2",
$ ...
$ cat App.js
import OpenCC from 'opencc-js';
function App() {
  const converter = OpenCC.Converter({ from: 'hk', to: 'cn' });
  console.log(converter('漢語'));
  return ( <div className="App"></div>);
}

export default App;
$ npm start
Compiled successfully!

You can now view default-react-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://172.25.120.57:3000

Note that the development build is not optimized.
To create a production build, use yarn build.

Then in the browser I get TypeError: Cannot read property 'Converter' of undefined. This may be obvious to someone who is under 30 or spends most of their dev time on modern JS, but unfortunately not for me :-(. For most of the other packages I am using this "Just Works" and doesn't here. Thanks for your help on this and your great work!

[sgalal]

That is strange. As a workaround you can use:

import { Converter } from 'opencc-js';

const converter = Converter({ from: 'hk', to: 'cn' });

function App() {
  return (<div className="App">{converter('漢語')}</div>);
}

export default App;

I will release a new version as soon as I find a final solution.

All the best for your project!

[AntonOfTheWoods]

Thanks @sgalal ! Actually I didn't think of trying that but I had forgotten that I had actually got a little further than that before. I can confirm that your code works (including in my app), however:

import { Converter } from 'opencc-js';
const converter = Converter({ from: 't', to: 'cn' });
function App() {
  return ( <div className="App">{converter('漢語')}</div>);
}
export default App;

Gives the following:

TypeError: (intermediate value)(intermediate value)(intermediate value)[s] is not iterable

I spent quite a while trying to figure out how to load the data files but that was over my level of JS unfortunately!

[AntonOfTheWoods]

All the best for your project!

And thanks! It's a PhD project @ CityU if you were wondering :-).

[sgalal]

@AntonOfTheWoods I am sorry for that. That is a bug in v1.0.2. I have just published v1.0.3 and it should work now.

[sgalal]

All the best for your project!

And thanks! It's a PhD project @ CityU if you were wondering :-).

What a coincidence. I am applying for the MSc in Computer Science programme at CityU :smile:

[AntonOfTheWoods]

All the best for your project!

And thanks! It's a PhD project @ CityU if you were wondering :-).

What a coincidence. I am applying for the MSc in Computer Science programme at CityU 😄

Well if you want to do a joint project with the Linguistics department on computer-assisted language learning then look no further!!!! :-D

[AntonOfTheWoods]

@AntonOfTheWoods I am sorry for that. That is a bug in v1.0.2. I have just published v1.0.3 and it should work now.

@sgalal , I can confirm it works perfectly now, thanks!!! It might not be very obvious for others wanting to use es6 imports with the readme how it is - would you like a PR for the readme? Would you rather leave this ticket open until it works as you expected it would (import OpenCC from 'openjs-cc';)?

[sgalal]

Yes, I will leave it open until import OpenCC from 'openjs-cc'; works.