CORS Error in Tina Dashboard

Describe the issue that you're seeing. Any Loom videos or screenshots usually help a lot!

I have an existing NextJS project and am using this guide to add Tina to it: https://tina.io/docs/frameworks/nextjs/

npx @tinacms/cli@latest init worked fine. Then, I run npm run dev, navigate to http://localhost:3000/admin/index.html#/~, and I get this error.

Here is the full error: A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://reactjs.org/link/crossorigin-error for more information.

My website works fine when running without Tina. Why might this be happening?

Reproduction

Can't reproduce with starters

Steps to reproduce

Using your tailwind starter fails with the following error. I cannot reproduce my problem with the barebones starter.

sanderschulhoff@Sanders-MacBook-Pro tina test % npx create-tina-app@latest
✔ Which package manager would you like to use? › NPM
✔ What is your project named? … my-tina-app
✔ What starter code would you like to use? › Tailwind Starter
Downloading files from repo tinacms/tina-cloud-starter. This might take a moment.
Installing packages. This might take a couple of minutes.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: @tinacms/starter@0.1.0
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   react@"^18.2.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"15.x.x || 16.x.x || 17.x.x" from styled-jsx@3.4.7
npm ERR! node_modules/styled-jsx
npm ERR!   styled-jsx@"^3.2.5" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! /Users/sanderschulhoff/.npm/_logs/2024-03-17T16_01_30_549Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /Users/sanderschulhoff/.npm/_logs/2024-03-17T16_01_30_549Z-debug-0.log
node:internal/process/promises:289
            triggerUncaughtException(err, true /* fromPromise */);
            ^

[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "#<Object>".] {
  code: 'ERR_UNHANDLED_REJECTION'
}

Node.js v20.11.0

System Info

System:
    OS: macOS 14.3.1
    CPU: (8) arm64 Apple M2
    Memory: 1.19 GB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.0 - /usr/local/bin/node
    npm: 10.2.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 122.0.6261.129
    Safari: 17.3.1

Validations

[X] Follow our Code of Conduct
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug.

tinacms / tinacms