Ui plugin throws "server crashed, window is not defined"

[PiTiLeZarD]

What's wrong?

It might be my misunderstanding of cosmos plugins, if it is, feel free to close this.

I'm coding a plugin that will use @axe-core/react on a click of a button. I've used react-cosmos-plugin-open-fixture as a template. The plugin axe throws a window is not defined exception.

Steps to reproduce

1. clone this: https://github.com/PiTiLeZarD/react-cosmos-plugin-axe
2. npm install && npm run build
3. ln -s this folder in the node_modules of the react cosmos
4. add "react-cosmos-plugin-axe" in the list of plugins in cosmos.config.json
5. cosmos broken

Useful info

cosmos 6.1.1 the server displays:

[Cosmos] Using cosmos config found at cosmos.config.json
[Cosmos] Server crashed...

  (╯°□°)╯︵ ┻━┻

ReferenceError: window is not defined
    at Object.<anonymous> (/Users/me/workspaces/react-cosmos-plugin-axe/node_modules/@axe-core/react/dist/index.js:100:13)
    at Module._compile (node:internal/modules/cjs/loader:1364:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1422:10)
    at Module.load (node:internal/modules/cjs/loader:1203:32)
    at Function.Module._load (node:internal/modules/cjs/loader:1019:12)
    at Module.require (node:internal/modules/cjs/loader:1231:19)
    at require (node:internal/modules/helpers:177:18)
    at Object.<anonymous> (/Users/me/workspaces/react-cosmos-plugin-axe/dist/ui.js:5:27)
    at Module._compile (node:internal/modules/cjs/loader:1364:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1422:10)

Additional context

I'm using parcel.

[ovidiuch]

Hi @PiTiLeZarD,

I think the problem is that your Cosmos plugin package entrypoint isn't pointing to cosmos.plugin.json like here: https://github.com/react-cosmos/react-cosmos/blob/71267f34230c703f89e58b12a87a25572c9cd5d8/packages/react-cosmos-plugin-open-fixture/package.json#L8

Let me know if replacing these lines with "main": "cosmos.plugin.json" fixes the issue.

---

You might also need to do something related to externals, meaning that your plugin should reuse the existing instances of react, react-dom and react-plugin of the Cosmos UI at run-time as explained here: https://reactcosmos.org/docs/plugins/ui-plugins#bundling.

[PiTiLeZarD]

Hey @ovidiuch ,

Thanks for answering and being helpful on that answer. After fiddling around I now have a build of a ui.js that seem to comply with what's required (I've pushed it in the same repository)

Now I'm butting against my lack of understanding of the plugin system I reckon.

I can log that the plugin is being registered but it never loads (onLoad is never called, the namedPlug function either) so I'm guessing rendererAction isn't the right named plug to add a button? seems like that's what the react-cosmos-plugin-open-fixture plugin was using but I might be missing something.

I'll have to dig in the source code eventually!

[PiTiLeZarD]

Just read I'm not supposed to bundle react/react-dom/react-plugin so I've added:

            "includeNodeModules": {
                "react": false,
                "react-dom": false,
                "react-plugin": false
            }

to my target, now I'm getting:

Failed to resolve module specifier "react/jsx-runtime".

Progress? maybe lol

[ovidiuch]

@PiTiLeZarD Did you manage to make any progress from your last comment?

I don't have experience with Parcel but I did a bit of googling and I think you need to change your setup to comply with the Bundling required for a Cosmos UI plugin.

Instead of includeNodeModules, I think you need to use Global Aliases to map react, react-dom and react-plugin to global instances attached to the global window object.

Also I don't think the outputFormat should be esmodule, I would try global instead.

I'm a bit busy these days which is why it took me two weeks to reply, but I'm more than happy to help so please continue to post your progress here.