How to fix Netlify await SyntaxError when using Vite

How to fix Netlify await SyntaxError when using Vite

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

The 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.

The fix

  • 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/hydrogen, a specific version like v18.16.1, or lts/* for the latest LTS version.

.nvmrc

lts/hydrogen
  • Commit and push, the Netlify build should be fixed 👍