SSR and GatsbyJS and jsdom about react-paperjs

[psychobolt]

This solution seems to work for build: gatsbyjs/gatsby#13219 (comment) . Have you tried it?

[amcc]

Thanks so much for the help here. This solves the jsdom issue. You also need @loadable/component to prevent build/ssr issues too.

Interestingly because we need named imports I couldn't use @loadable/component easily for the multiple named imports needed with this project (unless there's a trick i'm missing) so I made a component with react-paperjs normally then imported that component with @loadable/component. If there is a way to use @loadable/component or similar deferred loader directly with multiple named imports let me know.

Hope this helps someone else and thanks for the response....

For GatsbyJS - Create a component exactly like the documentation in this repo, add the code to gatsby-node.js as above, code below:

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === "build-html") {
    actions.setWebpackConfig({
      module: { rules: [{ test: /node_modules\/paper/, use: loaders.null() }] },
    });
  }
};

Import your react-paperjs component with @loadable/component as below:

const PaperComponent = loadable(
  async () => (await import("../components/Paper")).PaperComponent,
  {
    fallback: <>Loading...</>,
  }
);

You can then use it normally in things like Gatsby and Next with SSR.

I chose a named export/import for my react-paperjs component, but if its a default export the import is simpler, docs here: https://loadable-components.com/

@psychobolt if the above all sounds like reasonable instructions and info I hope its useful.

I made a simple gatsby starter site with the above code here:
https://github.com/amcc/gatsby-paper-fiber