SSG Builds broken - Need quick help configuring builds

I recently added some new packages/code to my vite-ssg project (using vitesse). All build modes were working without issue until the addition of this new code + npm packages. I had working vite builds + working SSG builds.

Now, I am able to build with cross-env NODE_ENV=production vite build but cannot build with cross-env NODE_ENV=production vite-ssg build

I’m going to guess that there are some changes I need to make to my vite config and/or to SSG, but I’m stuck. Any help would be much appreciated! 😃

Error trace

[vite-ssg] Build for server...
vite v2.4.4 building SSR bundle for production...
✓ 573 modules transformed.
.vite-ssg-temp/manifest.webmanifest        0.37kb
.vite-ssg-temp/assets/style.c59dba99.css   244.38kb
.vite-ssg-temp/main.js                     634.65kb
/Users/armenr/Development/testProj-testProj-workspace/testProj-vitesse-test-2/packages/client/node_modules/.pnpm/@aws-amplify+ui-components@1.7.1_aws-amplify@4.2.2/node_modules/@aws-amplify/ui-components/dist/components/index.js:1
(function (exports, require, module, __filename, __dirname) { import { attachShadow, h, Host, createEvent, proxyCustomElement } from '@stencil/core/internal/client';
                                                              ^^^^^^

SyntaxError: Cannot use import statement outside a module
    at new Script (node:vm:100:7)
    at p._moduleCompile (/Users/armenr/Development/testProj-testProj-workspace/testProj-vitesse-test-2/packages/client/node_modules/.pnpm/jiti@1.11.0/node_modules/jiti/dist/v8cache.js:2:3154)
    at Module.o._compile (/Users/armenr/Development/testProj-testProj-workspace/testProj-vitesse-test-2/packages/client/node_modules/.pnpm/jiti@1.11.0/node_modules/jiti/dist/v8cache.js:2:2705)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1124:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:816:12)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at n (/Users/armenr/Development/testProj-testProj-workspace/testProj-vitesse-test-2/packages/client/node_modules/.pnpm/jiti@1.11.0/node_modules/jiti/dist/v8cache.js:2:2472)
    at Module.<anonymous> (/Users/armenr/Development/testProj-testProj-workspace/testProj-vitesse-test-2/packages/client/.vite-ssg-temp/main.js:22:13)
    at Module.o._compile (/Users/armenr/Development/testProj-testProj-workspace/testProj-vitesse-test-2/packages/client/node_modules/.pnpm/jiti@1.11.0/node_modules/jiti/dist/v8cache.js:2:2778)
/Users/armenr/Development/testProj-testProj-workspace/testProj-vitesse-test-2/packages/client:
 ERROR  @testProjtestProj/client@0.0.1 build:ssg: `cross-env NODE_ENV=production vite-ssg build`
Exit status 1
 ERROR  Command failed with exit code 1.

Full build logs

╰─ pnpm build:client:pnpm:ssg

> testProjtestProj@0.0.1 build:client:pnpm:ssg /Users/armenr/Development/testProj-testProj-workspace/testProj-vitesse-test-2
> pnpm run build:ssg --filter @testProjtestProj/client


> @testProjtestProj/client@0.0.1 build:ssg /Users/armenr/Development/testProj-testProj-workspace/testProj-vitesse-test-2/packages/client
> cross-env NODE_ENV=production vite-ssg build


[vite-ssg] Build for client...
vite v2.4.4 building for production...
✓ 2185 modules transformed.
dist/assets/color.473bc8ca.png                 10.11kb
dist/assets/primeicons.7362b83d.eot            56.21kb
dist/assets/primeicons.c1e93246.ttf            56.04kb
dist/assets/primeicons.3929b551.woff           56.11kb
dist/assets/primeicons.8f9d2aaf.svg            229.14kb
dist/index.html                                1.36kb
dist/manifest.webmanifest                      0.37kb
dist/ssr-manifest.json                         346.73kb
dist/assets/virtual_pwa-register.ecd604b6.js   5.44kb / brotli: 1.98kb
dist/assets/signin.5f646ef8.js                 5.79kb / brotli: 1.84kb
dist/assets/x.7978b5aa.js                      0.47kb / brotli: 0.29kb
dist/assets/landingtwo.d40769b6.js             7.74kb / brotli: 2.37kb
dist/assets/dicom-overlay.af56634f.js          0.63kb / brotli: 0.33kb
dist/assets/home.e25fc82f.js                   9.81kb / brotli: 3.57kb
dist/assets/mail.3f6051bf.js                   0.55kb / brotli: 0.33kb
dist/assets/calendar.c651f22a.js               0.77kb / brotli: 0.41kb
dist/assets/about.ccc1ce3a.js                  1.79kb / brotli: 0.60kb
dist/assets/README.c331fb6e.js                 1.22kb / brotli: 0.43kb
dist/assets/[name].800cb756.js                 1.34kb / brotli: 0.72kb
dist/assets/landingone.6e27b29d.js             19.23kb / brotli: 4.38kb
dist/assets/[...all].4d5e4be5.js               0.22kb / brotli: 0.16kb
dist/assets/directory.e153bbc9.js              20.11kb / brotli: 4.23kb
dist/assets/404.c02b86e9.js                    1.70kb / brotli: 0.74kb
dist/assets/[name].0c88a31b.js                 8.26kb / brotli: 2.56kb
dist/assets/home.50d47f73.js                   12.31kb / brotli: 2.86kb
dist/assets/dom.29d9f284.js                    18.14kb / brotli: 4.84kb
dist/assets/signin.12fef205.css                0.36kb / brotli: 0.17kb
dist/assets/app.c6727523.js                    49.99kb / brotli: 10.95kb
dist/assets/core-js.892b7ba3.js                77.26kb / brotli: 22.19kb
dist/assets/app.bd2aea20.css                   208.54kb / brotli: 23.86kb
dist/assets/vendor.cb864961.js                 924.80kb / brotli: skipped (large chunk)

(!) Some chunks are larger than 500kb after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

[vite-ssg] Build for server...
vite v2.4.4 building SSR bundle for production...
✓ 573 modules transformed.
.vite-ssg-temp/manifest.webmanifest        0.37kb
.vite-ssg-temp/assets/style.c59dba99.css   244.38kb
.vite-ssg-temp/main.js                     634.65kb
/Users/armenr/Development/testProj-testProj-workspace/testProj-vitesse-test-2/packages/client/node_modules/.pnpm/@aws-amplify+ui-components@1.7.1_aws-amplify@4.2.2/node_modules/@aws-amplify/ui-components/dist/components/index.js:1
(function (exports, require, module, __filename, __dirname) { import { attachShadow, h, Host, createEvent, proxyCustomElement } from '@stencil/core/internal/client';
                                                              ^^^^^^

SyntaxError: Cannot use import statement outside a module
    at new Script (node:vm:100:7)
    at p._moduleCompile (/Users/armenr/Development/testProj-testProj-workspace/testProj-vitesse-test-2/packages/client/node_modules/.pnpm/jiti@1.11.0/node_modules/jiti/dist/v8cache.js:2:3154)
    at Module.o._compile (/Users/armenr/Development/testProj-testProj-workspace/testProj-vitesse-test-2/packages/client/node_modules/.pnpm/jiti@1.11.0/node_modules/jiti/dist/v8cache.js:2:2705)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1124:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:816:12)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at n (/Users/armenr/Development/testProj-testProj-workspace/testProj-vitesse-test-2/packages/client/node_modules/.pnpm/jiti@1.11.0/node_modules/jiti/dist/v8cache.js:2:2472)
    at Module.<anonymous> (/Users/armenr/Development/testProj-testProj-workspace/testProj-vitesse-test-2/packages/client/.vite-ssg-temp/main.js:22:13)
    at Module.o._compile (/Users/armenr/Development/testProj-testProj-workspace/testProj-vitesse-test-2/packages/client/node_modules/.pnpm/jiti@1.11.0/node_modules/jiti/dist/v8cache.js:2:2778)
/Users/armenr/Development/testProj-testProj-workspace/testProj-vitesse-test-2/packages/client:
 ERROR  @testProjtestProj/client@0.0.1 build:ssg: `cross-env NODE_ENV=production vite-ssg build`
Exit status 1
 ERROR  Command failed with exit code 1.

The code

src/modules/Amplify.ts

import Amplify from 'aws-amplify'
import { applyPolyfills } from '@aws-amplify/ui-components/loader'
import { defineCustomElements } from '@aws-amplify/ui-components/dist/components/index'

// @ts-expect-error missing types
import awsmobile from './../aws-exports'
import { UserModule } from '~/types'

export const install: UserModule = async({ app }) => {
  // app.config.globalProperties.$amplifyAuthRequiredFields = amplifyAuthRequiredFields
  await Amplify.configure(awsmobile)
  await applyPolyfills()
  await defineCustomElements(window)

  app.config.compilerOptions.isCustomElement = tag => tag.startsWith('amplify-')
}

[RebeccaStevens]

I think I’m having this same error, but for me vite build works fine but vite-ssg build fails.

[armenr]

@NunoSav - In my case, I didn’t need static builds, and I had no benefit from static builds. For my use-case, Vitesse worked fine with standard SPA/PWA builds, and non static/server-side-generated.

So, unfortunately, no.

Also, the likely cause of the problem is not actually Vitesse…but rather some component or library/dependency you are using, that isn’t SSR/SSG friendly.