Support remove default style on client side

[Jokcy]

Tell us how you think we can improve Sandpack

Currently sandpack provided a SANDPACK_BARE_COMPONENTS env variable to remove default style generated by stitches, but the syntax seems not work in most cases.

const getNodeProcess = (): false | string | undefined => {
  if (typeof process !== "undefined") {
    return process.env.SANDPACK_BARE_COMPONENTS;
  }

  return false;
};

for most client cases typeof process will be undefined because build tools like webpack will directly replace process.env.xxx instead of expose a process object to global. So this will always not work on client side.

Besides the name of the function getNodeProcess seems designed for only work on node process?

Packages affected

• sandpack-client
• sandpack-react

What is this feature?

Support remove default style on client side.

How would your idea work?

Just use

const getNodeProcess = (): false | string | undefined => {
    return process.env.SANDPACK_BARE_COMPONENTS;
};

And in case to support some meta framework like next, maybe we can use:

const getNodeProcess = (): false | string | undefined => {
    return process.env.SANDPACK_BARE_COMPONENTS || process.env.NEXT_PUBLIC_SANDPACK_BARE_COMPONENTS  ;
};

Do you have any examples of how you would like to see us implement it?

const getNodeProcess = (): false | string | undefined => {
    return process.env.SANDPACK_BARE_COMPONENTS || process.env.NEXT_PUBLIC_SANDPACK_BARE_COMPONENTS  ;
};

[Jokcy]

This env variable should work at build time so it should be fine with Nextjs🤔, but if I disable SSR for some page it still not work. Need to look deep to find the reason.

[Jokcy]

https://codesandbox.io/p/sandbox/amazing-hooks-qui6b8?file=%2Fpages%2Findex.tsx&selection=%5B%7B%22endColumn%22%3A49%2C%22endLineNumber%22%3A30%2C%22startColumn%22%3A49%2C%22startLineNumber%22%3A30%7D%5D

As this demo shows, nextjs will build code into to version, one for client side and one for server side, the server side build work fine with the env variable but the client build not.