%c%s & color: rgba(125, 125, 125, 0.5) in console.log <Sandpack/> (strictMode?)

[hcw0915]

Bug report

Packages affected

• [X] sandpack-client (in resolutions)
• [X] sandpack-react

{
  "name": "portfolio",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --port=8591",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@codesandbox/sandpack-react": "^2.13.7",
    "@codesandbox/sandpack-themes": "^2.0.21",
    "@monaco-editor/react": "^4.6.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-markdown": "^8.0.3",
    "react-router-dom": "6",
    "react-syntax-highlighter": "^15.5.0",
    "remark-gfm": "3.0.1",
    "styled-components": "^6.1.8",
    "styled-react-modal": "^3.1.1",
    "uninstall": "^0.0.0",
    "usehooks-ts": "^3.1.0",
    "zustand": "^4.5.2"
  },
  "devDependencies": {
    "@tailwindcss/typography": "^0.5.12",
    "@types/node": "^20.12.4",
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@types/react-syntax-highlighter": "^15.5.11",
    "@typescript-eslint/eslint-plugin": "^7.2.0",
    "@typescript-eslint/parser": "^7.2.0",
    "@vitejs/plugin-react": "^4.2.1",
    "autoprefixer": "^10.4.19",
    "babel-plugin-macros": "^3.1.0",
    "babel-plugin-styled-components": "^2.1.4",
    "eslint": "^8.57.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "eslint-plugin-simple-import-sort": "^12.0.0",
    "postcss": "^8.4.38",
    "tailwindcss": "^3.4.3",
    "twin.macro": "^3.4.1",
    "typescript": "^5.2.2",
    "vite": "^5.2.0",
    "vite-plugin-svgr": "^4.2.0"
  },
  "resolutions": {
    "@codesandbox/sandpack-client": "2.10.0"
  },
  "babelMacros": {
    "twin": {
      "preset": "styled-components"
    }
  }
}

Description of the problem

the console would log out some text

%c%s color: rgba(125, 125, 125, 0.5)

but if i click the Open Sandbox redirect to codesandbox.io

i think that it is becaue of the strict mode , but how can i turn off it in <sandpack/>

What were you doing when the problem occurred?

import { type SandpackPredefinedTemplate } from "@codesandbox/sandpack-react";
import { nightOwl } from "@codesandbox/sandpack-themes";

type PlaygroundProps = {
  code: string;
  langType?: SandpackPredefinedTemplate;
};

import { Sandpack } from "@codesandbox/sandpack-react";

export const Playground = (props: PlaygroundProps) => {
  const { code = "console.log('hello world')", langType = "react" } = props;

  const files = {
    "/App.js": `
import React from 'react';

function App() {
  const [count, setCount] = React.useState(0);
  console.log('asdasd')

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}
export default App;
    `,
  };

  return (
    <Sandpack
      files={files}
      template={langType}
      theme={nightOwl}
      options={{
        showConsole: true,
        showRefreshButton: true,
        showConsoleButton: true,
        showLineNumbers: true,
        editorHeight: 680,
      }}
    />
  );
};

What steps can we take to reproduce the problem?

Link to sandbox: [link]() (optional)

Your Environment

Software	Name/Version
Sandpack-client version	"2.10.0"
Sandpack-react version	"^2.13.7"
Browser	Google Chrome 123.0.6312.124 (arm64)
Operating System	macOS Sonoma 14.3

[SSHari]

@hcw0915 I took a look at what might be going on here and I think there are a couple of problems:

1. It doesn't look like the Sandpack Console supports styling the console output like the standard browser console (go to the section Styling console output)
2. In React's Strict Mode, your component will be rendered twice to try and detect bugs or other issues. This means any logs defined in a component will run twice as well. React tries to address this by dimming the style for the second set of logs. I think this is the culprit: https://github.com/facebook/react/blob/main/packages/react-devtools-shared/src/hook.js#L296

With all that said, I'd say the issue is on the Sandpack side since we're not processing string replacements or console styles. I made a sandbox to show the problem based on the comments above: https://codesandbox.io/p/sandbox/sandpack-issue-1123-tlrpqy. If you notice, the logs on the inside of the component are run twice with the second set having the styles added while the logs on the outside of the component are only run once. Also, if you try to manually add the formatting (i.e. %c), it won't work.

I think there are some options we could take:

1. Update the Sandpack Console component to handle string replacements and console styles (i.e. re-implement the browser's logic -- which may be non-standard)
2. Filter out string replacements and console styles before rendering the list of logs
3. Leave it as is and update the Limitations section of the Sandpack Console docs to explain what's happening

Given there's already a suggestion to use the console-feed package to address other limitations, I'd think number 3 above would make sense, but I think that's a decision for the core maintainers.

Thoughts @danilowoz?