Quokka not working in Vite (React App)

[mtsurov]

unable to run quokka in vs code on React project created with Vite.

Is this issue related to Quokka not outputting the expected results of your code?: Yes

Sample code

/* eslint-disable react/prop-types */
import { useState } from "react";
import "../css/ModalItems.css";
import { v4 as uuidv4 } from "uuid";

const AddItemDialog = ({ onSubmit, onCancel }) => {
  const [locationName, setlocationName] = useState("");
  const locationStatus = "EMPTY";

  return (
    <div className="dialog-container">
      <div className="dialog">
        <h2 className="dialog-title">Add Dock Location</h2>
        <label className="labelModal">
          Location Name:
          <input
            className="inputModal"
            type="text"
            maxLength="5"
            value={locationName}
            onChange={(e) => setlocationName(e.target.value)}
          />
        </label>
        <label className="labelModal">
          Location Status:
          <input
            className="inputModal"
            type="text"
            maxLength="5"
            value={locationStatus}
            disabled={true}
          />
        </label>
        <div className="dialog-buttons">
          <button
            className="buttonModal"
            onClick={() => {
              const newId = uuidv4();

              onSubmit({
                locationID: newId,
                locationName,
                locationStatus,
              });
              console.log("LocationID", newId);
              console.log("LocationName: ", locationName);
              console.log("locatioinStatus: ", locationStatus);
            }}
          >
            OK
          </button>
          <button className="buttonModal" onClick={onCancel}>
            Cancel
          </button>
        </div>
      </div>
    </div>
  );
};

export default AddItemDialog;

Quokka.js Console Output

​​​​​Quokka PRO 'AddItemDialog.jsx' (node: v18.13.0)​​​​
 
SyntaxError: Unexpected token '<' 
    at ESMLoader.moduleStrategy (node:internal/modules/esm/translators:119:18) 
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:468:14) 
    at async link (node:internal/modules/esm/module_job:68:21) 

Code editor version

Version: 1.82.2 (user setup) Commit: abd2f3db4bdb28f9e95536dfa84d8479f1eb312d Date: 2023-09-14T05:55:25.390Z Electron: 25.8.1 ElectronBuildId: 23779380 Chromium: 114.0.5735.289 Node.js: 18.15.0 V8: 11.4.183.29-electron.0 OS: Windows_NT x64 10.0.19044

[smcenlly]

Based on your Console Output, it looks like you don't have vite-node installed, which is a requirement for Quokka to run your code using vite. From our docs:

For projects using Vite, Quokka uses vite-node to run your JavaScript/TypeScript code in node.js using Vite’s resolvers and transformers. To use Quokka with vite-node, The vite-node package must be installed in your project; Quokka will automatically detect and use vite-node once it is installed.