Browser targetting node_module packages

[rudfoss]

❔ Question

What is the correct approach for targeting specific browsers when bundling with parcel includes code from node_modules? Is it actually expected that the library authors should build for every browser combination and bundle that with their module?

🔦 Context

We have set up a component library (react components) that is compiled from TypeScript to JS with target es2017 to remove JSX. It does not transpile modern syntax for older browsers yet. In our project we are using this library and we wish to target IE 10-11, but none of the code within the component library is transpiled. I've read up on the source field and I've tried adding .babelrc and .browserslistrc to the component library in node_modules, but nothing works.

Refs:
#1037
#1101

💻 Code Sample

.babelrc in node_modules component lib

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["IE 10"]
      }
    }]
  ],
}

🌍 Your Environment

Software	Version(s)
Parcel	1.12.3
Node	10.13.0
npm/Yarn	1.13.0
Operating System	Windows 10 x64

[rob-mcgrail]

I'm also finding this extremely unclear - I am unable to build without "let" in my output, despite trying .babelrc, babel key in package.json, and browserslist key in package.json, a targets -> browser -> browserslist key in package.json, adding the --target browser flag etc..

There are a bunch of issues logged about this, none of which seem to have a clear explanation of how this should really work. The latest info in the docs on this, even has a comment on the saying "this isn't actually how it works" 😅 and the change just pulls out any mention of node_modules.

parcel-bundler/website#415

Some sort of example of the recommended way to change the browser requirements for a simple parcel project, and what code the configuration will be applied to, under what conditions, would be super useful for a lot of users I think.

[mischnic]

Closing this as a duplicate of #1655