sandpack icon indicating copy to clipboard operation
sandpack copied to clipboard

Using nextjs app dir inside of sandpack

Open benjaminshafii opened this issue 1 year ago • 4 comments

Bug report

Packages affected

  • [x] sandpack-client
  • [x] sandpack-react

Description of the problem

I am trying to use Sandpack with Next.js and set up the app directory inside the template. Specifically, I want to modify the Next.js template to reflect the app directory file structure and use it in my custom setup.

What were you doing when the problem occurred?

I was trying to modify the Next.js template used by Sandpack to reflect the app directory file structure.

What steps can we take to reproduce the problem?

  1. Modify the Next.js template used by Sandpack to reflect the app directory file structure.
  2. Use the modified template in the custom setup of Sandpack.
  3. Run Sandpack with the modified template and observe the problem.

Link to sandbox:

Interestingly the sandbox link loads correctly https://codesandbox.io/p/sandbox/lq7kpr?utm_medium=sandpack&file=%2Fapp%2Fpage.js%3A1%2C1

Your Environment

Software Name/Version
Sandpack-react version ^2.6.7
Browser Chrome 113.0.5672.126 (Official Build) (arm64)
Operating System macos13.3.1 (22E261)

Screenshots

Instatiation of sandpack image

Modified NEXTJS template

image

Error message image

benjaminshafii avatar Jun 14 '23 18:06 benjaminshafii

any news? did you manage to get it working?

ochmanski avatar Dec 03 '23 18:12 ochmanski

Screenshot 2023-12-03 at 19 19 54

getting this error with next 13.5.6 and @next/swc-wasm-nodejs 13.5.6

ochmanski avatar Dec 03 '23 18:12 ochmanski

any updates?

xiaomuxi avatar Feb 20 '24 09:02 xiaomuxi

Same issue

cameronking4 avatar Apr 17 '24 05:04 cameronking4