fix: make disable default style env variable work for client side bundler and nextjs

[Jokcy]

What kind of change does this pull request introduce?

Make SANDPACK_BARE_COMPONENTS work for client bundler, and add Nextjs support.

close #713

What is the current behavior?

Not work for nextjs

What is the new behavior?

work for nextjs

Checklist

• Documentation;
• Storybook (if applicable);
• Tests;
• Ready to be merged;

[vercel]

@Jokcy is attempting to deploy a commit to the CodeSandbox Team on Vercel.

A member of the Team first needs to authorize it.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit c95a960:

Sandbox	Source
Sandpack	Configuration

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
sandpack-docs	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Mar 1, 2023 at 2:26PM (UTC)

[danilowoz]

Hey, @Jokcy! Thanks for opening this PR. But I didn't get why we need to make these changes to work on Nextjs
I just created a nextjs sandbox that works as expected on server/client: https://codesandbox.io/p/sandbox/infallible-ardinghelli-ybxh7

Could you highlight what's the current issue and how it solves it?

Edit: just saw your another comment on the issue, but I still can't understand what's the difference

[danilowoz]

@Jokcy I updated your sandbox using another approach and it worked as expected, check the next.config.js file
https://codesandbox.io/p/sandbox/restless-sun-3kzd1q

[Jokcy]

Can not open it, and why I try to sign in with Github it redirect to localhost:4000

[Jokcy]

It will work if you use env in next.config.js because env variables provided by this way will both take effect on server/client side. This did solve this problem but it's not the recommended way to provide env variables, it was hard coded into config file and diffcult to make a change in different environment (local/test/production etc). https://nextjs.org/docs/basic-features/environment-variables this is the recommended way. But for this case in nextjs it's enough for me.

Also I'm not sure if the typeof process !== 'undefined' will work correctly in other build tools (in my experience it should always be false for client side bundler), I will try vite/webpack later.

[danilowoz]

CodeSandbox is down now, we're taking a look what's going on. Thanks

[Jokcy]

@danilowoz I tried with vite, define variable in vite.config.js

export default defineConfig({
    plugins: [react()],
    define: {
        "process.env.SANDPACK_BARE_COMPONENTS": "true",
    },
});

It worked at dev mode because on dev mode vite will actually add an process object, but when you bundle the code for production, vite will directly replace the process.env.xxx and will not expose a process object.

So not matter if we add NEXT_PUBLIC_SANDPACK_BARE_COMPONENTS, we should still remove the typeof process !== 'undefined' condition。

[danilowoz]

Got it! It makes sense. Could you please update the documentation with the new env var you introduced? And then, let's get this merged

[Jokcy]

@danilowoz done!

[danilowoz]

Thank you

[origami-z]

This breaks on vite react now with process is not defined

https://codesandbox.io/p/sandbox/vite-react-sandpack-tqef1u?file=%2FREADME.md