CODEWITHSUNDEEP
webviewvisual-studio-codeelectronvscode-extensions
T.K.
T.K.

Reputation: 53

how to fix: "exports is not defined" & "require is not defined" error when importing package from vscode webview extension

I'm developing a vscode webview extension based on the CatCoding example.

I'm trying to import an external node_module from cdn using the tag. The package is loaded and I can use it, but in some of the imported functions there is an export of module and I get the following error: Uncaught ReferenceError: exports is not defined

I found out that someone has solved it by using the following "hack":
<script>var exports = {};</script>

So I tried it, and now I get kind of the same error about 'require':
Uncaught ReferenceError: require is not defined

I'm just trying to do simple packages import, not sure why it happens, probably because it runs as a webview, maybe because of electron?

Any idea how can I solve it?

Upvotes: 3

Views: 1276

Answers (1)

Matt Bierner
Matt Bierner

Reputation: 65263

The JavaScript package you are loading is using a module system, likely commonJS. The webview is just a normal webpage so you need to bring your own module support.

For this, you could use a bundler such as webpack or include a module loader such as RequireJs directly.

Upvotes: 1

Related Questions