Distribution in ES6 modules format

[augonis]

The project website and npm page (in usage examples) suggests that the package is distributed in es6 module format, but that doesn't seem to be the case. Doing npm install --save ttag and putting import { t, ngettext, msgid } from 'ttag' in my sites javascript makes the browser go The requested module '../../node_modules/ttag/dist/index.js' does not provide an export named 't'.

[AlexMost]

Hi, @augonis! I am not sure, that I have got your point. Can you explain a little bit more about the reproduce case? What kind of bundler do you use to build your javascript? You can also look through the example here - https://github.com/ttag-org/CRA-runtime-example/blob/master/app/src/App.js#L4 It's the very basic starter for Create React App that uses webpack for the build and modules resolve logic.

[augonis]

I'm working on a web app using pwa-starter-kit and serving it in development with polymer-cli, it doesn't transpile or bundle in develoment, just rewrites module imports from module specifiers to URLs ( import 'ttag' > import '../../node_modules/ttag/dist/index.js' ) for the browser. Unfortunately ttag/dist/index.js is not an ES6 module exporting anyting.

For production builds I'll probably use webpack, but that's ways off.

It would be great to include ttag as ES6 module in npm distribution for those using plain ES6 modules.

[AlexMost]

@augonis thanks for the clarification! Going to try pwa-starter-kit and see how we can solve this. As far as I know, we can distribute valid es6 format via module property in the package.json - https://github.com/rollup/rollup/wiki/pkg.module. But we should check that at first.

[AlexMost]

I guess I have found https://pwa-starter-kit.polymer-project.org/faq

If the library’s pkg.main is not already ESM, check if package.json defines pkg.module or pkg[‘jsnext:main’] - our tools will prefer those if present.

I remember, that we tried to distribute es6 via pkg.module property earlier, but the common scenario for webpack and other build systems is to not transpile what is inside the node_modules and if we will add pkg.module webpack will use those imports and that can break existing builds.

So, as I can see there are a couple ways to solve this issue:

1. Import es6 module explicitly

import { t } from 'ttag/es6'

2. Try to use pkg[‘jsnext:main’] in the package.json

This option will work if it will not break existing webpack setups that excludes node_modules from been transpiled.

What do you think, guys? @MrOrz @vharitonsky @alxpy

[oleksandr-kuzmenko]

I prefer first way.

[AlexMost]

I am also for the first way.

So, to fix this issue we need to:

1. Provide es6 imports support for our dependencies: dedent, and plural-forms. We can put dedent right inside the ttag repo. Not sure that we can do the same with plural-forms.
2. Also we must upgrade babel-plugin-ttag to recognize ttag/es6 imports.

[AlexMost]

As far as I can see it makes sense to use rollup instead of webpack for ttag distribution. It seems like it can easily distribute es6 modules format + produces smaller bundle size.