New install of Sage: Uncaught SyntaxError: Unexpected token < in main.js (which doesn't exist)

Right after I activated my Sage theme, I went to the homepage and checked the DevTools. I noticed there is an error in the console that reads:

/wp-content/themes/sage/dist/scripts/main.js/:2 Uncaught SyntaxError: Unexpected token <

and its indicating that it is in this (non-existent) file:
/wp-content/themes/sage/dist/scripts/main.js/ on line 2

there is no dist folder, and therefore no files in that folder.

Is anyone else experiencing this? How can I fix the error?

You need to build the theme assets first, see:

Thanks! that worked and I feel really stupid for not realizing that myself.

after building the assets, with yarn build trying to use the directive @asset but got the error

Fatal error: Uncaught Symfony\Component\Debug\Exception\FatalThrowableError: syntax error, unexpected '<' in /Users/christophevidal/Sites/wp-etonhouse-roots/web/app/uploads/cache/70abfb4fadf417938831ce9c126b519d62a07142.php:4 Stack trace: #0 /Users/christophevidal/Sites/wp-etonhouse-roots/web/app/themes/sage/vendor/illuminate/view/Engines/CompilerEngine.php(59): Illuminate\View\Engines\PhpEngine->evaluatePath('/Users/christop...', Array) #1 /Users/christophevidal/Sites/wp-etonhouse-roots/web/app/themes/sage/vendor/illuminate/view/View.php(142): Illuminate\View\Engines\CompilerEngine->get('/Users/christop...', Array) #2 /Users/christophevidal/Sites/wp-etonhouse-roots/web/app/themes/sage/vendor/illuminate/view/View.php(125): Illuminate\View\View->getContents() #3 /Users/christophevidal/Sites/wp-etonhouse-roots/web/app/themes/sage/vendor/illuminate/view/View.php(90): Illuminate\View\View->renderContents() #4 /Users/christophevidal/Sites/wp-etonhouse-roots/web/app/uploads/cache/666170023c35545b67d17e9bbd26ed2efba57339.php(6): in /Users/christophevidal/Sites/wp-etonhouse-roots/web/app/uploads/cache/70abfb4fadf417938831ce9c126b519d62a07142.php on line 4