SolidJS•2y ago

Is there a polyfills.ts for `solid-start`? Or is there a way of modyfing the produced `index.html` ?

So, in the aws amplify framework there is a common bug, which all frameworks have to fix somehow: https://github.com/aws-amplify/amplify-js/issues/678 global is not defined One common solution is to add:

    <script>
      // aws-sdk requires global to exist
      var global = global || window;
    </script>

    <script>
      // aws-sdk requires global to exist
      var global = global || window;
    </script>

to the index.html, which is how I fixed this in good old solid-js. With solid-start we don't have an index.html any more and this variable needs to exist before the page is rendered (putting it into root.tsx is not enough.) Another common solution angular/svelte devs seem to use is to add the fix to a /src/polyfills.ts. Do we have something comparable in solid-start ?

1 Reply

BersaelorOP•2y ago

One other idea suggested was to add it to the vite.config.ts, but it didn't seem to make a difference for me

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

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

PS: the error occurs only with npm run dev when the site is loaded on the client. The npm run dev command succeeds fine and the error only shows in the browser console more on this: https://github.com/aws-amplify/amplify-js/issues/9639 (e.g. for Vue and react people have been able to fix it with

export default defineConfig({
  plugins: [vue()],
  define: {
    global: {},
  },

export default defineConfig({
  plugins: [vue()],
  define: {
    global: {},
  },

but that doesn't affect npm run dev for me at all in solid-start environment) The official Amplify documentation also mentions this for Vue ( https://ui.docs.amplify.aws/vue/getting-started/troubleshooting ) Where they say you have to put

  <script>
        window.global = window;
        var exports = {};
  </script>
</body>

  <script>
        window.global = window;
        var exports = {};
  </script>
</body>

into the index.html mhmm, the only thing that allowed me to continue working was to use patch-package and apply:

diff --git a/node_modules/solid-start/root/Scripts.tsx b/node_modules/solid-start/root/Scripts.tsx
index ea6dae4..19da2b5 100644
--- a/node_modules/solid-start/root/Scripts.tsx
+++ b/node_modules/solid-start/root/Scripts.tsx
@@ -23,6 +23,7 @@ export default function Scripts() {
           (isDev ? (
             <>
               <script type="module" src="/@vite/client" $ServerOnly></script>
+              <script> var global = global || window; </script>
               <script
                 type="module"
                 async

diff --git a/node_modules/solid-start/root/Scripts.tsx b/node_modules/solid-start/root/Scripts.tsx
index ea6dae4..19da2b5 100644
--- a/node_modules/solid-start/root/Scripts.tsx
+++ b/node_modules/solid-start/root/Scripts.tsx
@@ -23,6 +23,7 @@ export default function Scripts() {
           (isDev ? (
             <>
               <script type="module" src="/@vite/client" $ServerOnly></script>
+              <script> var global = global || window; </script>
               <script
                 type="module"
                 async

@thetarnav thats the only solution I found to edit the index.html so it turns out

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

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

worked. I just had a typo above. PS: Unfortunately, the global: {}, only works in dev, although it allows yarn build to succeed it'll trigger this.listeners.global is not a function at runtime

Gaming

Programming

Is there a polyfills.ts for `solid-start`? Or is there a way of modyfing the produced `index.html` ?