Setting up statically generated website using vite+vue+typescript

Glitch Help
1

Hello, I’m having trouble setting up statically generated website for a project that uses vue+typescript

I’ve written the code on the local machine and I’ve used yarn to install the packages.
I’ve gotten somewhere where packages are being installed but fails with the following error and I’m at a loss ( should I use npm instead of yarn locally? is vue-tsc even supported on glitch? )

node v16.14.2, npm 7.20.6
Installing...
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'rollup@3.28.1',
npm WARN EBADENGINE   required: { node: '>=14.18.0', npm: '>=8.0.0' },
npm WARN EBADENGINE   current: { node: 'v16.14.2', npm: '7.20.6' }
npm WARN EBADENGINE }

Any pointers would be highly appreciated!
Thanks!

2

Those are just warnings and probably shouldn’t cause any issues - if they really are the issue then you’ll need to upgrade npm as described in Use npm >= 8 so I can install newer libraries - #5 by platinumdoodles

To me from a quick look it seems like the actual problem may lie in your vite.config.js - on line 9 you’re using a checker function that you don’t seem to be importing anywhere. Also in your start script you’re running vue-tsc but that’s not in your package.json (although it is in your yarn.lock) so you’ll need to install it using the “add package” button or by running npm i vue-tsc --save (or --save-dev) in the terminal.

It might be best to either use npm locally or figure out how to use yarn on glitch, but I don’t really think that should make a difference?

Hopefully this will help in some way. Happy glitching :slight_smile:

1 Like
3

Thanks,
you were right about the warning, they were not the root cause.
The checker plugin is probably ok - I believe it is used for better IDE experience.
after prodding some more ( I’ve generated package-lock.json locally using npm ) I now get an error related to the typescript compiler ( or so it seems ).
I get this error even if I try running “tsc --version” in the terminal so it must be something related to the environment in general, but I’m at a loss again.

/rbd/pnpm-volume/4921b920-0e9e-4434-a557-6cc3b5f4fc6a/node_modules/.registry.npmjs.org/typescript/5.2.2/node_modules/typescript/lib/tsc.js:93
  for (let i = startIndex ?? 0; i < array.length; i++) {
                           ^
SyntaxError: Unexpected token ?
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at main (/rbd/pnpm-volume/4921b920-0e9e-4434-a557-6cc3b5f4fc6a/node_modules/.registry.npmjs.org/vue-tsc/1.8.8/node_modules/vue-tsc/bin/vue-tsc.js:57:3)
    at Object.<anonymous> (/rbd/pnpm-volume/4921b920-0e9e-4434-a557-6cc3b5f4fc6a/node_modules/.registry.npmjs.org/vue-tsc/1.8.8/node_modules/vue-tsc/bin/vue-tsc.js:67:3)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
4

I remixed your project to have a look and I couldn’t reproduce that error. I had to install some packages & change vite.config.js a bit (including importing checker from vite-plugin-checker) but after that it just worked (although it’s got itself into an infinite starting loop which is a bit suspicious).
It looks like your project is somehow running an old version of node (<14) which doesn’t support nullish coalescing (??) which is really bizarre because you explicity tell glitch to use node 16. The only thing I can think of is maybe try remixing it and it might fix itself? (although you’ll then have to fix the errors I came across)

1 Like
5

this can happen when you open a terminal before adding the engines.node setting in your package.json file. could you try reopening the terminal panel/tab

6

Thanks,

I’ve tried remixing and I got rid of the tsc problem, but in the end got the same result that you’ve wrote about - infinite starting loop, always compiling, and the preview never shows up.

7

Hmm I’m not sure what’s going on there - potentially vite’s writing to some files somewhere that it shouldn’t be and that’s making glitch restart? perhaps play about in the terminal and see if you can figure out what’s being changed, or play around with a watch.json file (explained in Glitch :･ﾟ✧ I think). my best guess is that vue-tsc or vute-plugin-checker is running tsc directly, which i seem to remember caused some false positives for file reloading in an IDE i was using - perhaps investigate into whether you need that? (i think vite will automatically transpile ts without tsc, but it doesn’t actuakly check the correctness of the types :person_shrugging:)

8

Thanks for looking into this.
In the end I’ve figured out what was wrong with the constant building:

  • project.json did not have a start script. It had to be set to “start”:“vite”
  • the port has to be set to 3000 ( vite uses 5173 by default )
2 Likes