Skip to content

Commit 7499207

Browse files
fix(clerk-js): Fix globalObject for UMD packaging
Current our webpack-powered UMD packaging was setting `seld` as the output global object. Historically, accessing the global object has required different syntax in different JavaScript environments. On the web you can use window, self, or frames - but in Web Workers only self will work. In Node.js none of these work, and you must instead use global. The this keyword could be used inside functions running in non–strict mode, but this will be undefined in Modules and inside functions running in strict mode. You can also use Function('return this')(), but environments that disable eval(), like CSP in browsers, prevent use of Function in this way. This issue came up in Remix when ClerkJS is not hotloaded and should be bundled in the application. To fix it we use the globalThis property. The globalThis property provides a standard way of accessing the global this value (and hence the global object itself) across environments. Unlike similar properties such as window and self, it's guaranteed to work in window and non-window contexts. In this way, you can access the global object in a consistent manner without having to know which environment the code is being run in. More information at: - https://webpack.js.org/configuration/output/#outputglobalobject - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis
1 parent 06f8b37 commit 7499207

File tree

1 file changed

+1
-0
lines changed

1 file changed

+1
-0
lines changed

packages/clerk-js/webpack.dev.js

+1
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ const getProductionConfig = (mode = 'production') => {
3737
path: path.resolve(__dirname, 'dist'),
3838
filename: '[name].js',
3939
libraryTarget: 'umd',
40+
globalObject: 'globalThis',
4041
},
4142
};
4243
};

0 commit comments

Comments
 (0)