search

unfolding-io / StarFunnel

the Astro powered landing page builder
https://starfunnel.unfolding.io/
Other
112 stars 61 forks source link

Cannot get site to run - Error with Plyr and SSR #2

Closed omeganot closed 4 months ago

omeganot commented 10 months ago

Hi, I came across this site for Astro recently from the Astro theme gallery, and tried to give it a go. I cloned the repository, followed instructions for editing the files and leaving blank any of the options I don't have, like MailChimp or a backend (yet), did npm install then npm run dev. Initially, everything looks good, but then trying to access the site I get a bunch of errors related to Plyr. It seems Plyr tries to access the document model and Astro throws a fit about it.

I have tried modifying components in the *.astro files to include client:only as well as adding onMounted to the vue imports, but nothing seems to work for me.

Ideally, I'd like to set this up to be entirely static so I could host it on GitHub Pages, but alas, I can't even get it to load to test it out and see if it's a template I could work with. Is there something I'm missing to get this site to run statically?

Output from the npm run dev and error on load are copied below.

Thanks for your help.

PS C:\Git\StarFunnel> npm run dev

> starfunnel@0.1.0 dev
> astro dev

   astro  v3.5.5 started in 2039ms

  ┃ Local    http://localhost:4321/
  ┃ Network  use --host to expose

10:57:55 AM [content] Watching src/content/ for changes
10:57:56 AM [content] Types generated
10:57:56 AM [astro] update /.astro/types.d.ts
10:58:05 AM [vite] Error when evaluating SSR module /src/components/dialog/VideoDialog.vue: failed to import "plyr"
|- ReferenceError: document is not defined
    at C:\Git\StarFunnel\node_modules\plyr\dist\plyr.js:302:21
    at C:\Git\StarFunnel\node_modules\plyr\dist\plyr.js:311:5
    at C:\Git\StarFunnel\node_modules\plyr\dist\plyr.js:2:83
    at Object.<anonymous> (C:\Git\StarFunnel\node_modules\plyr\dist\plyr.js:5:3)
    at Module._compile (node:internal/modules/cjs/loader:1375:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1434:10)
    at Module.load (node:internal/modules/cjs/loader:1206:32)
    at Module._load (node:internal/modules/cjs/loader:1022:12)
    at cjsLoader (node:internal/modules/esm/translators:358:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:307:7)

10:58:05 AM [vite] Error when evaluating SSR module /src/components/block/TextMedia.astro: failed to import "/src/components/dialog/VideoDialog.vue"
|- ReferenceError: document is not defined
    at C:\Git\StarFunnel\node_modules\plyr\dist\plyr.js:302:21
    at C:\Git\StarFunnel\node_modules\plyr\dist\plyr.js:311:5
    at C:\Git\StarFunnel\node_modules\plyr\dist\plyr.js:2:83
    at Object.<anonymous> (C:\Git\StarFunnel\node_modules\plyr\dist\plyr.js:5:3)
    at Module._compile (node:internal/modules/cjs/loader:1375:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1434:10)
    at Module.load (node:internal/modules/cjs/loader:1206:32)
    at Module._load (node:internal/modules/cjs/loader:1022:12)
    at cjsLoader (node:internal/modules/esm/translators:358:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:307:7)

10:58:05 AM [vite] Error when evaluating SSR module /src/components/block/Block.astro: failed to import "/src/components/block/TextMedia.astro"
|- ReferenceError: document is not defined
    at C:\Git\StarFunnel\node_modules\plyr\dist\plyr.js:302:21
    at C:\Git\StarFunnel\node_modules\plyr\dist\plyr.js:311:5
    at C:\Git\StarFunnel\node_modules\plyr\dist\plyr.js:2:83
    at Object.<anonymous> (C:\Git\StarFunnel\node_modules\plyr\dist\plyr.js:5:3)
    at Module._compile (node:internal/modules/cjs/loader:1375:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1434:10)
    at Module.load (node:internal/modules/cjs/loader:1206:32)
    at Module._load (node:internal/modules/cjs/loader:1022:12)
    at cjsLoader (node:internal/modules/esm/translators:358:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:307:7)

10:58:05 AM [vite] Error when evaluating SSR module /src/layouts/PageLayoutFunnel.astro: failed to import "/src/components/block/Block.astro"
|- ReferenceError: document is not defined
    at C:\Git\StarFunnel\node_modules\plyr\dist\plyr.js:302:21
    at C:\Git\StarFunnel\node_modules\plyr\dist\plyr.js:311:5
    at C:\Git\StarFunnel\node_modules\plyr\dist\plyr.js:2:83
    at Object.<anonymous> (C:\Git\StarFunnel\node_modules\plyr\dist\plyr.js:5:3)
    at Module._compile (node:internal/modules/cjs/loader:1375:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1434:10)
    at Module.load (node:internal/modules/cjs/loader:1206:32)
    at Module._load (node:internal/modules/cjs/loader:1022:12)
    at cjsLoader (node:internal/modules/esm/translators:358:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:307:7)

10:58:05 AM [vite] Error when evaluating SSR module C:/Git/StarFunnel/src/pages/[...slug].astro: failed to import "/src/layouts/PageLayoutFunnel.astro"
|- ReferenceError: document is not defined
    at C:\Git\StarFunnel\node_modules\plyr\dist\plyr.js:302:21
    at C:\Git\StarFunnel\node_modules\plyr\dist\plyr.js:311:5
    at C:\Git\StarFunnel\node_modules\plyr\dist\plyr.js:2:83
    at Object.<anonymous> (C:\Git\StarFunnel\node_modules\plyr\dist\plyr.js:5:3)
    at Module._compile (node:internal/modules/cjs/loader:1375:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1434:10)
    at Module.load (node:internal/modules/cjs/loader:1206:32)
    at Module._load (node:internal/modules/cjs/loader:1022:12)
    at cjsLoader (node:internal/modules/esm/translators:358:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:307:7)

 error   document is not defined
  Hint:
    Browser APIs are not available on the server.

    If the code is in a framework component, try to access these objects after rendering using lifecycle methods or use a `client:only` directive to make the component exclusively run on the client.

    See https://docs.astro.build/en/guides/troubleshooting/#document-or-window-is-not-defined for more information.

  File:
    C:\Git\StarFunnel\node_modules\plyr\dist\plyr.js:302:21
  Code:
    301 |   const transitionEndEvent = (() => {
    > 302 |     const element = document.createElement('span');
          |                     ^
      303 |     const events = {
      304 |       WebkitTransition: 'webkitTransitionEnd',
      305 |       MozTransition: 'transitionend',
  Stacktrace:
ReferenceError: document is not defined
    at C:\Git\StarFunnel\node_modules\plyr\dist\plyr.js:302:21
    at C:\Git\StarFunnel\node_modules\plyr\dist\plyr.js:311:5
    at C:\Git\StarFunnel\node_modules\plyr\dist\plyr.js:2:83
    at Object.<anonymous> (C:\Git\StarFunnel\node_modules\plyr\dist\plyr.js:5:3)
    at Module._compile (node:internal/modules/cjs/loader:1375:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1434:10)
    at Module.load (node:internal/modules/cjs/loader:1206:32)
    at Module._load (node:internal/modules/cjs/loader:1022:12)
    at cjsLoader (node:internal/modules/esm/translators:358:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:307:7)

 error   document is not defined
  Hint:
    Browser APIs are not available on the server.

    If the code is in a framework component, try to access these objects after rendering using lifecycle methods or use a `client:only` directive to make the component exclusively run on the client.

    See https://docs.astro.build/en/guides/troubleshooting/#document-or-window-is-not-defined for more information.

  File:
    C:\Git\StarFunnel\node_modules\plyr\dist\plyr.js:302:21
  Code:
    301 |   const transitionEndEvent = (() => {
    > 302 |     const element = document.createElement('span');
          |                     ^
      303 |     const events = {
      304 |       WebkitTransition: 'webkitTransitionEnd',
      305 |       MozTransition: 'transitionend',
  Stacktrace:
ReferenceError: document is not defined
    at C:\Git\StarFunnel\node_modules\plyr\dist\plyr.js:302:21
    at C:\Git\StarFunnel\node_modules\plyr\dist\plyr.js:311:5
    at C:\Git\StarFunnel\node_modules\plyr\dist\plyr.js:2:83
    at Object.<anonymous> (C:\Git\StarFunnel\node_modules\plyr\dist\plyr.js:5:3)
    at Module._compile (node:internal/modules/cjs/loader:1375:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1434:10)
    at Module.load (node:internal/modules/cjs/loader:1206:32)
    at Module._load (node:internal/modules/cjs/loader:1022:12)
    at cjsLoader (node:internal/modules/esm/translators:358:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:307:7)
 (x2)
preetamslot commented 10 months ago

hi @omeganot,

can you share your astro.config?

omeganot commented 10 months ago

Hi there, @preetamslot, thanks for the reply. I've pasted my config below. The only change made from the source is the website URL.

astro.config

import { defineConfig } from "astro/config";
import { astroImageTools } from "astro-imagetools";

import mdx from "@astrojs/mdx";
import m2dx from "astro-m2dx";
import sitemap from "@astrojs/sitemap";
import tailwind from "@astrojs/tailwind";
import rehypeExternalLinks from "rehype-external-links";
import fauxRemarkEmbedder from "@remark-embedder/core";
import fauxOembedTransformer from "@remark-embedder/transformer-oembed";
const remarkEmbedder = fauxRemarkEmbedder.default;
const oembedTransformer = fauxOembedTransformer.default;
import vue from "@astrojs/vue";
/** @type {import('astro-m2dx').Options} */
import prefetch from "@astrojs/prefetch";
import compress from "astro-compress";
const m2dxOptions = {
  exportComponents: true,
  unwrapImages: true,
  autoImports: true,
};

// https://astro.build/config
export default defineConfig({
  site: "https://test.com",
  integrations: [
    mdx({}),
    sitemap(),
    tailwind(),
    vue({
      appEntrypoint: "/src/pages/_app",
    }),
    astroImageTools,
    /* prefetch(), */
    compress({
      CSS: true,
      HTML: false,
      Image: false,
      JavaScript: true,
      SVG: true,
    }),
  ],
  markdown: {
    extendDefaultPlugins: true,
    remarkPlugins: [
      [
        remarkEmbedder,
        {
          transformers: [oembedTransformer],
        },
      ],
      [m2dx, m2dxOptions],
    ],
    rehypePlugins: [
      [
        rehypeExternalLinks,
        {
          rel: ["nofollow"],
          target: ["_blank"],
        },
      ],
    ],
  },
  vite: {
    build: {
      rollupOptions: {
        external: [],
      },
      assetsInlineLimit: 10096,
    },
  },
  build: {
    inlineStylesheets: "always",
  },
  scopedStyleStrategy: "attribute",
});
omeganot commented 10 months ago

I also tried a build just to see if I could get past running it in dev mode. Same error it seems. Here's the output from npm run build

PS C:\Git\StarFunnel> npm run build

> starfunnel@0.1.0 build
> astro build

07:41:45 PM [content] Types generated 391ms
07:41:45 PM [build] output target: static
07:41:45 PM [build] Collecting build info...
07:41:45 PM [build] Completed in 505ms.
07:41:45 PM [build] Building static entrypoints...
node_modules/astro-icon/lib/utils.ts (2:9) "Props" is not exported by "node_modules/astro-icon/lib/Props.ts", imported by "node_modules/astro-icon/lib/utils.ts".
node_modules/astro-icon/lib/utils.ts (2:16) "Optimize" is not exported by "node_modules/astro-icon/lib/Props.ts", imported by "node_modules/astro-icon/lib/utils.ts".
07:41:49 PM [build] Completed in 3.60s.

 building client
vite v4.4.9 building for production...
✓ 96 modules transformed.
dist/_astro/_slug_.795f5a90.css                                                 0.08 kB │ gzip:  0.08 kB
dist/_astro/_page_.2a11869f.css                                                54.21 kB │ gzip:  8.48 kB
dist/_astro/_plugin-vue_export-helper.c27b6911.js                               0.09 kB │ gzip:  0.10 kB
dist/_astro/index.0e0ab53f.js                                                   0.16 kB │ gzip:  0.15 kB
dist/_astro/hoisted.8c795ab9.js                                                 0.25 kB │ gzip:  0.22 kB
dist/_astro/BackgroundImage.astro_astro_type_script_index_0_lang.06d8a163.js    0.66 kB │ gzip:  0.46 kB
dist/_astro/store.ac37cfed.js                                                   0.71 kB │ gzip:  0.39 kB
dist/_astro/VideoDialogBtn.9ad29ded.js                                          0.73 kB │ gzip:  0.48 kB
dist/_astro/ColorSwitch.f59bac12.js                                             0.93 kB │ gzip:  0.64 kB
dist/_astro/client.a41e2121.js                                                  1.00 kB │ gzip:  0.62 kB
dist/_astro/VideoInline.20b47f01.js                                             1.30 kB │ gzip:  0.78 kB
dist/_astro/ImageNav.14af0e0b.js                                                1.83 kB │ gzip:  0.94 kB
dist/_astro/Dialog.ee3dafae.js                                                  2.45 kB │ gzip:  1.32 kB
dist/_astro/NavMobile.4d32b550.js                                               2.66 kB │ gzip:  1.40 kB
dist/_astro/bodyScrollLock.esm.9ceb8365.js                                      3.07 kB │ gzip:  1.18 kB
dist/_astro/FaqItem.08fd1be0.js                                                 3.10 kB │ gzip:  1.49 kB
dist/_astro/Init.76e1a3ec.js                                                    3.22 kB │ gzip:  1.49 kB
dist/_astro/NewsletterFooter.838b3ea8.js                                        3.32 kB │ gzip:  1.70 kB
dist/_astro/Intersecting.5dc195fa.js                                            3.59 kB │ gzip:  1.78 kB
dist/_astro/index.3f3e554b.js                                                   3.64 kB │ gzip:  1.69 kB
dist/_astro/Popup.1853cd87.js                                                   4.01 kB │ gzip:  1.91 kB
dist/_astro/index.13f1b094.js                                                   5.59 kB │ gzip:  2.53 kB
dist/_astro/translate.0c697665.js                                               5.86 kB │ gzip:  2.71 kB
dist/_astro/Newsletter.abac352a.js                                              6.15 kB │ gzip:  2.53 kB
dist/_astro/Contact.d3f80ee2.js                                                 6.49 kB │ gzip:  2.65 kB
dist/_astro/hoisted.fa62650e.js                                                 9.22 kB │ gzip:  3.42 kB
dist/_astro/Auth.51f133a9.js                                                    9.50 kB │ gzip:  3.80 kB
dist/_astro/PanZoom.74ab1105.js                                                10.98 kB │ gzip:  4.26 kB
dist/_astro/runtime-dom.esm-bundler.51f5de7e.js                                11.56 kB │ gzip:  5.09 kB
dist/_astro/Loading.6231cc43.js                                                19.20 kB │ gzip:  6.45 kB
dist/_astro/index.91e266f0.js                                                  20.08 kB │ gzip:  6.93 kB
dist/_astro/popper.esm.413fffca.js                                             26.63 kB │ gzip:  9.67 kB
dist/_astro/runtime-core.esm-bundler.36ba88c4.js                               59.91 kB │ gzip: 23.87 kB
dist/_astro/VideoDialog.f1b88166.js                                           114.45 kB │ gzip: 34.42 kB
✓ built in 1.37s
Completed in 1.38s.

 generating static routes
C:\Git\StarFunnel\node_modules\plyr\dist\plyr.js:302
    const element = document.createElement('span');
                    ^

ReferenceError: document is not defined
    at C:\Git\StarFunnel\node_modules\plyr\dist\plyr.js:302:21
    at C:\Git\StarFunnel\node_modules\plyr\dist\plyr.js:311:5
    at C:\Git\StarFunnel\node_modules\plyr\dist\plyr.js:2:83
    at Object.<anonymous> (C:\Git\StarFunnel\node_modules\plyr\dist\plyr.js:5:3)
    at Module._compile (node:internal/modules/cjs/loader:1375:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1434:10)
    at Module.load (node:internal/modules/cjs/loader:1206:32)
    at Module._load (node:internal/modules/cjs/loader:1022:12)
    at cjsLoader (node:internal/modules/esm/translators:358:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:307:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)
    at async generatePage (file:///C:/Git/StarFunnel/node_modules/astro/dist/core/build/generate.js:228:22)
    at async generatePages (file:///C:/Git/StarFunnel/node_modules/astro/dist/core/build/generate.js:167:9)
    at async staticBuild (file:///C:/Git/StarFunnel/node_modules/astro/dist/core/build/static-build.js:88:7)
    at async AstroBuilder.build (file:///C:/Git/StarFunnel/node_modules/astro/dist/core/build/index.js:134:5)
    at async AstroBuilder.run (file:///C:/Git/StarFunnel/node_modules/astro/dist/core/build/index.js:165:7)
    at async build (file:///C:/Git/StarFunnel/node_modules/astro/dist/core/build/index.js:44:3)
    at async build (file:///C:/Git/StarFunnel/node_modules/astro/dist/cli/build/index.js:21:3)
    at async runCommand (file:///C:/Git/StarFunnel/node_modules/astro/dist/cli/index.js:116:7)
    at async cli (file:///C:/Git/StarFunnel/node_modules/astro/dist/cli/index.js:144:5)

Node.js v21.5.0
preetamslot commented 9 months ago

Sorry for the late reply, I can't replicate the bug :( Normally the payer script is run client side, it should not run on the server.

A couple of questions:

omeganot commented 9 months ago

Hi @preetamslot

Good to know I'm not the only one. :) Thanks for the reply!

I've encountered this with both minor changes in config files as referenced in the instructions and no other structural, package, or content changes, as well as a fresh copy from the repo with no changes at all.

I'm running locally to test that I can get it to run before updating with my own content. So pretty much npm install and npm run dev only. Couldn't build it either as referenced in my last comment. No vercel, netlify, etc. All local to my machine.

Node version is 21.5.0.

OS is Win 11. I could try in Ubuntu or DietPi (Debian) if that would be helpful.

preetamslot commented 9 months ago

I have a sticky t, I tried to say that I can't replicate it. I also work on windows 11.

steps I took:

At my end all is working. so I am at a dead end here, Have used plyr before and it never gave me problems.

I will update all dependencies tomorrow, maybe this will help.

preetamslot commented 9 months ago

@omeganot I have upgraded all dependencies, can you check if this helped?

omeganot commented 9 months ago

Unfortunately, still no go on my side with the updated dependencies. Steps I took:

When first trying to navigate to http://localhost:4321 it runs into the same crash with plyr. Much less information in the console (with the upgraded version of Astro, I'm guessing) but the stack trace in the browser is the same. For some reason it's that document.createElement('span'); line which is throwing the error, because it doesn't exist yet. There are plenty of DOM model calls in other packages, so I'm not sure why this one is having troubles. One thing going through my mind is, is there something you and I have configured differently from a global perspective that allows this to operate for you but not for me? I haven't changed, well, anything that I can think of, with node. I only installed it recently to experiment with Astro. Is there something I should be doing to explicitly force SSR to be disabled? Or perhaps it's when the script components for plyr are getting loaded that is throwing the issue?

Here's the terminal output from npm run dev:

PS D:\Git\website\StarFunnel> npm run dev

> starfunnel@0.1.0 dev
> astro dev

 astro  v4.1.2 ready in 1447 ms

┃ Local    http://localhost:4321/
┃ Network  use --host to expose

10:45:47 watching for file changes...
10:45:52 [astro-icon] Loaded icons from src/icons
10:45:52 [ERROR] document is not defined
  Hint:
    Browser APIs are not available on the server.

    If the code is in a framework component, try to access these objects after rendering using lifecycle methods or use a `client:only` directive to make the component exclusively run on the client.

    See https://docs.astro.build/en/guides/troubleshooting/#document-or-window-is-not-defined for more information.

  Stack trace:
    at D:\Git\website\StarFunnel\node_modules\plyr\dist\plyr.js:302:21
    [...] See full stack trace in the browser, or rerun with --verbose.
10:45:52 [ERROR] document is not defined
  Hint:
    Browser APIs are not available on the server.

    If the code is in a framework component, try to access these objects after rendering using lifecycle methods or use a `client:only` directive to make the component exclusively run on the client.

    See https://docs.astro.build/en/guides/troubleshooting/#document-or-window-is-not-defined for more information.

  Stack trace:
    at D:\Git\website\StarFunnel\node_modules\plyr\dist\plyr.js:302:21
    [...] See full stack trace in the browser, or rerun with --verbose.

And the stack trace:

ReferenceError: document is not defined
    at D:\Git\website\StarFunnel\node_modules\plyr\dist\plyr.js:302:21
    at D:\Git\website\StarFunnel\node_modules\plyr\dist\plyr.js:311:5
    at D:\Git\website\StarFunnel\node_modules\plyr\dist\plyr.js:2:83
    at Object.<anonymous> (D:\Git\website\StarFunnel\node_modules\plyr\dist\plyr.js:5:3)
    at Module._compile (node:internal/modules/cjs/loader:1375:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1434:10)
    at Module.load (node:internal/modules/cjs/loader:1206:32)
    at Module._load (node:internal/modules/cjs/loader:1022:12)
    at cjsLoader (node:internal/modules/esm/translators:358:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:307:7)

I tried npm run build as well, just to see if building and not running as a dev environment would change anything. Still no dice. Here's the output from the terminal:

PS D:\Git\website\StarFunnel> npm run build

> starfunnel@0.1.0 build
> astro build

10:48:28 Types generated 275ms
10:48:28 [build] output: "static"
10:48:28 [build] directory: D:\Git\website\StarFunnel\dist\
10:48:28 [build] Collecting build info...
10:48:28 [build] ✓ Completed in 371ms.
10:48:28 [build] Building static entrypoints...
10:48:31 [astro-icon] Loaded icons from src/icons
10:48:31 [build] ✓ Completed in 3.09s.

 building client (vite)
10:48:32 [vite] ✓ 103 modules transformed.
10:48:32 [vite] dist/_astro/_slug_.A6uToAdl.css                                                 0.08 kB │ gzip:  0.08 kB
10:48:32 [vite] dist/_astro/_page_.u2pbWBy5.css                                                54.57 kB │ gzip:  8.53 kB
10:48:32 [vite] dist/_astro/page.1HQVevR_.js                                                    0.04 kB │ gzip:  0.06 kB
10:48:32 [vite] dist/_astro/_plugin-vue_export-helper.x3n3nnut.js                               0.09 kB │ gzip:  0.10 kB
10:48:32 [vite] dist/_astro/index.VcTwwXgK.js                                                   0.14 kB │ gzip:  0.14 kB
10:48:32 [vite] dist/_astro/hoisted.P65ciBZm.js                                                 0.28 kB │ gzip:  0.23 kB
10:48:32 [vite] dist/_astro/BackgroundImage.astro_astro_type_script_index_0_lang.AeX0PW1V.js    0.66 kB │ gzip:  0.46 kB
10:48:32 [vite] dist/_astro/store.q2AZ-L3y.js                                                   0.71 kB │ gzip:  0.39 kB
10:48:32 [vite] dist/_astro/VideoDialogBtn.BbV-FmAS.js                                          0.71 kB │ gzip:  0.47 kB
10:48:32 [vite] dist/_astro/ColorSwitch.i-JCSLcO.js                                             0.92 kB │ gzip:  0.62 kB
10:48:32 [vite] dist/_astro/client.TMOLp_5m.js                                                  1.02 kB │ gzip:  0.64 kB
10:48:32 [vite] dist/_astro/VideoInline.0cEZP0nT.js                                             1.28 kB │ gzip:  0.76 kB
10:48:32 [vite] dist/_astro/ImageNav.xhpkQAy2.js                                                1.81 kB │ gzip:  0.92 kB
10:48:32 [vite] dist/_astro/index.Rsbe36MM.js                                                   2.27 kB │ gzip:  1.01 kB
10:48:32 [vite] dist/_astro/Dialog.4RkJW6-X.js                                                  2.39 kB │ gzip:  1.29 kB
10:48:32 [vite] dist/_astro/NavMobile.jKSxh1BI.js                                               2.59 kB │ gzip:  1.37 kB
10:48:32 [vite] dist/_astro/FaqItem.joOC0In1.js                                                 3.03 kB │ gzip:  1.46 kB
10:48:32 [vite] dist/_astro/bodyScrollLock.esm.a4TrNjfc.js                                      3.07 kB │ gzip:  1.18 kB
10:48:32 [vite] dist/_astro/Init.OnQsWYL9.js                                                    3.20 kB │ gzip:  1.47 kB
10:48:32 [vite] dist/_astro/NewsletterFooter.vO2yGims.js                                        3.20 kB │ gzip:  1.65 kB
10:48:32 [vite] dist/_astro/Intersecting.-f6QdFA7.js                                            3.57 kB │ gzip:  1.76 kB
10:48:32 [vite] dist/_astro/index.Vy0Kc_-J.js                                                   3.77 kB │ gzip:  1.73 kB
10:48:32 [vite] dist/_astro/Popup.768PEO5H.js                                                   3.90 kB │ gzip:  1.87 kB
10:48:32 [vite] dist/_astro/index.OwMSfaFG.js                                                   5.63 kB │ gzip:  2.54 kB
10:48:32 [vite] dist/_astro/translate.zotW-dlL.js                                               5.97 kB │ gzip:  2.80 kB
10:48:32 [vite] dist/_astro/Newsletter.i_jXDXU4.js                                              6.02 kB │ gzip:  2.49 kB
10:48:32 [vite] dist/_astro/Contact.FUl1vQsy.js                                                 6.37 kB │ gzip:  2.60 kB
10:48:32 [vite] dist/_astro/Auth.2oKfVXNe.js                                                    9.38 kB │ gzip:  3.76 kB
10:48:32 [vite] dist/_astro/hoisted.WsiOgoLw.js                                                10.22 kB │ gzip:  3.64 kB
10:48:32 [vite] dist/_astro/PanZoom.Np7HUzam.js                                                10.97 kB │ gzip:  4.24 kB
10:48:32 [vite] dist/_astro/Loading.k5Ahhmhj.js                                                19.15 kB │ gzip:  6.41 kB
10:48:32 [vite] dist/_astro/popper.esm.dNQ9yJlC.js                                             26.56 kB │ gzip:  9.64 kB
10:48:32 [vite] dist/_astro/index.keoqvHKI.js                                                  94.75 kB │ gzip: 35.97 kB
10:48:32 [vite] dist/_astro/VideoDialog.XHnUWOOn.js                                           114.38 kB │ gzip: 34.39 kB
10:48:32 [vite] ✓ built in 1.06s
D:\Git\website\StarFunnel\node_modules\plyr\dist\plyr.js:302
    const element = document.createElement('span');
                    ^

ReferenceError: document is not defined
    at D:\Git\website\StarFunnel\node_modules\plyr\dist\plyr.js:302:21
    at D:\Git\website\StarFunnel\node_modules\plyr\dist\plyr.js:311:5
    at D:\Git\website\StarFunnel\node_modules\plyr\dist\plyr.js:2:83
    at Object.<anonymous> (D:\Git\website\StarFunnel\node_modules\plyr\dist\plyr.js:5:3)
    at Module._compile (node:internal/modules/cjs/loader:1375:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1434:10)
    at Module.load (node:internal/modules/cjs/loader:1206:32)
    at Module._load (node:internal/modules/cjs/loader:1022:12)
    at cjsLoader (node:internal/modules/esm/translators:358:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:307:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)
    at async generatePages (file:///D:/Git/website/StarFunnel/node_modules/astro/dist/core/build/generate.js:106:23)
    at async staticBuild (file:///D:/Git/website/StarFunnel/node_modules/astro/dist/core/build/static-build.js:96:7)
    at async AstroBuilder.build (file:///D:/Git/website/StarFunnel/node_modules/astro/dist/core/build/index.js:138:5)
    at async AstroBuilder.run (file:///D:/Git/website/StarFunnel/node_modules/astro/dist/core/build/index.js:169:7)
    at async build (file:///D:/Git/website/StarFunnel/node_modules/astro/dist/core/build/index.js:47:3)
    at async build (file:///D:/Git/website/StarFunnel/node_modules/astro/dist/cli/build/index.js:20:3)
    at async runCommand (file:///D:/Git/website/StarFunnel/node_modules/astro/dist/cli/index.js:121:7)
    at async cli (file:///D:/Git/website/StarFunnel/node_modules/astro/dist/cli/index.js:149:5)

Node.js v21.5.0
PS D:\Git\website\StarFunnel>
nullr00tbyte commented 9 months ago

I have the same error but when i try in my windows is working fine, i only get the same error when i boot on my linux dist

preetamslot commented 9 months ago

So this error only happens on Linux if you run dev? What puzzles me is that the build works on netlify. I saw the pull request, the downside of client:only is that all the scripts are loaded on page load, so this will impact page speed.

I would like to find an other solution. Will investigate.

Thanks

nullr00tbyte commented 8 months ago

Sorry, for some reason this only happens when you run "npm run dev" in a visual studio code terminal

omeganot commented 8 months ago

Sorry, for some reason this only happens when you run "npm run dev" in a visual studio code terminal

This got me thinking about the console environment. I wasn't running in Visual Studio Code Terminal, but in the Terminal app on Windows in a Windows PowerShell window. I believe the default terminal for VS Code is also PowerShell, so perhaps building it on Linux would work. I opened an Ubuntu shell, gave it a try, and still have the error.

:/mnt/d/Git/website/StarFunnel$ npm run build

> starfunnel@0.1.0 build
> astro build

14:17:23 Types generated 521ms
14:17:23 [build] output: "static"
14:17:23 [build] directory: D:\Git\website\StarFunnel\dist\
14:17:23 [build] Collecting build info...
14:17:23 [build] ✓ Completed in 659ms.
14:17:23 [build] Building static entrypoints...
14:17:27 [astro-icon] Loaded icons from src/icons
14:17:27 [build] ✓ Completed in 3.65s.

 building client (vite)
14:17:28 [vite] ✓ 103 modules transformed.
14:17:28 [vite] dist/_astro/_slug_.A6uToAdl.css                                                 0.08 kB │ gzip:  0.08 kB
14:17:28 [vite] dist/_astro/_page_.6GG3AFvV.css                                                54.57 kB │ gzip:  8.53 kB
14:17:28 [vite] dist/_astro/page.1HQVevR_.js                                                    0.04 kB │ gzip:  0.06 kB
14:17:28 [vite] dist/_astro/_plugin-vue_export-helper.x3n3nnut.js                               0.09 kB │ gzip:  0.10 kB
14:17:28 [vite] dist/_astro/index.BmMZ1-2Q.js                                                   0.14 kB │ gzip:  0.14 kB
14:17:28 [vite] dist/_astro/hoisted.P65ciBZm.js                                                 0.28 kB │ gzip:  0.23 kB
14:17:28 [vite] dist/_astro/BackgroundImage.astro_astro_type_script_index_0_lang.AeX0PW1V.js    0.66 kB │ gzip:  0.46 kB
14:17:28 [vite] dist/_astro/store.q2AZ-L3y.js                                                   0.71 kB │ gzip:  0.39 kB
14:17:28 [vite] dist/_astro/VideoDialogBtn.8IIGUS_K.js                                          0.71 kB │ gzip:  0.47 kB
14:17:28 [vite] dist/_astro/ColorSwitch.K-eBrgfS.js                                             0.92 kB │ gzip:  0.62 kB
14:17:28 [vite] dist/_astro/client.3d9gRNEj.js                                                  1.02 kB │ gzip:  0.64 kB
14:17:28 [vite] dist/_astro/VideoInline.2mqulibo.js                                             1.28 kB │ gzip:  0.76 kB
14:17:28 [vite] dist/_astro/ImageNav.GiXJ8hke.js                                                1.81 kB │ gzip:  0.92 kB
14:17:28 [vite] dist/_astro/index.Rsbe36MM.js                                                   2.27 kB │ gzip:  1.01 kB
14:17:28 [vite] dist/_astro/Dialog.yPawOGj9.js                                                  2.39 kB │ gzip:  1.29 kB
14:17:28 [vite] dist/_astro/NavMobile.xkIG-61c.js                                               2.59 kB │ gzip:  1.37 kB
14:17:28 [vite] dist/_astro/FaqItem.7IA_EYDd.js                                                 3.03 kB │ gzip:  1.46 kB
14:17:28 [vite] dist/_astro/bodyScrollLock.esm.a4TrNjfc.js                                      3.07 kB │ gzip:  1.18 kB
14:17:28 [vite] dist/_astro/Init.XcKwkxvZ.js                                                    3.20 kB │ gzip:  1.47 kB
14:17:28 [vite] dist/_astro/NewsletterFooter.de7xIf6r.js                                        3.20 kB │ gzip:  1.65 kB
14:17:28 [vite] dist/_astro/Intersecting.ib6zf8IQ.js                                            3.57 kB │ gzip:  1.76 kB
14:17:28 [vite] dist/_astro/index.xVyNwJ0b.js                                                   3.77 kB │ gzip:  1.73 kB
14:17:28 [vite] dist/_astro/Popup.C9QB0AnK.js                                                   3.90 kB │ gzip:  1.87 kB
14:17:28 [vite] dist/_astro/index.SyUjX4YV.js                                                   5.63 kB │ gzip:  2.54 kB
14:17:28 [vite] dist/_astro/translate.zotW-dlL.js                                               5.97 kB │ gzip:  2.80 kB
14:17:28 [vite] dist/_astro/Newsletter.LOtmt9uM.js                                              6.02 kB │ gzip:  2.49 kB
14:17:28 [vite] dist/_astro/Contact.rbATRGRT.js                                                 6.37 kB │ gzip:  2.60 kB
14:17:28 [vite] dist/_astro/Auth.twfRFs63.js                                                    9.38 kB │ gzip:  3.76 kB
14:17:28 [vite] dist/_astro/hoisted.WsiOgoLw.js                                                10.22 kB │ gzip:  3.64 kB
14:17:28 [vite] dist/_astro/PanZoom.JmxjcEZ-.js                                                10.97 kB │ gzip:  4.25 kB
14:17:28 [vite] dist/_astro/Loading.Q5B_rDUx.js                                                19.15 kB │ gzip:  6.41 kB
14:17:28 [vite] dist/_astro/popper.esm.JXy-lqDN.js                                             26.56 kB │ gzip:  9.64 kB
14:17:28 [vite] dist/_astro/index.UqZ-y01y.js                                                  94.75 kB │ gzip: 35.97 kB
14:17:28 [vite] dist/_astro/VideoDialog.MetdBE9N.js                                           114.38 kB │ gzip: 34.39 kB
14:17:28 [vite] ✓ built in 1.21s
D:\Git\website\StarFunnel\node_modules\plyr\dist\plyr.js:302
    const element = document.createElement('span');
                    ^

ReferenceError: document is not defined
    at D:\Git\website\StarFunnel\node_modules\plyr\dist\plyr.js:302:21
    at D:\Git\website\StarFunnel\node_modules\plyr\dist\plyr.js:311:5
    at D:\Git\website\StarFunnel\node_modules\plyr\dist\plyr.js:2:83
    at Object.<anonymous> (D:\Git\website\StarFunnel\node_modules\plyr\dist\plyr.js:5:3)
    at Module._compile (node:internal/modules/cjs/loader:1375:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1434:10)
    at Module.load (node:internal/modules/cjs/loader:1206:32)
    at Module._load (node:internal/modules/cjs/loader:1022:12)
    at cjsLoader (node:internal/modules/esm/translators:358:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:307:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)
    at async generatePages (file:///D:/Git/website/StarFunnel/node_modules/astro/dist/core/build/generate.js:106:23)
    at async staticBuild (file:///D:/Git/website/StarFunnel/node_modules/astro/dist/core/build/static-build.js:96:7)
    at async AstroBuilder.build (file:///D:/Git/website/StarFunnel/node_modules/astro/dist/core/build/index.js:138:5)
    at async AstroBuilder.run (file:///D:/Git/website/StarFunnel/node_modules/astro/dist/core/build/index.js:169:7)
    at async build (file:///D:/Git/website/StarFunnel/node_modules/astro/dist/core/build/index.js:47:3)
    at async build (file:///D:/Git/website/StarFunnel/node_modules/astro/dist/cli/build/index.js:20:3)
    at async runCommand (file:///D:/Git/website/StarFunnel/node_modules/astro/dist/cli/index.js:121:7)
    at async cli (file:///D:/Git/website/StarFunnel/node_modules/astro/dist/cli/index.js:149:5)

Node.js v21.5.0
nullr00tbyte commented 8 months ago

Just change the version of node to 18

nvm use 18

and work fine.

preetamslot commented 4 months ago

I have created fix for this: https://github.com/unfolding-io/StarFunnel/blob/0349bba91145d4ff8c0dea79462c43a6ba28cd14/src/components/dialog/VideoDialog.vue#L69C3-L69C52