codesandbox / codesandbox-template-vite-react

An empty boilerplate template to start a fresh project

Vite + React

This is a Vite project together with React.

Configuration has been added to optimize it for CodeSandbox Projects.

Resources

• CodeSandbox Projects — Docs
• CodeSandbox — Discord
• Vite — GitHub
• Vite — Docs

codesandbox-template-vite-react's Issues

Upgrade @vitejs/plugin-react to ^4.0.0

I'm finding there's currently errors when resolving dependencies between vite and @vitejs/plugin-react when npm installing into a fresh sandbox using this template. This is likely because the @vitejs/plugin-react package in this template is version 2.2.0, whereas newer versions of vite require a newer version of the plugin.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @vitejs/[email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/vite
npm ERR!   dev vite@"^4.3.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer vite@"^3.0.0" from @vitejs/[email protected]
npm ERR! node_modules/@vitejs/plugin-react
npm ERR!   dev @vitejs/plugin-react@"^2.0.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/vite
npm ERR!   peer vite@"^3.0.0" from @vitejs/[email protected]
npm ERR!   node_modules/@vitejs/plugin-react
npm ERR!     dev @vitejs/plugin-react@"^2.0.0" from the root project

Upgrading to version ^4.0.0 for @vitejs/plugin-react seems to fix the issue.

[Bug] Does not work on CodeSandbox for iPadOS

This may be a bug with the template, or a problem specific to iPadOS. I’m not sure.

Steps to reproduce:

1. Install the Codesandbox app on iPadOS
2. Create a new Sandbox
3. Choose the React + Vite template
4. Run the command to install the deps
5. Wait for the deps to install
6. Run the dev command
7. Observe the following error:

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /private/var/mobile/Containers/Data/Application/20FF0B6C-3ADA-4435-979F-94D5E5EFB1A5/Documents/sandboxes/4knv8u/src/node_modules/vite/bin/vite.js
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1192:13)
    at Module.load (internal/modules/cjs/loader.js:1009:32)
    at Function.Module._load (internal/modules/cjs/loader.js:903:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)
    at MessagePort.<anonymous> (internal/main/worker_thread.js:167:24)
    at MessagePort.emit (events.js:321:20)
    at MessagePort.onmessage (internal/worker/io.js:78:8)

Two asides:

• I’d love to see a CRA template in the default list. I recognize that CRA is not new and fancy, but it’s provided a consistent and reliable experience for years, and many devs continue to use it. Esp. for quick things like what someone might use Codesandbox for (vs. a full app). Or perhaps a way for users to create their own templates that appear in the “New Sandbox” modal.

• I tried testing on the web version, but it seems Codesandbox requires full read/write access to public/private repos, even to create a Vite+React Sandbox. I’m not interested in giving this app those full perms, so I wasn’t able to test it. Perhaps ther are technical reasons preventing you from doing this, but I’d encourage you to consider a version of CS that does not require full read/write access. I know it’s required for Projects, but many people may wish to only use Sandboxes.

Thanks for reading!