FormidableLabs / spectacle

A React-based library for creating sleek presentations using JSX syntax that gives you the ability to live demo your code.
https://commerce.nearform.com/open-source/spectacle/
MIT License
9.74k stars 691 forks source link

SSR Support #868

Open Gabsii opened 4 years ago

Gabsii commented 4 years ago

Hello,

I am currently developing a server-side rendered app using NextJS that fetches data in the backend and then generates presentations based on this data. It would be great if I could use your library but unfortunately, I always run into the following error:

self is not defined
ReferenceError: self is not defined
    at Object.<anonymous> (/Users/lukasgabsi/Projects/sprint-slides-generator/node_modules/broadcastchannel-polyfill/index.js:85:4)
    at Module._compile (internal/modules/cjs/loader.js:816:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)
    at Module.load (internal/modules/cjs/loader.js:685:32)
    at Function.Module._load (internal/modules/cjs/loader.js:620:12)
    at Module.require (internal/modules/cjs/loader.js:723:19)
    at require (internal/modules/cjs/helpers.js:14:16)
    at Object.<anonymous> (/Users/lukasgabsi/Projects/sprint-slides-generator/node_modules/spectacle/lib/components/deck/presenter-deck.js:32:1)
    at Module._compile (internal/modules/cjs/loader.js:816:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)
    at Module.load (internal/modules/cjs/loader.js:685:32)
    at Function.Module._load (internal/modules/cjs/loader.js:620:12)
    at Module.require (internal/modules/cjs/loader.js:723:19)
    at require (internal/modules/cjs/helpers.js:14:16)
    at Object.<anonymous> (/Users/lukasgabsi/Projects/sprint-slides-generator/node_modules/spectacle/lib/components/deck/index.js:24:45)
    at Module._compile (internal/modules/cjs/loader.js:816:30)

I am aware of the solution that was discussed in #257 using a custom history object but I can't find anything about that in the docs. Is this still a thing in version 6? It would be great if SSR support was guaranteed out of the box.

Best regards!

kale-stew commented 4 years ago

We haven't explicitly introduced this to v6, but I will look into getting it re-introduced! Thank you for bringing this to our attention, @Gabsii

ryan-roemer commented 4 years ago

I have a WIP branch (https://github.com/FormidableLabs/spectacle/compare/feature/ssr) that just does SSR with:

# Build CJS stuff (or `yarn build` for everything)
$ yarn build-babel-cjs

# Output SSR content to stdout (currently breaks on SSR issues)
$ node scripts/ssr.js

Suggested work from here:

emulienfou commented 3 years ago

Hello, also trying to make this beautiful package working on Next.js, the main concern here would be related to the BroadcastChannel polyfill package.

Since this package seems to use self Spectacle cannot be used with Next.js unless we are using version 6.0.0-alpha.7 since this package has been introduced in 6.0.0-alpha.8.

Tried to use module-replace-webpack-plugin to replace the package with a custom one I made, this seems to not working.

Does anyone having a solution here?

Best regards!