SolidJS•2y ago

Pure client based page complaining about `window is not defined` in solid-start (No SSR needed)

Back when I was just working with solid.js I could use window in my code just fine, for. pages that are entirely client-rendered. With solid-start I use the solid-start-static for client based pages, like described in Alex' blog post https://dev.to/lexlohr/using-solid-start-with-github-pages-3iok .

export default defineConfig({
  plugins: [solid({ adapter: staticAdapter() })],
});

export default defineConfig({
  plugins: [solid({ adapter: staticAdapter() })],
});

But this way I still get Error when evaluating SSR module: window is not defined. How can I tell solid-start that I want a classic client-based SPA? (and no SSR needed)

20 Replies

BersaelorOP•2y ago

(similar for other client based global variables like localStorage). Do I have to wrap all this in if (!isServer) even though I never do SSr in this project? Specifically, I use the aws-amplify module for authentication with AWS Cognito, and internally it uses a bunch of global ,window and localStorage

thetarnav•2y ago

static adapter still does SSR, it's a normal SSR in dev and SSG at build to disable SSR you do { ssr: false } and then you don't need the static adapter, because you want only an empty .html file, not prerendered pages But imo it's better to leave ssr on, and just make sure the pages are rendered only on the client Then you can alvays opt-into SSR for some pages if you find the need, or at least SSR the app shell when youre separating isomorphic components from client-only, make sure to use Suspense + lazy to code-split and not load them on the server (tree-shaking doesn't work in dev) sth like this: https://github.com/thetarnav/mxyz-mark/blob/master/apps/solid-web/src/routes.tsx#L44

BersaelorOP•2y ago

yup, it works at build time, I just wanted to see my code run with yarn dev. The offending code sits in root.tsx the auth-switch should happen before any route is accessible, therefore I guess I'll turn SSR off using { ssr: false } i.e. regardless which route you load, if not signed in I show the signin-ui I also have SSR rendered pages, but at the moment they sit in a different project on a different subdomain as the SPA mhmm, when I do:

export default defineConfig({
  plugins: [solid({ ssr: false }), suidPlugin()],
});

export default defineConfig({
  plugins: [solid({ ssr: false }), suidPlugin()],
});

I still get Uncaught ReferenceError: global is not defined when fetching the site after running yarn dev. Where do you put the ssr: false @thetarnav ?

thetarnav•2y ago

what is global?

BersaelorOP•2y ago

some global variable that browsers have that AWS amplify uses deep in its internals

thetarnav•2y ago

well mine doesn't

BersaelorOP•2y ago

I imported aws amplify the same way I used to in my other solid.js projects, where it just worked only difference is that now I'm using solid-start

thetarnav•2y ago

I'm not sure is it still running on the server? if you log something will you see it logged by vite server?

BersaelorOP•2y ago

ah, it might be a polyfill problem, since AWS imported buffer and global is a node thing https://github.com/aws/aws-sdk-js/issues/2141 it's an ongoing issue I remember now, you have to hack global into your index.html

  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

    <script>
      // aws-sdk requires global to exist
      var global = global || window;
    </script>
    <script src="/src/index.tsx" type="module"></script>
  </body>
</html>

  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

    <script>
      // aws-sdk requires global to exist
      var global = global || window;
    </script>
    <script src="/src/index.tsx" type="module"></script>
  </body>
</html>

It's a fix I have to add to all aws amplify projects and I forgot that I did that since with solid-js I'm not using an index.html anymore same for all react projects using aws: https://github.com/aws-amplify/amplify-js/issues/678 do we have a polyfills.ts in solid-styart like react or angular have @thetarnav ?

thetarnav•2y ago

no idea I'm not actually sure how to modify the .html file with ssr disabled since it's supposed to be generated either at build or request

BersaelorOP•2y ago

let's close this one then and open a new more pertitant thread https://discord.com/channels/722131463138705510/1113405856416014389/1113405856416014389 @thetarnav mhmm if you say the .html file is created, there must be some way of modyfing the code that creates the .html to put this one-liner in there first dumb approach was modying entry-client.tsx with

import { mount, StartClient } from "solid-start/entry-client";

mount(() => <StartClient />, document);

var awsFix = document.createElement('script');
awsFix.setAttribute('src','http://example.com/site.js');
document.body.appendChild(awsFix);

import { mount, StartClient } from "solid-start/entry-client";

mount(() => <StartClient />, document);

var awsFix = document.createElement('script');
awsFix.setAttribute('src','http://example.com/site.js');
document.body.appendChild(awsFix);

(but that didn't work) also tried editing node_modules/solid-start/entry-client/mount.tsx but that doesn't really seem to affect the ouput of npm run dev either

Unknown User•2y ago

Message Not Public

BersaelorOP•2y ago

hey, so should be an /dist/server/index.mjs file

BersaelorOP•2y ago

in my case, for AWS, this is the code that runs server-side the client part are the static assets that go into some kind of storage the server part is the code that runs that generates the site the index.html is basically generated by node on the fly, it's not a static file that sits in a folder

Unknown User•2y ago

Message Not Public

BersaelorOP•2y ago

in my case (for AWS Lambda), the index.mjs has a .handler method, whose return value is a html response for an index.html

BersaelorOP•2y ago

i think then you should use the static adapter, like in this tutorial https://dev.to/lexlohr/using-solid-start-with-github-pages-3iok

DEV Community

Using Solid Start with GitHub pages

You may or may not yet have heard about Solid Start, which is the much anticipated upcoming meta...

BersaelorOP•2y ago

or, as I do too for a static page, just use

export default defineConfig({
  plugins: [solid({ ssr: false })],

export default defineConfig({
  plugins: [solid({ ssr: false })],

this folder looks very much like the solid-start default output, which is for node

Unknown User•2y ago

Message Not Public

BersaelorOP•2y ago

good idea, I mean this one was solved anyway 🙂

Gaming

Programming

Pure client based page complaining about `window is not defined` in solid-start (No SSR needed)