How to fix Netlify await SyntaxError when using Vite

By VeryBadFrags

If you use Netlify and build your project with Vite ^4.0.0, you might run into the following error:

file:///opt/build/repo/node_modules/vite/bin/vite.js:7
    await import('source-map-support').then((r) => r.default.install())
    ^^^^^
SyntaxError: Unexpected reserved word
    at Loader.moduleStrategy (internal/modules/esm/translators.js:81:18)
    at async link (internal/modules/esm/module_job.js:37:21)
npm ERR! code ELIFECYCLE
npm ERR! errno 1

This error happens because Netlify defaults to an old version of Node (v12.18.0 at the time of writing this article). The fix is to tell Netlify to use a more recent version.

Here’s how to fix it:

  • Create a file called .nvmrc at the root of your project.
  • Specify the version of Node you want to use in the file, like lts/gallium or v16.17.0
lts/gallium
  • Commit and push, the Netlify build should be fixed.