SyntaxError: Unexpected token '<'

By default, Quokka runs your code using node.js.

If you run node Create.jsx, you'll get the same problem.

You will need to configure Quokka to use babel to transform your jsx file. You will also need to configure Quokka to emulate a browser environment using jsdom. If you have an empty project, you can do this by:

Creating a .quokka file in your project root:

.quokka

{
  "plugins": ["jsdom-quokka-plugin"],
  "babel": {
    "presets": ["@babel/preset-react"]
  }
}

Install the babel/jsdom dependencies if you don't already have them. I assume you already have react dependencies.

npm install @babel/core @babel/preset-react jsdom --save-dev

At this point, your code will compile and run, but you will need to load your component in a way that is compatible with running your program using node (vs. the browser where your code would normally run). You can read how to do this in the create-react-app section of our how does quokka work docs, also shown below:

Create.jsx

import { useState } from 'react';

console.log('This is ram');

export default function Create() {
  return <div>create</div>;
}

/********** 
 * Add necessary imports and tell react to render your component into the DOM
 *********/ 
import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import { act } from 'react-dom/test-utils';

// Tell react that we are in a test environment
global.IS_REACT_ACT_ENVIRONMENT = true

// Get a handle to the DOM element that we want to render into
const container = document.getElementById('root');

// Render your component into the DOM
// The act function is required to ensure that the component is rendered synchronously
act(() => {
  const root = ReactDOM.createRoot(container);
  root.render(<Create />);
});

// Log the DOM to the console
console.log(container.innerHTML);

wallabyjs / quokka

SyntaxError: Unexpected token '<' #892