Installing sandpack-react: missing templates.js in codesandbox-import-utils

[rebeccapeltz]

Bug report

Packages affected

• sandpack-client
• [ x] sandpack-react

Description of the problem

Using npm i @codesandbox/sandpack-react
When I execute locally with npm run start I get this error about a missing templates.js file

Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/rebeccapeltz/projects/react-playground/node_modules/@codesandbox/sandpack-client/node_modules/codesandbox-import-utils/src/create-sandbox/templates.ts' file: Error: ENOENT: no such file or directory, open '/Users/rebeccapeltz/projects/react-playground/node_modules/@codesandbox/sandpack-client/node_modules/codesandbox-import-utils/src/create-sandbox/templates.ts'

What were you doing when the problem occurred?

opening local react app server

What steps can we take to reproduce the problem?

create a new directory
run npm i @codesandbox/sandpack-react
run npm run start

I tried it with yarn and npm and got the same error.

Here's a GitHub repo with my problem: https://github.com/rebeccapeltz/bug-playground

Link to sandbox: link (optional)

Your Environment

Software	Name/Version
Sandpack-client version
Sandpack-react version
Browser
Operating System

[danilowoz]

Hey, I'm sorry to hear you're facing this issue, but I just got it running. Here's a preview: https://codesandbox.io/p/github/rebeccapeltz/bug-playground/main?file=%2FREADME.md

Which Node version are you using? Have you tried to reinstall more than once? I might be an issue on the dependencies manager and not exactly on Sandpack.

[rebeccapeltz]

I updated my yarn, and the same error happened. Is there any way I can know more about the setup of codesandbox.io so I can match it? I'm using yarn v1.22.19. I see that the code sandbox you shared has the same yarn.lock as the one I am running locally. I'm using node v 19.1. I used an npm install instead of yarn, which got the app running locally but still produced the warning. I don't know a way to see the terminal or console inside sandbox.io.

Compiled with warnings.

Failed to parse source map from '/Users/rebeccapeltz/projects/react-playground/node_modules/@codesandbox/sandpack-client/node_modules/codesandbox-import-utils/src/create-sandbox/templates.ts' file: Error: ENOENT: no such file or directory, open '/Users/rebeccapeltz/projects/react-playground/node_modules/@codesandbox/sandpack-client/node_modules/codesandbox-import-utils/src/create-sandbox/templates.ts'

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

Leave this at runs with node, but produces a warning.

[danilowoz]

As far as I can understand, this is just a warning, and it should not block you from using Sandpack. The warning mentions a source-map loading error from codesandbox-import-utils, which doesn't affect the final application, as this file is used only for debugging purposes.

Ideally, CodeSandbox should address this error and point to the right source-map file. I'll try to fix this issue as soon as I can.

[rebeccapeltz]

At this point, there is a success with installing packages via npm and failure when installing with yarn. Does codesanbox.io use npm to install? I thought it used parcel - maybe the local install would work with parcel?

[janza]

Hi, in the latest version of sandpack the warning in the import seems to be throwing an error now. The issue is reproducible with a fresh install of create-react-app and sandpack v2.0.1.

I've updated sandpack to latest version in the bug sandbox where the error can be reproduced.