Replaces Create React App with Vite (#1019)

examples/hackathon/main.wasp

@@ -15,9 +15,9 @@ entity Submission {=psl
   name       String  @id @unique
   email       String  @unique
   github      String
-  description String  
+  description String
   twitter     String?
-  country     String? 
+  country     String?
   website     String?
   image       String?
   approved    Boolean @default(false)
@@ -26,7 +26,7 @@ psl=}
 
 route RootRoute { path: "/", to: MainPage }
 page MainPage {
-  component: import Main from "@client/MainPage"
+  component: import Main from "@client/MainPage.tsx"
 }
 
 action submitProject {
@@ -37,4 +37,4 @@ action submitProject {
 query getProjects {
   fn: import { getProjects } from "@server/queries.js",
   entities: [Submission]
-}
+}

examples/hackathon/postcss.config.cjs

@@ -1,7 +1,7 @@
 module.exports = {
   plugins: {
     tailwindcss: {
-      config: './tailwind.config.js',
+      config: './tailwind.config.cjs',
     },
     autoprefixer: {},
   },

examples/realworld/main.wasp

@@ -4,7 +4,7 @@ app Conduit {
   },
 
   title: "Conduit",
-  
+
   head: [
     "<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" />"
   ],
@@ -25,7 +25,8 @@ app Conduit {
     ("moment", "2.29.1"),
     ("@material-ui/core", "4.11.3"),
     ("@material-ui/icons", "4.11.2"),
-    ("slug", "4.0.2")
+    ("slug", "4.0.2"),
+    ("lodash", "^4.17.21")
   ]
 }
 
@@ -35,39 +36,39 @@ app Conduit {
 
 route RootRoute { path: "/", to: MainPage }
 page MainPage {
-  component: import Main from "@client/MainPage.js"
+  component: import Main from "@client/MainPage.jsx"
 }
 
 route LogInRoute { path: "/login", to: LogInPage }
 page LogInPage {
-  component: import LogIn from "@client/auth/LoginPage.js"
+  component: import LogIn from "@client/auth/LoginPage.jsx"
 }
 
 route RegisterRoute { path: "/register", to: SignUpPage }
 page SignUpPage {
-  component: import SignUp from "@client/auth/SignupPage.js"
+  component: import SignUp from "@client/auth/SignupPage.jsx"
 }
 
 route UserSettingsRoute { path: "/settings", to: UserSettingsPage }
 page UserSettingsPage {
   authRequired: true,
-  component: import UserSettings from "@client/user/components/UserSettingsPage.js"
+  component: import UserSettings from "@client/user/components/UserSettingsPage.jsx"
 }
 
 route UserProfileRoute { path: "/@:username", to: UserProfilePage }
 page UserProfilePage {
-  component: import UserProfile from "@client/user/components/UserProfilePage.js"
+  component: import UserProfile from "@client/user/components/UserProfilePage.jsx"
 }
 
 route ArticleEditorRoute { path: "/editor/:articleSlug?", to: ArticleEditorPage }
 page ArticleEditorPage {
   authRequired: true,
-  component: import ArticleEditor from "@client/article/components/ArticleEditorPage.js"
+  component: import ArticleEditor from "@client/article/components/ArticleEditorPage.jsx"
 }
 
 route ArticleViewRoute { path: "/article/:articleSlug", to: ArticleViewPage }
 page ArticleViewPage {
-  component: import ArticleView from "@client/article/components/ArticleViewPage.js"
+  component: import ArticleView from "@client/article/components/ArticleViewPage.jsx"
 }
 
 // ----------------- Entities ------------------ //

examples/realworld/src/client/addWaspSourceHeader.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import WaspSourceHeader from './WaspSourceHeader.js'
+import WaspSourceHeader from './WaspSourceHeader'
 
 const addWaspSourceHeader = (Component) => {
   return function AddHeader(props) {

examples/realworld/src/client/article/components/ArticleViewPage.jsx

@@ -27,7 +27,7 @@ import createComment from '@wasp/actions/createComment'
 import deleteComment from '@wasp/actions/deleteComment'
 
 import Navbar from '../../Navbar'
-import addWaspSourceHeader from '../../addWaspSourceHeader.js'
+import addWaspSourceHeader from '../../addWaspSourceHeader'
 
 const useStyles = makeStyles((theme) => ({
   tags: {

examples/realworld/src/client/auth/SignupPage.jsx

@@ -5,7 +5,7 @@ import login from '@wasp/auth/login'
 import signup from '@wasp/auth/signup'
 import addWaspSourceHeader from '../addWaspSourceHeader'
 
-import { errorMessage } from '../utils.js'
+import { errorMessage } from '../utils'
 
 const SignupPage = () => {
   const history = useHistory()

examples/thoughts/main.wasp

@@ -19,24 +19,24 @@ app Thoughts {
 
 route MainRoute { path: "/", to: MainPage }
 page MainPage {
-  component: import Main from "@client/MainPage.js",
+  component: import Main from "@client/MainPage.jsx",
   authRequired: true
 }
 
 route ThoughtsRoute { path: "/thoughts", to: ThoughtsPage }
 page ThoughtsPage {
-  component: import Thoughts from "@client/ThoughtsPage.js",
+  component: import Thoughts from "@client/ThoughtsPage.jsx",
   authRequired: true
 }
 
 route LoginRoute { path: "/login", to: LoginPage }
 page LoginPage {
-  component: import Login from "@client/LoginPage.js"
+  component: import Login from "@client/LoginPage.jsx"
 }
 
 route SignupRoute { path: "/signup", to: SignupPage }
 page SignupPage {
-  component: import Signup from "@client/SignupPage"
+  component: import Signup from "@client/SignupPage.jsx"
 }
 
 action createThought {

examples/thoughts/src/client/Layout.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import TopNavbar from './TopNavbar'
 import TagsSidebar from './TagsSidebar'
-import addWaspSourceHeader from './addWaspSourceHeader.js'
+import addWaspSourceHeader from './addWaspSourceHeader'
 import './Layout.css'
 
 const Layout = ({ user, activeTag, children }) => (

examples/thoughts/src/client/LoginPage.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Link } from 'react-router-dom'
 
 import LoginForm from '@wasp/auth/forms/Login'
-import addWaspSourceHeader from './addWaspSourceHeader.js'
+import addWaspSourceHeader from './addWaspSourceHeader'
 
 const LoginPage = (props) => {
   return (

examples/thoughts/src/client/SignupPage.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Link } from 'react-router-dom'
 
 import SignupForm from '@wasp/auth/forms/Signup'
-import addWaspSourceHeader from './addWaspSourceHeader.js'
+import addWaspSourceHeader from './addWaspSourceHeader'
 
 const SignupPage = (props) => {
   return (

examples/thoughts/src/client/addWaspSourceHeader.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import WaspSourceHeader from './WaspSourceHeader.js'
+import WaspSourceHeader from './WaspSourceHeader'
 
 const addWaspSourceHeader = (Component) => {
   return function AddHeader(props) {

examples/todo-typescript/main.wasp

@@ -1,13 +1,13 @@
 app TodoTypescript {
   wasp: {
-    version: "^0.7.3"
+    version: "^0.8.2"
   },
   title: "ToDo TypeScript",
 
   auth: {
     userEntity: User,
     methods: {
-      usernameAndPassword: {}, 
+      usernameAndPassword: {},
     },
     onAuthFailedRedirectTo: "/login",
   }
@@ -16,10 +16,10 @@ app TodoTypescript {
 // Use Prisma Schema Language (PSL) to define our entities: https://www.prisma.io/docs/concepts/components/prisma-schema
 // Run `wasp db migrate-dev` in the CLI to create the database tables
 // Then run `wasp db studio` to open Prisma Studio and view your db models
-entity User {=psl 
+entity User {=psl
   id          Int     @id @default(autoincrement())
   username    String  @unique
-  password    String  
+  password    String
   tasks       Task[]
 psl=}
 
@@ -34,22 +34,22 @@ psl=}
 route RootRoute { path: "/", to: MainPage }
 page MainPage {
   authRequired: true,
-  component: import { MainPage } from "@client/MainPage"
+  component: import { MainPage } from "@client/MainPage.tsx"
 }
 
 route LoginRoute { path: "/login", to: LoginPage }
 page LoginPage {
-  component: import { LoginPage } from "@client/LoginPage"
+  component: import { LoginPage } from "@client/LoginPage.tsx"
 }
 
 route SignupRoute { path: "/signup", to: SignupPage }
 page SignupPage {
-  component: import { SignupPage } from "@client/SignupPage"
+  component: import { SignupPage } from "@client/SignupPage.tsx"
 }
 
 query getTasks {
   // We specify the JS implementation of our query (which is an async JS function)
-  // Even if you use TS and have a queries.ts file, you will still need to import it using the .js extension. 
+  // Even if you use TS and have a queries.ts file, you will still need to import it using the .js extension.
   // see here for more info: https://wasp-lang.dev/docs/tutorials/todo-app/03-listing-tasks#wasp-declaration
   fn: import { getTasks } from "@server/queries.js",
   // We tell Wasp that this query is doing something with the `Task` entity. With that, Wasp will

examples/tutorials/ItWaspsOnMyMachine/main.wasp

@@ -16,7 +16,7 @@ app ItWaspsOnMyMachine {
 
 route RootRoute { path: "/", to: MainPage }
 page MainPage {
-  component: import Main from "@client/MainPage.js"
+  component: import Main from "@client/MainPage.jsx"
 }
 
 entity Excuse {=psl

examples/tutorials/ItWaspsOnMyMachine/src/client/MainPage.jsx

@@ -41,7 +41,7 @@ const MainPage = () => {
   )
 }
 
-const ExcuseList = (props) => { 
+const ExcuseList = (props) => {
   return props.excuses?.length ?  props.excuses.map((excuse, idx) => <Excuse excuse={excuse} key={idx} />) : 'No saved excuses'
 }
 
@@ -53,4 +53,4 @@ const Excuse = ({ excuse }) => {
   )
 }
 
-export default MainPage
+export default MainPage

examples/tutorials/TodoApp/main.wasp

@@ -21,17 +21,17 @@ app TodoApp {
 route RootRoute { path: "/", to: MainPage }
 page MainPage {
   authRequired: true,
-  component: import Main from "@client/MainPage"
+  component: import Main from "@client/MainPage.jsx"
 }
 
 route SignupRoute { path: "/signup", to: SignupPage }
 page SignupPage {
-  component: import Signup from "@client/SignupPage"
+  component: import Signup from "@client/SignupPage.jsx"
 }
 
 route LoginRoute { path: "/login", to: LoginPage }
 page LoginPage {
-  component: import Login from "@client/LoginPage"
+  component: import Login from "@client/LoginPage.jsx"
 }
 
 entity User {=psl

examples/waspello/main.wasp

@@ -30,17 +30,17 @@ app waspello {
 route MainRoute { path: "/", to: Main }
 page Main {
     authRequired: true,
-    component: import Main from "@client/MainPage.js"
+    component: import Main from "@client/MainPage.jsx"
 }
 
 route SignupRoute { path: "/signup", to: Signup }
 page Signup {
-    component: import Signup from "@client/SignupPage"
+    component: import Signup from "@client/SignupPage.jsx"
 }
 
 route LoginRoute { path: "/login", to: Login }
 page Login {
-    component: import Login from "@client/LoginPage"
+    component: import Login from "@client/LoginPage.jsx"
 }
 
 // Entities

examples/waspello/src/client/LoginPage.jsx

@@ -1,12 +1,11 @@
 import React, { useState } from 'react'
 import { Link, useHistory } from 'react-router-dom'
 
-import LoginForm from '@wasp/auth/forms/Login'
 import login from '@wasp/auth/login.js'
 
 import EmailAndPassForm from './Auth/EmailAndPassForm'
 import GoogleAuthButton from './Auth/GoogleAuthButton'
-import addWaspSourceHeader from './addWaspSourceHeader.js'
+import addWaspSourceHeader from './addWaspSourceHeader'
 
 import mainLogo from './waspello-logo.svg'
 import './Signup.css'

examples/waspello/src/client/MainPage.jsx

@@ -31,7 +31,7 @@ const createListIdToSortedCardsMap = (listsAndCards) => {
   listsAndCards.forEach(list => {
     listIdToSortedCardsMap[list.id] = [...list.cards].sort((a, b) => a.pos - b.pos)
   })
-  
+
   return listIdToSortedCardsMap
 }
 
@@ -68,7 +68,7 @@ const MainPage = ({ user }) => {
       const sourceListId = result.source.droppableId
       const destListId = result.destination.droppableId
       // TODO(matija): this is not the nicest solution, we should have a consistent naming system
-      // for draggable ids (for lists we put prefix in the id, while for cards we use 
+      // for draggable ids (for lists we put prefix in the id, while for cards we use
       // their db id directly, because that saves us a bit of work in the further code.
       //
       // NOTE(matija): All draggable ids must be unique, even if they belong to different
@@ -144,7 +144,7 @@ const Lists = ({ lists, listIdToCardsMap }) => {
           cards={listIdToCardsMap[list.id]}
         />
       )
-    }) 
+    })
 }
 
 const List = ({ list, index, cards }) => {

examples/waspello/src/client/SignupPage.jsx

@@ -7,7 +7,7 @@ import login from '@wasp/auth/login.js'
 
 import EmailAndPassForm from './Auth/EmailAndPassForm'
 import GoogleAuthButton from './Auth/GoogleAuthButton'
-import addWaspSourceHeader from './addWaspSourceHeader.js'
+import addWaspSourceHeader from './addWaspSourceHeader'
 
 import mainLogo from './waspello-logo.svg'
 import './Signup.css'

examples/waspello/src/client/UserPageLayout.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import Navbar from './Navbar'
-import addWaspSourceHeader from './addWaspSourceHeader.js'
+import addWaspSourceHeader from './addWaspSourceHeader'
 
 import './UserPageLayout.css'
 

examples/waspello/src/client/addWaspSourceHeader.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import WaspSourceHeader from './WaspSourceHeader.js'
+import WaspSourceHeader from './WaspSourceHeader'
 
 const addWaspSourceHeader = (Component) => {
   return function AddHeader(props) {

examples/waspleau/main.wasp

@@ -51,7 +51,7 @@ psl=}
 
 route RootsRoute { path: "/", to: MainPage }
 page MainPage {
-  component: import Main from "@client/MainPage.js"
+  component: import Main from "@client/MainPage.jsx"
 }
 
 query dashboard {

examples/waspleau/src/client/addWaspSourceHeader.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import WaspSourceHeader from './WaspSourceHeader.js'
+import WaspSourceHeader from './WaspSourceHeader'
 
 const addWaspSourceHeader = (Component) => {
   return function AddHeader(props) {

waspc/cli/src/Wasp/Cli/Command/CreateNewProject.hs

@@ -100,7 +100,7 @@ writeMainWaspFile waspProjectDir (ProjectInfo projectName appName) = IOUtil.writ
           "",
           "route RootRoute { path: \"/\", to: MainPage }",
           "page MainPage {",
-          "  component: import Main from \"@client/MainPage\"",
+          "  component: import Main from \"@client/MainPage.jsx\"",
           "}"
         ]
 

waspc/data/Cli/templates/new/src/client/react-app-env.d.ts

@@ -1,60 +0,0 @@
-declare module '*.avif' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.bmp' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.gif' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.jpg' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.jpeg' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.png' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.webp' {
-    const src: string;
-    export default src;
-}
-
-declare module '*.svg' {
-  import * as React from 'react';
-
-  export const ReactComponent: React.FunctionComponent<React.SVGProps<
-    SVGSVGElement
-  > & { title?: string }>;
-
-  const src: string;
-  export default src;
-}
-
-declare module '*.module.css' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.module.scss' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.module.sass' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}

waspc/data/Cli/templates/new/src/client/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="../../.wasp/out/web-app/node_modules/vite/client" />

waspc/data/Generator/templates/react-app/index.html

@@ -0,0 +1,25 @@
+{{={= =}=}}
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <link rel="shortcut icon" href="/favicon.ico" />
+        <meta
+            name="viewport"
+            content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
+        />
+        <meta name="theme-color" content="#000000" />
+
+        <link rel="manifest" href="/manifest.json" />
+
+        {=& head =}
+
+        <title>{= title =}</title>
+    </head>
+
+    <body>
+        <noscript>You need to enable JavaScript to run this app.</noscript>
+        <div id="root"></div>
+        <script type="module" src="/src/index.tsx"></script>
+    </body>
+</html>

waspc/data/Generator/templates/react-app/package.json

@@ -3,17 +3,13 @@
   "name": "{= appName =}",
   "version": "0.0.0",
   "private": true,
+  "type": "module",
   {=& depsChunk =},
   {=& devDepsChunk =},
   "scripts": {
-    "start": "npm run validate-env && react-scripts start",
-    "build": "npm run validate-env && react-scripts build",
-    "validate-env": "node -r dotenv/config ./scripts/validate-env.mjs",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": "react-app"
+    "start": "npm run validate-env && vite",
+    "build": "npm run validate-env && tsc && vite build",
+    "validate-env": "node -r dotenv/config ./scripts/validate-env.mjs"
   },
   "engineStrict": true,
   "engines": {

waspc/data/Generator/templates/react-app/public/index.html

@@ -1,50 +0,0 @@
-{{={= =}=}}
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <meta charset="utf-8" />
-        <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
-        <meta
-            name="viewport"
-            content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
-        />
-        <meta name="theme-color" content="#000000" />
-
-        <!--
-             manifest.json provides metadata used when your web app is installed on a
-             user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-        -->
-        <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-
-        <!--
-             Notice the use of %PUBLIC_URL% in the tags above.
-             It will be replaced with the URL of the `public` folder during the build.
-             Only files inside the `public` folder can be referenced from the HTML.
-
-             Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-             work correctly both with client-side routing and a non-root public URL.
-             Learn how to configure a non-root public URL by running `npm run build`.
-        -->
-
-        {=& head =}
-
-        <title>{= title =}</title>
-    </head>
-
-    <body>
-        <noscript>You need to enable JavaScript to run this app.</noscript>
-        <div id="root"></div>
-
-        <!--
-             This HTML file is a template.
-             If you open it directly in the browser, you will see an empty page.
-
-             You can add webfonts, meta tags, or analytics to this file.
-             The build step will place the bundled scripts into the <body> tag.
-
-             To begin the development, run `npm start` or `yarn start`.
-             To create a production bundle, use `npm run build` or `yarn build`.
-        -->
-
-    </body>
-</html>

waspc/data/Generator/templates/react-app/src/auth/pages/createAuthRequiredPage.jsx

@@ -2,7 +2,7 @@
 import React from 'react'
 
 import { Redirect } from 'react-router-dom'
-import useAuth from '../../auth/useAuth.js'
+import useAuth from '../useAuth.js'
 
 
 const createAuthRequiredPage = (Page) => {

waspc/data/Generator/templates/react-app/src/config.js

@@ -1,6 +1,6 @@
 import { stripTrailingSlash } from "./universal/url";
 
-const apiUrl = stripTrailingSlash(process.env.REACT_APP_API_URL) || 'http://localhost:3001';
+const apiUrl = stripTrailingSlash(import.meta.env.REACT_APP_API_URL) || 'http://localhost:3001';
 
 const config = {
   apiUrl,

waspc/data/Generator/templates/react-app/src/index.tsx

@@ -8,7 +8,6 @@ import {
   initializeQueryClient,
   queryClientInitialized,
 } from './queryClient'
-import * as serviceWorker from './serviceWorker'
 
 {=# setupFn.isDefined =}
 {=& setupFn.importStatement =}
@@ -23,11 +22,6 @@ async function startApp() {
   initializeQueryClient()
 
   await render()
-
-  // If you want your app to work offline and load faster, you can change
-  // unregister() to register() below. Note this comes with some pitfalls.
-  // Learn more about service workers: https://bit.ly/CRA-PWA
-  serviceWorker.unregister()
 }
 
 async function render() {

waspc/data/Generator/templates/react-app/src/router.jsx

@@ -6,7 +6,7 @@ import { Route, BrowserRouter as Router } from 'react-router-dom'
 {=/ rootComponent.isDefined =}
 
 {=# isAuthEnabled =}
-import createAuthRequiredPage from "./auth/pages/createAuthRequiredPage.js"
+import createAuthRequiredPage from "./auth/pages/createAuthRequiredPage"
 {=/ isAuthEnabled =}
 
 {=# pagesToImport =}

waspc/data/Generator/templates/react-app/src/serviceWorker.js

@@ -1,135 +0,0 @@
-// This optional code is used to register a service worker.
-// register() is not called by default.
-
-// This lets the app load faster on subsequent visits in production, and gives
-// it offline capabilities. However, it also means that developers (and users)
-// will only see deployed updates on subsequent visits to a page, after all the
-// existing tabs open on the page have been closed, since previously cached
-// resources are updated in the background.
-
-// To learn more about the benefits of this model and instructions on how to
-// opt-in, read https://bit.ly/CRA-PWA
-
-const isLocalhost = Boolean(
-  window.location.hostname === 'localhost' ||
-    // [::1] is the IPv6 localhost address.
-    window.location.hostname === '[::1]' ||
-    // 127.0.0.1/8 is considered localhost for IPv4.
-    window.location.hostname.match(
-      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-    )
-);
-
-export function register(config) {
-  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
-    // The URL constructor is available in all browsers that support SW.
-    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
-    if (publicUrl.origin !== window.location.origin) {
-      // Our service worker won't work if PUBLIC_URL is on a different origin
-      // from what our page is served on. This might happen if a CDN is used to
-      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
-      return;
-    }
-
-    window.addEventListener('load', () => {
-      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
-
-      if (isLocalhost) {
-        // This is running on localhost. Let's check if a service worker still exists or not.
-        checkValidServiceWorker(swUrl, config);
-
-        // Add some additional logging to localhost, pointing developers to the
-        // service worker/PWA documentation.
-        navigator.serviceWorker.ready.then(() => {
-          console.log(
-            'This web app is being served cache-first by a service ' +
-              'worker. To learn more, visit https://bit.ly/CRA-PWA'
-          );
-        });
-      } else {
-        // Is not localhost. Just register service worker
-        registerValidSW(swUrl, config);
-      }
-    });
-  }
-}
-
-function registerValidSW(swUrl, config) {
-  navigator.serviceWorker
-    .register(swUrl)
-    .then(registration => {
-      registration.onupdatefound = () => {
-        const installingWorker = registration.installing;
-        if (installingWorker == null) {
-          return;
-        }
-        installingWorker.onstatechange = () => {
-          if (installingWorker.state === 'installed') {
-            if (navigator.serviceWorker.controller) {
-              // At this point, the updated precached content has been fetched,
-              // but the previous service worker will still serve the older
-              // content until all client tabs are closed.
-              console.log(
-                'New content is available and will be used when all ' +
-                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
-              );
-
-              // Execute callback
-              if (config && config.onUpdate) {
-                config.onUpdate(registration);
-              }
-            } else {
-              // At this point, everything has been precached.
-              // It's the perfect time to display a
-              // "Content is cached for offline use." message.
-              console.log('Content is cached for offline use.');
-
-              // Execute callback
-              if (config && config.onSuccess) {
-                config.onSuccess(registration);
-              }
-            }
-          }
-        };
-      };
-    })
-    .catch(error => {
-      console.error('Error during service worker registration:', error);
-    });
-}
-
-function checkValidServiceWorker(swUrl, config) {
-  // Check if the service worker can be found. If it can't reload the page.
-  fetch(swUrl)
-    .then(response => {
-      // Ensure service worker exists, and that we really are getting a JS file.
-      const contentType = response.headers.get('content-type');
-      if (
-        response.status === 404 ||
-        (contentType != null && contentType.indexOf('javascript') === -1)
-      ) {
-        // No service worker found. Probably a different app. Reload the page.
-        navigator.serviceWorker.ready.then(registration => {
-          registration.unregister().then(() => {
-            window.location.reload();
-          });
-        });
-      } else {
-        // Service worker found. Proceed as normal.
-        registerValidSW(swUrl, config);
-      }
-    })
-    .catch(() => {
-      console.log(
-        'No internet connection found. App is running in offline mode.'
-      );
-    });
-}
-
-export function unregister() {
-  if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.ready.then(registration => {
-      registration.unregister();
-    });
-  }
-}

waspc/data/Generator/templates/react-app/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

waspc/data/Generator/templates/react-app/tsconfig.json

@@ -1,10 +1,10 @@
 {
-  "extends": "@tsconfig/create-react-app/tsconfig.json",
   "compilerOptions": {
-    // Overriding this until we implement more complete TypeScript support.
-    "strict": false,
+    "extends": "@tsconfig/vite-react/tsconfig.json",
+    // Temporary loosen the type checking until we can address all the errors.
+    "allowJs": true,
+    "strict": false
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
 }

waspc/data/Generator/templates/react-app/tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

waspc/data/Generator/templates/react-app/vite.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3000,
+  },
+  envPrefix: 'REACT_APP_',
+  build: {
+    outDir: 'build',
+  },
+})

waspc/data/Generator/templates/server/src/config.js

@@ -1,5 +1,5 @@
 {{={= =}=}}
-import _ from 'lodash'
+import merge from 'lodash.merge'
 
 import { stripTrailingSlash } from "./universal/url.js";
 
@@ -40,5 +40,5 @@ const config = {
   }
 }
 
-const resolvedConfig = _.merge(config.all, config[env])
+const resolvedConfig = merge(config.all, config[env])
 export default resolvedConfig

waspc/e2e-test/test-outputs/waspBuild-golden/files.manifest

@@ -34,10 +34,10 @@ waspBuild/.wasp/build/server/src/utils.js
 waspBuild/.wasp/build/server/tsconfig.json
 waspBuild/.wasp/build/web-app/.npmrc
 waspBuild/.wasp/build/web-app/README.md
+waspBuild/.wasp/build/web-app/index.html
 waspBuild/.wasp/build/web-app/netlify.toml
 waspBuild/.wasp/build/web-app/package.json
 waspBuild/.wasp/build/web-app/public/favicon.ico
-waspBuild/.wasp/build/web-app/public/index.html
 waspBuild/.wasp/build/web-app/public/manifest.json
 waspBuild/.wasp/build/web-app/scripts/universal/validators.mjs
 waspBuild/.wasp/build/web-app/scripts/validate-env.mjs
@@ -49,9 +49,9 @@ waspBuild/.wasp/build/web-app/src/config.js
 waspBuild/.wasp/build/web-app/src/entities/index.ts
 waspBuild/.wasp/build/web-app/src/ext-src/Main.css
 waspBuild/.wasp/build/web-app/src/ext-src/MainPage.jsx
-waspBuild/.wasp/build/web-app/src/ext-src/react-app-env.d.ts
+waspBuild/.wasp/build/web-app/src/ext-src/vite-env.d.ts
 waspBuild/.wasp/build/web-app/src/ext-src/waspLogo.png
-waspBuild/.wasp/build/web-app/src/index.js
+waspBuild/.wasp/build/web-app/src/index.tsx
 waspBuild/.wasp/build/web-app/src/logo.png
 waspBuild/.wasp/build/web-app/src/operations/index.js
 waspBuild/.wasp/build/web-app/src/operations/resources.js
@@ -61,18 +61,20 @@ waspBuild/.wasp/build/web-app/src/queries/core.js
 waspBuild/.wasp/build/web-app/src/queries/index.d.ts
 waspBuild/.wasp/build/web-app/src/queries/index.js
 waspBuild/.wasp/build/web-app/src/queryClient.js
-waspBuild/.wasp/build/web-app/src/router.js
-waspBuild/.wasp/build/web-app/src/serviceWorker.js
+waspBuild/.wasp/build/web-app/src/router.jsx
 waspBuild/.wasp/build/web-app/src/universal/url.ts
 waspBuild/.wasp/build/web-app/src/utils.js
+waspBuild/.wasp/build/web-app/src/vite-env.d.ts
 waspBuild/.wasp/build/web-app/tsconfig.json
+waspBuild/.wasp/build/web-app/tsconfig.node.json
+waspBuild/.wasp/build/web-app/vite.config.ts
 waspBuild/.wasproot
 waspBuild/main.wasp
 waspBuild/src/.waspignore
 waspBuild/src/client/Main.css
 waspBuild/src/client/MainPage.jsx
-waspBuild/src/client/react-app-env.d.ts
 waspBuild/src/client/tsconfig.json
+waspBuild/src/client/vite-env.d.ts
 waspBuild/src/client/waspLogo.png
 waspBuild/src/server/tsconfig.json
 waspBuild/src/shared/tsconfig.json

waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/.waspchecksums

@@ -53,7 +53,7 @@
             "file",
             "server/package.json"
         ],
-        "7188fdecc5f032ea5b92f5b296fd9d690628ba3bde439c8a139d99a31da75c3b"
+        "4d2df7cd7e0c73cd693c8e6c1c5fa80ab09ff98aeb99989933cdbe3ce5fa78f2"
     ],
     [
         [
@@ -102,7 +102,7 @@
             "file",
             "server/src/config.js"
         ],
-        "379caccb02ebdabfb084d962c9f598d7c036323b3cdc66fd9c3875043fa12e82"
+        "60a63ed453f6a6d8306f7a3660eff80b5f9803b37e5865db66fcae80df918a68"
     ],
     [
         [
@@ -251,6 +251,13 @@
         ],
         "aa1bd54732b015158d24c55e03bc79b2f211109bc2b0478d6f2ad6b52d15847f"
     ],
+    [
+        [
+            "file",
+            "web-app/index.html"
+        ],
+        "503f37673a444e70b8954eec7efb5365d5e80971de0a5bee9cba56f73bbbd83c"
+    ],
     [
         [
             "file",
@@ -263,7 +270,7 @@
             "file",
             "web-app/package.json"
         ],
-        "1ce144c23ce73fb34a26d1db7b5e8cfc8f19fa751a73ff8c0ea3cac63d46d88d"
+        "baa475d963b525435bc9fe392679d8750815f6a4477d221250440c29086bd6cc"
     ],
     [
         [
@@ -272,13 +279,6 @@
         ],
         "1481f03584b46b63182c1f8d26e61a95ce4d8fae032b2b4f3fe5e00ab7e96c23"
     ],
-    [
-        [
-            "file",
-            "web-app/public/index.html"
-        ],
-        "d1fe3bb6d58c743bcbcdb15781755c7ec98e2e7bb694f502c55a41a486db43b5"
-    ],
     [
         [
             "file",
@@ -333,7 +333,7 @@
             "file",
             "web-app/src/config.js"
         ],
-        "f06f1bdb98dd4387b18159288ade916fd2c5bf3ed4161ca6711b0bda2f5963c3"
+        "b06175129dd8be8ca6c307fafa02646d47233c4e26fdfeea6d7802d02e9513f3"
     ],
     [
         [
@@ -359,9 +359,9 @@
     [
         [
             "file",
-            "web-app/src/ext-src/react-app-env.d.ts"
+            "web-app/src/ext-src/vite-env.d.ts"
         ],
-        "c9e89cb25e83121c0c451125de7a0b0569161e2bf18f83bc5f69836403910744"
+        "d677883c270ee71acc9bfd95c824650b541036599427a8ffc0ad33323d08e61d"
     ],
     [
         [
@@ -373,9 +373,9 @@
     [
         [
             "file",
-            "web-app/src/index.js"
+            "web-app/src/index.tsx"
         ],
-        "278ad569e8dbf14568c481e7929718362d40d4b6dc1940d4975453594e5568e9"
+        "7f1ee2834d45d4fe451e0eff699245e5de3a82a9d82a9931538cac75c2210e1f"
     ],
     [
         [
@@ -443,16 +443,9 @@
     [
         [
             "file",
-            "web-app/src/router.js"
+            "web-app/src/router.jsx"
         ],
-        "70c9237cf961320f04d9736007a8ec3fbc1cd1adfe2cfbc5214cb2d91d57d503"
-    ],
-    [
-        [
-            "file",
-            "web-app/src/serviceWorker.js"
-        ],
-        "0b097cb6e2c83821630a33de933893bf75de49731b18ce3c25fc5384866fbac0"
+        "103724de16eb74300d9fab366bf73401ffd6bf9018394044c1d4ade22731868e"
     ],
     [
         [
@@ -468,11 +461,32 @@
         ],
         "0ae6e53a050dbc6b7166aedfd5b076c2cab524c4d6aff884dc6902b178148815"
     ],
+    [
+        [
+            "file",
+            "web-app/src/vite-env.d.ts"
+        ],
+        "65996936fbb042915f7b74a200fcdde7e410f32a669b1ab9597cfaa4b0faddb5"
+    ],
     [
         [
             "file",
             "web-app/tsconfig.json"
         ],
-        "7ba6350177394b6aaa336b3d13d7b7d9119bb6ddc35d594fe48458e313957a1f"
+        "49258557f92e10eddda507885655d22f51d52f6f39e277c2ec1c9d626018c728"
+    ],
+    [
+        [
+            "file",
+            "web-app/tsconfig.node.json"
+        ],
+        "c40d0614fda5b8a746a1ba2e3be8e2370140c0167851ac77881cd53bb5647cdd"
+    ],
+    [
+        [
+            "file",
+            "web-app/vite.config.ts"
+        ],
+        "ab5c138ab0ab01f5108c2da9a8bf6b673b79115ca97276f6293da8e3bc0a45b1"
     ]
 ]

waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/installedFullStackNpmDependencies.json

@@ -1 +1 @@
-{"npmDepsForServer":{"dependencies":[{"name":"cookie-parser","version":"~1.4.6"},{"name":"cors","version":"^2.8.5"},{"name":"express","version":"~4.18.1"},{"name":"morgan","version":"~1.10.0"},{"name":"@prisma/client","version":"4.5.0"},{"name":"jsonwebtoken","version":"^8.5.1"},{"name":"secure-password","version":"^4.0.0"},{"name":"dotenv","version":"16.0.2"},{"name":"helmet","version":"^6.0.0"},{"name":"patch-package","version":"^6.4.7"},{"name":"uuid","version":"^9.0.0"},{"name":"lodash","version":"^4.17.21"}],"devDependencies":[{"name":"nodemon","version":"^2.0.19"},{"name":"standard","version":"^17.0.0"},{"name":"prisma","version":"4.5.0"},{"name":"typescript","version":"^4.8.4"},{"name":"@types/express","version":"^4.17.13"},{"name":"@types/node","version":"^18.11.9"},{"name":"@tsconfig/node18","version":"^1.0.1"}]},"npmDepsForWebApp":{"dependencies":[{"name":"axios","version":"^0.27.2"},{"name":"react","version":"^17.0.2"},{"name":"react-dom","version":"^17.0.2"},{"name":"@tanstack/react-query","version":"^4.13.0"},{"name":"react-router-dom","version":"^5.3.3"},{"name":"react-scripts","version":"5.0.1"},{"name":"@prisma/client","version":"4.5.0"}],"devDependencies":[{"name":"typescript","version":"^4.8.4"},{"name":"@types/react","version":"^17.0.39"},{"name":"@types/react-dom","version":"^17.0.11"},{"name":"@types/react-router-dom","version":"^5.3.3"},{"name":"@tsconfig/create-react-app","version":"^1.0.3"},{"name":"dotenv","version":"16.0.3"}]}}
+{"npmDepsForServer":{"dependencies":[{"name":"cookie-parser","version":"~1.4.6"},{"name":"cors","version":"^2.8.5"},{"name":"express","version":"~4.18.1"},{"name":"morgan","version":"~1.10.0"},{"name":"@prisma/client","version":"4.5.0"},{"name":"jsonwebtoken","version":"^8.5.1"},{"name":"secure-password","version":"^4.0.0"},{"name":"dotenv","version":"16.0.2"},{"name":"helmet","version":"^6.0.0"},{"name":"patch-package","version":"^6.4.7"},{"name":"uuid","version":"^9.0.0"},{"name":"lodash.merge","version":"^4.6.2"}],"devDependencies":[{"name":"nodemon","version":"^2.0.19"},{"name":"standard","version":"^17.0.0"},{"name":"prisma","version":"4.5.0"},{"name":"typescript","version":"^4.8.4"},{"name":"@types/express","version":"^4.17.13"},{"name":"@types/node","version":"^18.11.9"},{"name":"@tsconfig/node18","version":"^1.0.1"}]},"npmDepsForWebApp":{"dependencies":[{"name":"axios","version":"^0.27.2"},{"name":"react","version":"^17.0.2"},{"name":"react-dom","version":"^17.0.2"},{"name":"@tanstack/react-query","version":"^4.13.0"},{"name":"react-router-dom","version":"^5.3.3"},{"name":"@prisma/client","version":"4.5.0"}],"devDependencies":[{"name":"vite","version":"^4.1.0"},{"name":"typescript","version":"^4.9.3"},{"name":"@types/react","version":"^17.0.53"},{"name":"@types/react-dom","version":"^17.0.19"},{"name":"@types/react-router-dom","version":"^5.3.3"},{"name":"@vitejs/plugin-react-swc","version":"^3.0.0"},{"name":"dotenv","version":"^16.0.3"},{"name":"@tsconfig/vite-react","version":"^1.0.1"}]}}

waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/server/package.json

@@ -7,7 +7,7 @@
     "express": "~4.18.1",
     "helmet": "^6.0.0",
     "jsonwebtoken": "^8.5.1",
-    "lodash": "^4.17.21",
+    "lodash.merge": "^4.6.2",
     "morgan": "~1.10.0",
     "patch-package": "^6.4.7",
     "secure-password": "^4.0.0",

waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/server/src/config.js

@@ -1,4 +1,4 @@
-import _ from 'lodash'
+import merge from 'lodash.merge'
 
 import { stripTrailingSlash } from "./universal/url.js";
 
@@ -24,5 +24,5 @@ const config = {
   }
 }
 
-const resolvedConfig = _.merge(config.all, config[env])
+const resolvedConfig = merge(config.all, config[env])
 export default resolvedConfig

waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <link rel="shortcut icon" href="/favicon.ico" />
+        <meta
+            name="viewport"
+            content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
+        />
+        <meta name="theme-color" content="#000000" />
+
+        <link rel="manifest" href="/manifest.json" />
+
+        
+
+        <title>waspBuild</title>
+    </head>
+
+    <body>
+        <noscript>You need to enable JavaScript to run this app.</noscript>
+        <div id="root"></div>
+        <script type="module" src="/src/index.tsx"></script>
+    </body>
+</html>

waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/package.json

@@ -17,32 +17,29 @@
     "axios": "^0.27.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-router-dom": "^5.3.3",
-    "react-scripts": "5.0.1"
+    "react-router-dom": "^5.3.3"
   },
   "devDependencies": {
-    "@tsconfig/create-react-app": "^1.0.3",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.11",
+    "@tsconfig/vite-react": "^1.0.1",
+    "@types/react": "^17.0.53",
+    "@types/react-dom": "^17.0.19",
     "@types/react-router-dom": "^5.3.3",
-    "dotenv": "16.0.3",
-    "typescript": "^4.8.4"
+    "@vitejs/plugin-react-swc": "^3.0.0",
+    "dotenv": "^16.0.3",
+    "typescript": "^4.9.3",
+    "vite": "^4.1.0"
   },
   "engineStrict": true,
   "engines": {
     "node": "^18.12.0"
   },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
   "name": "waspBuild",
   "private": true,
   "scripts": {
-    "build": "npm run validate-env && react-scripts build",
-    "eject": "react-scripts eject",
-    "start": "npm run validate-env && react-scripts start",
-    "test": "react-scripts test",
+    "build": "npm run validate-env && tsc && vite build",
+    "start": "npm run validate-env && vite",
     "validate-env": "node -r dotenv/config ./scripts/validate-env.mjs"
   },
+  "type": "module",
   "version": "0.0.0"
 }

waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/public/index.html

@@ -1,49 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <meta charset="utf-8" />
-        <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
-        <meta
-            name="viewport"
-            content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
-        />
-        <meta name="theme-color" content="#000000" />
-
-        <!--
-             manifest.json provides metadata used when your web app is installed on a
-             user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-        -->
-        <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-
-        <!--
-             Notice the use of %PUBLIC_URL% in the tags above.
-             It will be replaced with the URL of the `public` folder during the build.
-             Only files inside the `public` folder can be referenced from the HTML.
-
-             Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-             work correctly both with client-side routing and a non-root public URL.
-             Learn how to configure a non-root public URL by running `npm run build`.
-        -->
-
-        
-
-        <title>waspBuild</title>
-    </head>
-
-    <body>
-        <noscript>You need to enable JavaScript to run this app.</noscript>
-        <div id="root"></div>
-
-        <!--
-             This HTML file is a template.
-             If you open it directly in the browser, you will see an empty page.
-
-             You can add webfonts, meta tags, or analytics to this file.
-             The build step will place the bundled scripts into the <body> tag.
-
-             To begin the development, run `npm start` or `yarn start`.
-             To create a production bundle, use `npm run build` or `yarn build`.
-        -->
-
-    </body>
-</html>

waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/src/config.js

@@ -1,6 +1,6 @@
 import { stripTrailingSlash } from "./universal/url";
 
-const apiUrl = stripTrailingSlash(process.env.REACT_APP_API_URL) || 'http://localhost:3001';
+const apiUrl = stripTrailingSlash(import.meta.env.REACT_APP_API_URL) || 'http://localhost:3001';
 
 const config = {
   apiUrl,

waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/src/ext-src/react-app-env.d.ts

@@ -1,60 +0,0 @@
-declare module '*.avif' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.bmp' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.gif' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.jpg' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.jpeg' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.png' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.webp' {
-    const src: string;
-    export default src;
-}
-
-declare module '*.svg' {
-  import * as React from 'react';
-
-  export const ReactComponent: React.FunctionComponent<React.SVGProps<
-    SVGSVGElement
-  > & { title?: string }>;
-
-  const src: string;
-  export default src;
-}
-
-declare module '*.module.css' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.module.scss' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.module.sass' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}

waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/src/ext-src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="../../.wasp/out/web-app/node_modules/vite/client" />

waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/src/index.tsx

@@ -7,7 +7,6 @@ import {
   initializeQueryClient,
   queryClientInitialized,
 } from './queryClient'
-import * as serviceWorker from './serviceWorker'
 
 
 startApp()
@@ -16,11 +15,6 @@ async function startApp() {
   initializeQueryClient()
 
   await render()
-
-  // If you want your app to work offline and load faster, you can change
-  // unregister() to register() below. Note this comes with some pitfalls.
-  // Learn more about service workers: https://bit.ly/CRA-PWA
-  serviceWorker.unregister()
 }
 
 async function render() {

waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/src/router.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Route, BrowserRouter as Router } from 'react-router-dom'
 
 
-import MainPage from './ext-src/MainPage'
+import MainPage from './ext-src/MainPage.jsx'
 
 
 const router = (

waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/src/serviceWorker.js

@@ -1,135 +0,0 @@
-// This optional code is used to register a service worker.
-// register() is not called by default.
-
-// This lets the app load faster on subsequent visits in production, and gives
-// it offline capabilities. However, it also means that developers (and users)
-// will only see deployed updates on subsequent visits to a page, after all the
-// existing tabs open on the page have been closed, since previously cached
-// resources are updated in the background.
-
-// To learn more about the benefits of this model and instructions on how to
-// opt-in, read https://bit.ly/CRA-PWA
-
-const isLocalhost = Boolean(
-  window.location.hostname === 'localhost' ||
-    // [::1] is the IPv6 localhost address.
-    window.location.hostname === '[::1]' ||
-    // 127.0.0.1/8 is considered localhost for IPv4.
-    window.location.hostname.match(
-      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-    )
-);
-
-export function register(config) {
-  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
-    // The URL constructor is available in all browsers that support SW.
-    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
-    if (publicUrl.origin !== window.location.origin) {
-      // Our service worker won't work if PUBLIC_URL is on a different origin
-      // from what our page is served on. This might happen if a CDN is used to
-      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
-      return;
-    }
-
-    window.addEventListener('load', () => {
-      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
-
-      if (isLocalhost) {
-        // This is running on localhost. Let's check if a service worker still exists or not.
-        checkValidServiceWorker(swUrl, config);
-
-        // Add some additional logging to localhost, pointing developers to the
-        // service worker/PWA documentation.
-        navigator.serviceWorker.ready.then(() => {
-          console.log(
-            'This web app is being served cache-first by a service ' +
-              'worker. To learn more, visit https://bit.ly/CRA-PWA'
-          );
-        });
-      } else {
-        // Is not localhost. Just register service worker
-        registerValidSW(swUrl, config);
-      }
-    });
-  }
-}
-
-function registerValidSW(swUrl, config) {
-  navigator.serviceWorker
-    .register(swUrl)
-    .then(registration => {
-      registration.onupdatefound = () => {
-        const installingWorker = registration.installing;
-        if (installingWorker == null) {
-          return;
-        }
-        installingWorker.onstatechange = () => {
-          if (installingWorker.state === 'installed') {
-            if (navigator.serviceWorker.controller) {
-              // At this point, the updated precached content has been fetched,
-              // but the previous service worker will still serve the older
-              // content until all client tabs are closed.
-              console.log(
-                'New content is available and will be used when all ' +
-                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
-              );
-
-              // Execute callback
-              if (config && config.onUpdate) {
-                config.onUpdate(registration);
-              }
-            } else {
-              // At this point, everything has been precached.
-              // It's the perfect time to display a
-              // "Content is cached for offline use." message.
-              console.log('Content is cached for offline use.');
-
-              // Execute callback
-              if (config && config.onSuccess) {
-                config.onSuccess(registration);
-              }
-            }
-          }
-        };
-      };
-    })
-    .catch(error => {
-      console.error('Error during service worker registration:', error);
-    });
-}
-
-function checkValidServiceWorker(swUrl, config) {
-  // Check if the service worker can be found. If it can't reload the page.
-  fetch(swUrl)
-    .then(response => {
-      // Ensure service worker exists, and that we really are getting a JS file.
-      const contentType = response.headers.get('content-type');
-      if (
-        response.status === 404 ||
-        (contentType != null && contentType.indexOf('javascript') === -1)
-      ) {
-        // No service worker found. Probably a different app. Reload the page.
-        navigator.serviceWorker.ready.then(registration => {
-          registration.unregister().then(() => {
-            window.location.reload();
-          });
-        });
-      } else {
-        // Service worker found. Proceed as normal.
-        registerValidSW(swUrl, config);
-      }
-    })
-    .catch(() => {
-      console.log(
-        'No internet connection found. App is running in offline mode.'
-      );
-    });
-}
-
-export function unregister() {
-  if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.ready.then(registration => {
-      registration.unregister();
-    });
-  }
-}

waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/tsconfig.json

@@ -1,10 +1,10 @@
 {
-  "extends": "@tsconfig/create-react-app/tsconfig.json",
   "compilerOptions": {
-    // Overriding this until we implement more complete TypeScript support.
-    "strict": false,
+    "extends": "@tsconfig/vite-react/tsconfig.json",
+    // Temporary loosen the type checking until we can address all the errors.
+    "allowJs": true,
+    "strict": false
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
 }

waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/vite.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3000,
+  },
+  envPrefix: 'REACT_APP_',
+  build: {
+    outDir: 'build',
+  },
+})

waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/main.wasp

@@ -8,5 +8,5 @@ app waspBuild {
 
 route RootRoute { path: "/", to: MainPage }
 page MainPage {
-  component: import Main from "@client/MainPage"
+  component: import Main from "@client/MainPage.jsx"
 }

waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/src/client/react-app-env.d.ts

@@ -1,60 +0,0 @@
-declare module '*.avif' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.bmp' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.gif' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.jpg' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.jpeg' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.png' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.webp' {
-    const src: string;
-    export default src;
-}
-
-declare module '*.svg' {
-  import * as React from 'react';
-
-  export const ReactComponent: React.FunctionComponent<React.SVGProps<
-    SVGSVGElement
-  > & { title?: string }>;
-
-  const src: string;
-  export default src;
-}
-
-declare module '*.module.css' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.module.scss' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.module.sass' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}

waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/src/client/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="../../.wasp/out/web-app/node_modules/vite/client" />

waspc/e2e-test/test-outputs/waspCompile-golden/files.manifest

@@ -34,10 +34,10 @@ waspCompile/.wasp/out/server/src/utils.js
 waspCompile/.wasp/out/server/tsconfig.json
 waspCompile/.wasp/out/web-app/.npmrc
 waspCompile/.wasp/out/web-app/README.md
+waspCompile/.wasp/out/web-app/index.html
 waspCompile/.wasp/out/web-app/netlify.toml
 waspCompile/.wasp/out/web-app/package.json
 waspCompile/.wasp/out/web-app/public/favicon.ico
-waspCompile/.wasp/out/web-app/public/index.html
 waspCompile/.wasp/out/web-app/public/manifest.json
 waspCompile/.wasp/out/web-app/scripts/universal/validators.mjs
 waspCompile/.wasp/out/web-app/scripts/validate-env.mjs
@@ -49,9 +49,9 @@ waspCompile/.wasp/out/web-app/src/config.js
 waspCompile/.wasp/out/web-app/src/entities/index.ts
 waspCompile/.wasp/out/web-app/src/ext-src/Main.css
 waspCompile/.wasp/out/web-app/src/ext-src/MainPage.jsx
-waspCompile/.wasp/out/web-app/src/ext-src/react-app-env.d.ts
+waspCompile/.wasp/out/web-app/src/ext-src/vite-env.d.ts
 waspCompile/.wasp/out/web-app/src/ext-src/waspLogo.png
-waspCompile/.wasp/out/web-app/src/index.js
+waspCompile/.wasp/out/web-app/src/index.tsx
 waspCompile/.wasp/out/web-app/src/logo.png
 waspCompile/.wasp/out/web-app/src/operations/index.js
 waspCompile/.wasp/out/web-app/src/operations/resources.js
@@ -61,18 +61,20 @@ waspCompile/.wasp/out/web-app/src/queries/core.js
 waspCompile/.wasp/out/web-app/src/queries/index.d.ts
 waspCompile/.wasp/out/web-app/src/queries/index.js
 waspCompile/.wasp/out/web-app/src/queryClient.js
-waspCompile/.wasp/out/web-app/src/router.js
-waspCompile/.wasp/out/web-app/src/serviceWorker.js
+waspCompile/.wasp/out/web-app/src/router.jsx
 waspCompile/.wasp/out/web-app/src/universal/url.ts
 waspCompile/.wasp/out/web-app/src/utils.js
+waspCompile/.wasp/out/web-app/src/vite-env.d.ts
 waspCompile/.wasp/out/web-app/tsconfig.json
+waspCompile/.wasp/out/web-app/tsconfig.node.json
+waspCompile/.wasp/out/web-app/vite.config.ts
 waspCompile/.wasproot
 waspCompile/main.wasp
 waspCompile/src/.waspignore
 waspCompile/src/client/Main.css
 waspCompile/src/client/MainPage.jsx
-waspCompile/src/client/react-app-env.d.ts
 waspCompile/src/client/tsconfig.json
+waspCompile/src/client/vite-env.d.ts
 waspCompile/src/client/waspLogo.png
 waspCompile/src/server/tsconfig.json
 waspCompile/src/shared/tsconfig.json

waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/.waspchecksums

@@ -53,7 +53,7 @@
             "file",
             "server/package.json"
         ],
-        "7188fdecc5f032ea5b92f5b296fd9d690628ba3bde439c8a139d99a31da75c3b"
+        "4d2df7cd7e0c73cd693c8e6c1c5fa80ab09ff98aeb99989933cdbe3ce5fa78f2"
     ],
     [
         [
@@ -102,7 +102,7 @@
             "file",
             "server/src/config.js"
         ],
-        "379caccb02ebdabfb084d962c9f598d7c036323b3cdc66fd9c3875043fa12e82"
+        "60a63ed453f6a6d8306f7a3660eff80b5f9803b37e5865db66fcae80df918a68"
     ],
     [
         [
@@ -251,6 +251,13 @@
         ],
         "aa1bd54732b015158d24c55e03bc79b2f211109bc2b0478d6f2ad6b52d15847f"
     ],
+    [
+        [
+            "file",
+            "web-app/index.html"
+        ],
+        "f38792224e7db1569c41ec117a2cb211dec4620b8b4302c47ff7fc8f58ce3647"
+    ],
     [
         [
             "file",
@@ -263,7 +270,7 @@
             "file",
             "web-app/package.json"
         ],
-        "1a3418d3989533d41ac9ffd1810380c4caffe4de57cc381ae595b313ca7f6b6b"
+        "82391614a4b461fddbfe2fb9945e612be5808c71f10b870297c295ea0abc465e"
     ],
     [
         [
@@ -272,13 +279,6 @@
         ],
         "1481f03584b46b63182c1f8d26e61a95ce4d8fae032b2b4f3fe5e00ab7e96c23"
     ],
-    [
-        [
-            "file",
-            "web-app/public/index.html"
-        ],
-        "faac353e5856c497ea1443ac5abb6baf1ac4b1ddc37b2e7d66962eecd13ad6ed"
-    ],
     [
         [
             "file",
@@ -333,7 +333,7 @@
             "file",
             "web-app/src/config.js"
         ],
-        "f06f1bdb98dd4387b18159288ade916fd2c5bf3ed4161ca6711b0bda2f5963c3"
+        "b06175129dd8be8ca6c307fafa02646d47233c4e26fdfeea6d7802d02e9513f3"
     ],
     [
         [
@@ -359,9 +359,9 @@
     [
         [
             "file",
-            "web-app/src/ext-src/react-app-env.d.ts"
+            "web-app/src/ext-src/vite-env.d.ts"
         ],
-        "c9e89cb25e83121c0c451125de7a0b0569161e2bf18f83bc5f69836403910744"
+        "d677883c270ee71acc9bfd95c824650b541036599427a8ffc0ad33323d08e61d"
     ],
     [
         [
@@ -373,9 +373,9 @@
     [
         [
             "file",
-            "web-app/src/index.js"
+            "web-app/src/index.tsx"
         ],
-        "278ad569e8dbf14568c481e7929718362d40d4b6dc1940d4975453594e5568e9"
+        "7f1ee2834d45d4fe451e0eff699245e5de3a82a9d82a9931538cac75c2210e1f"
     ],
     [
         [
@@ -443,16 +443,9 @@
     [
         [
             "file",
-            "web-app/src/router.js"
+            "web-app/src/router.jsx"
         ],
-        "70c9237cf961320f04d9736007a8ec3fbc1cd1adfe2cfbc5214cb2d91d57d503"
-    ],
-    [
-        [
-            "file",
-            "web-app/src/serviceWorker.js"
-        ],
-        "0b097cb6e2c83821630a33de933893bf75de49731b18ce3c25fc5384866fbac0"
+        "103724de16eb74300d9fab366bf73401ffd6bf9018394044c1d4ade22731868e"
     ],
     [
         [
@@ -468,11 +461,32 @@
         ],
         "0ae6e53a050dbc6b7166aedfd5b076c2cab524c4d6aff884dc6902b178148815"
     ],
+    [
+        [
+            "file",
+            "web-app/src/vite-env.d.ts"
+        ],
+        "65996936fbb042915f7b74a200fcdde7e410f32a669b1ab9597cfaa4b0faddb5"
+    ],
     [
         [
             "file",
             "web-app/tsconfig.json"
         ],
-        "7ba6350177394b6aaa336b3d13d7b7d9119bb6ddc35d594fe48458e313957a1f"
+        "49258557f92e10eddda507885655d22f51d52f6f39e277c2ec1c9d626018c728"
+    ],
+    [
+        [
+            "file",
+            "web-app/tsconfig.node.json"
+        ],
+        "c40d0614fda5b8a746a1ba2e3be8e2370140c0167851ac77881cd53bb5647cdd"
+    ],
+    [
+        [
+            "file",
+            "web-app/vite.config.ts"
+        ],
+        "ab5c138ab0ab01f5108c2da9a8bf6b673b79115ca97276f6293da8e3bc0a45b1"
     ]
 ]

waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/installedFullStackNpmDependencies.json

@@ -1 +1 @@
-{"npmDepsForServer":{"dependencies":[{"name":"cookie-parser","version":"~1.4.6"},{"name":"cors","version":"^2.8.5"},{"name":"express","version":"~4.18.1"},{"name":"morgan","version":"~1.10.0"},{"name":"@prisma/client","version":"4.5.0"},{"name":"jsonwebtoken","version":"^8.5.1"},{"name":"secure-password","version":"^4.0.0"},{"name":"dotenv","version":"16.0.2"},{"name":"helmet","version":"^6.0.0"},{"name":"patch-package","version":"^6.4.7"},{"name":"uuid","version":"^9.0.0"},{"name":"lodash","version":"^4.17.21"}],"devDependencies":[{"name":"nodemon","version":"^2.0.19"},{"name":"standard","version":"^17.0.0"},{"name":"prisma","version":"4.5.0"},{"name":"typescript","version":"^4.8.4"},{"name":"@types/express","version":"^4.17.13"},{"name":"@types/node","version":"^18.11.9"},{"name":"@tsconfig/node18","version":"^1.0.1"}]},"npmDepsForWebApp":{"dependencies":[{"name":"axios","version":"^0.27.2"},{"name":"react","version":"^17.0.2"},{"name":"react-dom","version":"^17.0.2"},{"name":"@tanstack/react-query","version":"^4.13.0"},{"name":"react-router-dom","version":"^5.3.3"},{"name":"react-scripts","version":"5.0.1"},{"name":"@prisma/client","version":"4.5.0"}],"devDependencies":[{"name":"typescript","version":"^4.8.4"},{"name":"@types/react","version":"^17.0.39"},{"name":"@types/react-dom","version":"^17.0.11"},{"name":"@types/react-router-dom","version":"^5.3.3"},{"name":"@tsconfig/create-react-app","version":"^1.0.3"},{"name":"dotenv","version":"16.0.3"}]}}
+{"npmDepsForServer":{"dependencies":[{"name":"cookie-parser","version":"~1.4.6"},{"name":"cors","version":"^2.8.5"},{"name":"express","version":"~4.18.1"},{"name":"morgan","version":"~1.10.0"},{"name":"@prisma/client","version":"4.5.0"},{"name":"jsonwebtoken","version":"^8.5.1"},{"name":"secure-password","version":"^4.0.0"},{"name":"dotenv","version":"16.0.2"},{"name":"helmet","version":"^6.0.0"},{"name":"patch-package","version":"^6.4.7"},{"name":"uuid","version":"^9.0.0"},{"name":"lodash.merge","version":"^4.6.2"}],"devDependencies":[{"name":"nodemon","version":"^2.0.19"},{"name":"standard","version":"^17.0.0"},{"name":"prisma","version":"4.5.0"},{"name":"typescript","version":"^4.8.4"},{"name":"@types/express","version":"^4.17.13"},{"name":"@types/node","version":"^18.11.9"},{"name":"@tsconfig/node18","version":"^1.0.1"}]},"npmDepsForWebApp":{"dependencies":[{"name":"axios","version":"^0.27.2"},{"name":"react","version":"^17.0.2"},{"name":"react-dom","version":"^17.0.2"},{"name":"@tanstack/react-query","version":"^4.13.0"},{"name":"react-router-dom","version":"^5.3.3"},{"name":"@prisma/client","version":"4.5.0"}],"devDependencies":[{"name":"vite","version":"^4.1.0"},{"name":"typescript","version":"^4.9.3"},{"name":"@types/react","version":"^17.0.53"},{"name":"@types/react-dom","version":"^17.0.19"},{"name":"@types/react-router-dom","version":"^5.3.3"},{"name":"@vitejs/plugin-react-swc","version":"^3.0.0"},{"name":"dotenv","version":"^16.0.3"},{"name":"@tsconfig/vite-react","version":"^1.0.1"}]}}

waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/server/package.json

@@ -7,7 +7,7 @@
     "express": "~4.18.1",
     "helmet": "^6.0.0",
     "jsonwebtoken": "^8.5.1",
-    "lodash": "^4.17.21",
+    "lodash.merge": "^4.6.2",
     "morgan": "~1.10.0",
     "patch-package": "^6.4.7",
     "secure-password": "^4.0.0",

waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/server/src/config.js

@@ -1,4 +1,4 @@
-import _ from 'lodash'
+import merge from 'lodash.merge'
 
 import { stripTrailingSlash } from "./universal/url.js";
 
@@ -24,5 +24,5 @@ const config = {
   }
 }
 
-const resolvedConfig = _.merge(config.all, config[env])
+const resolvedConfig = merge(config.all, config[env])
 export default resolvedConfig

waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <link rel="shortcut icon" href="/favicon.ico" />
+        <meta
+            name="viewport"
+            content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
+        />
+        <meta name="theme-color" content="#000000" />
+
+        <link rel="manifest" href="/manifest.json" />
+
+        
+
+        <title>waspCompile</title>
+    </head>
+
+    <body>
+        <noscript>You need to enable JavaScript to run this app.</noscript>
+        <div id="root"></div>
+        <script type="module" src="/src/index.tsx"></script>
+    </body>
+</html>

waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/package.json

@@ -17,32 +17,29 @@
     "axios": "^0.27.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-router-dom": "^5.3.3",
-    "react-scripts": "5.0.1"
+    "react-router-dom": "^5.3.3"
   },
   "devDependencies": {
-    "@tsconfig/create-react-app": "^1.0.3",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.11",
+    "@tsconfig/vite-react": "^1.0.1",
+    "@types/react": "^17.0.53",
+    "@types/react-dom": "^17.0.19",
     "@types/react-router-dom": "^5.3.3",
-    "dotenv": "16.0.3",
-    "typescript": "^4.8.4"
+    "@vitejs/plugin-react-swc": "^3.0.0",
+    "dotenv": "^16.0.3",
+    "typescript": "^4.9.3",
+    "vite": "^4.1.0"
   },
   "engineStrict": true,
   "engines": {
     "node": "^18.12.0"
   },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
   "name": "waspCompile",
   "private": true,
   "scripts": {
-    "build": "npm run validate-env && react-scripts build",
-    "eject": "react-scripts eject",
-    "start": "npm run validate-env && react-scripts start",
-    "test": "react-scripts test",
+    "build": "npm run validate-env && tsc && vite build",
+    "start": "npm run validate-env && vite",
     "validate-env": "node -r dotenv/config ./scripts/validate-env.mjs"
   },
+  "type": "module",
   "version": "0.0.0"
 }

waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/public/index.html

@@ -1,49 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <meta charset="utf-8" />
-        <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
-        <meta
-            name="viewport"
-            content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
-        />
-        <meta name="theme-color" content="#000000" />
-
-        <!--
-             manifest.json provides metadata used when your web app is installed on a
-             user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-        -->
-        <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-
-        <!--
-             Notice the use of %PUBLIC_URL% in the tags above.
-             It will be replaced with the URL of the `public` folder during the build.
-             Only files inside the `public` folder can be referenced from the HTML.
-
-             Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-             work correctly both with client-side routing and a non-root public URL.
-             Learn how to configure a non-root public URL by running `npm run build`.
-        -->
-
-        
-
-        <title>waspCompile</title>
-    </head>
-
-    <body>
-        <noscript>You need to enable JavaScript to run this app.</noscript>
-        <div id="root"></div>
-
-        <!--
-             This HTML file is a template.
-             If you open it directly in the browser, you will see an empty page.
-
-             You can add webfonts, meta tags, or analytics to this file.
-             The build step will place the bundled scripts into the <body> tag.
-
-             To begin the development, run `npm start` or `yarn start`.
-             To create a production bundle, use `npm run build` or `yarn build`.
-        -->
-
-    </body>
-</html>

waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/src/config.js

@@ -1,6 +1,6 @@
 import { stripTrailingSlash } from "./universal/url";
 
-const apiUrl = stripTrailingSlash(process.env.REACT_APP_API_URL) || 'http://localhost:3001';
+const apiUrl = stripTrailingSlash(import.meta.env.REACT_APP_API_URL) || 'http://localhost:3001';
 
 const config = {
   apiUrl,

waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/src/ext-src/react-app-env.d.ts

@@ -1,60 +0,0 @@
-declare module '*.avif' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.bmp' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.gif' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.jpg' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.jpeg' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.png' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.webp' {
-    const src: string;
-    export default src;
-}
-
-declare module '*.svg' {
-  import * as React from 'react';
-
-  export const ReactComponent: React.FunctionComponent<React.SVGProps<
-    SVGSVGElement
-  > & { title?: string }>;
-
-  const src: string;
-  export default src;
-}
-
-declare module '*.module.css' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.module.scss' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.module.sass' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}