Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(nextjs): Add
transpileClientSDK
option (#5472)
As of version 7.0, our SDK publishes code which isn't natively compatible with older browsers (ones which can't handle ES6 or certain ES6+ features like object spread). If users control the build process of their apps, they can make sure that our SDK code is included in the transpilation they apply to their own code. In nextjs, however, the build process is controlled by the framework, and while users _can_ make modifications to it, they're modifying a webpack config they didn't create, making it a more challenging task. Fortunately, our SDK can also modify the build process, and that's what this PR does. Nextjs does its transpiling using a loader (either `next-babel-loader` or `next-swc-loader`, depending on the nextjs version), controlled by entries in the `module.rules` section of the webpack config. Normally this transpiling excludes all of `node_modules`, but we can make it not ignore the SDK by wrapping the `exclude` function so that it checks first for SDK code (and doesn't exclude it), before applying the normal checks. Notes: - In order to do the wrapping, we first have to find the correct `module.rules` entries. The default value of `module.rules` varies by nextjs version, so instead of looking in a known location, we look at all entries. In order to determine which ones to modify, we match on `test` (a regex for the type of file upon which the rule acts), `include` (a list of paths upon which the rule will act), and `loader` (the name of the module actually doing the transpiling). Any rule which would apply `next-babel-loader` or `next-swc-loader` to user files gets modified to also apply the loader to SDK code. - Because this is only a browser concern, this modification is only made during the client-side build. - This only applies to folks trying to support older browsers, and it noticeably increases bundle size, so it's an opt-in process, controlled by a new `next.config.js` option called `transpileClientSDK`. - While it would theoretically be possible to figure out which builds need this (someone with `target: 'es5'` in their `tsconfig` would be a good candidate, for example), the number of locations and ways in which a user can configure that is prohibitively large (a tsconfig with the default name, a tsconfig with a configured name, babel config in webpack config, babel config in `package.json`, babel config in a file with any one of [nine possible names](https://babeljs.io/docs/en/config-files), using a babel preset, using any of a number of different `target` values, and on and on and on). The option is thus only enabled if a user does so directly. - There will be a follow-up docs PR once this option is released in the SDK. This addresses part of #5452. Non-nextjs users will need to do a similar adjustment on their own, which we will also need to document.
- Loading branch information