Type Script usage

[terpimost]

Environment

Bluepring v3, Core
Mac, Webpack

Question

I see that by default Webpack is not using type script version of the blueprint but esm output of that

Is it possible to consume typescript version of the library from node_modules?
If Yes. What would be the right configuration or steps?

If not @blueprint npm/yarn package but the source is used what is the best practice to connect it to a project?

[adidahiya]

You should not consume the typescript .ts source files of Blueprint published in the NPM package. Those are for source mapping only (in debugging contexts).

You should consume Blueprint (and any other TS-authored library) through its .js and .d.ts files. Blueprint happens to provide .js files in multiple module formats, as you can see in the lib/ folder. Choose the one which is most appropriate for your module loader. For example, recent versions of webpack support ES module syntax, so you should use the lib/esm/ folder. This path is specified by the "module" field in package.json, which webpack uses by convention.

[terpimost]

Thank you for the fast reply. My question comes from having a similar issue #4112 (comment)

Case: Type Script is used, Babel isn't used, Webpack is used, arbitrary 3d party libraries are used.
Desire: to compile my project with target of es2017 using blueprint.
Problem: esnext of Blueprint is too advanced, so even Webpack can't understand it out of the box (that might be changed soon with optional chain operator support)

Solutions I have:

1. use another loader+plugin for Webpack like Babel – we don't want that since we are not targeting old browsers
2. compile Blueprint with "target": "ES2017" instead of "target": "es5" in tsconfig.base.json - sound like a fork for of the library just for 1 line

Both solutions are not looking good. What would be your recommendation?
I'm sorry to bother with such "not popular" case. I thought you might have situation like this. That's why I asked about source files right away.

[adidahiya]

Why do you need the es2017 version of Blueprint? Why not use the contents of the lib/esm/ folder (example js module)? Those files work with TypeScript + Webpack out of the box.

[terpimost]

Now that you asking, I'm suspicious if I did something wrong last time.
How should I force my webpack to use lib/esm if not just by using this line im line scripts?:
import {Button} from "@blueprintjs/core"

For example, recent versions of webpack support ES module syntax, so you should use the lib/esm/ folder. This path is specified by the "module" field in package.json, which webpack uses by convention.

Are you saying that I should add "module" field to the package.json of my project?

[adidahiya]

Are you saying that I should add "module" field to the package.json of my project?

No, sorry if this was unclear. The "module" field is specified by the libraries you depend on, like @blueprintjs/core. So you don't have to set this anywhere yourself. It's a cue for webpack to pick up the right entry point.

How should I force my webpack to use lib/esm if not just by using this line im line scripts?

It should "just work" out of the box with latest webpack. It depends on the rest of your build system and configuration. Are you using create-react-app? Do you have a repo on github you can demo with?