How can I globally include preact/hooks in my application and use it in my extension?

435 Views Asked by At

I am building an application in typescript/preact, which features extensions that can be installed on demand. I use preact globally, so that not every extension includes it as a dependency, but I am having problems with accessing preact/hooks from an extension.

Preact is included as a global via a script tag in the main index.html file:

<script src="/assets/js/vendor/preact.min.js"></script>

I use webpack to build my main application, where I use the externals attribute to indicate that preact is already available.

externals: {
  preact: 'preact',
}

Extensions are included in the application by reading a list from a JSON API, and then dynamically loading their .js file, from which a global function will trigger a global function to register themselves.

I use microbundle to built the extension as a bundle file, where I indicate that preact is a global variable:

microbundle build --css external --globals preact=preact

So far, this works. The components are rendered properly, so no problems there. The problem is when I want to use the useState hook in a component. Normally in preact you import it by doing:

import { useState } from preact/hooks';

When I use load extension now, I get an error:

Uncaught (in promise) TypeError: o is undefined
    <anonymous> remote-server-control.umd.js:1
    H index.js:525
    N index.js:206
    g children.js:143
    $ index.js:422
    N index.js:257
    g children.js:143
    $ index.js:422
    N index.js:257
    g children.js:143
    $ index.js:422
    N index.js:257
    g children.js:143
    N index.js:223
    g children.js:143
    N index.js:223
    g children.js:143
    N index.js:223
    g children.js:143
    N index.js:223
    g children.js:143
    N index.js:223
    k component.js:128
    k component.js:218
    w component.js:206
    setState component.js:50
    __ Preact
    Redux 3
    P Preact
    Redux 4
    o utils.ts:11
    dispatch Redux
    C index.ts:223
    o utils.ts:8
    u Redux
    componentWillMount index.tsx:48
    N index.js:145
    g children.js:143
    N index.js:223
    g children.js:143
    N index.js:223
    g children.js:143
    N index.js:223
    g children.js:143
    N index.js:223
    g children.js:143
    N index.js:223
    g children.js:143
    N index.js:223
    g children.js:143
    N index.js:223
    g children.js:143
    N index.js:223
    g children.js:143
    N index.js:223
    g children.js:143
    N index.js:223
    g children.js:143
    N index.js:223
    g children.js:143
    N index.js:223
    g children.js:143
    N index.js:223
    g children.js:143
    N index.js:223
    g children.js:143
    N index.js:223
    g children.js:143
    N index.js:223
    g children.js:143
    N index.js:223
    g children.js:143
    N index.js:223
    I render.js:36
    <anonymous> App.tsx:37
    async* index.ts:29
    Webpack 5
remote-server-control.umd.js:1:622
Source map error: Error: JSON.parse: unexpected character at line 1 column 1 of the JSON data
Resource URL: http://localhost:3192/extensions/remote-server-control/assets/remote-server-control.umd.js
Source Map URL: remote-server-control.umd.js.map

I've validated that when I disable the import of the useState hook, the problem does not occur. Since the import of preact/hooks is the only change I make, my feeling is that it is related to this, and this is where I am stuck. How can I make preact/hooks available globally for extensions to use, so code is not duplicated in each extension?

I've tried to add it to the globals flag in the microbuild command, but no success.

microbundle build --css external --globals preact=preact,preact/hooks=preact/hooks
0

There are 0 best solutions below