[bug] Typescript + styled-components breaks app

[jdukewich]

Describe the bug

I was recently trying to upgrade from 1.0.0-beta.8 to 1.0.0-rc.0. However, I was running into lots of errors. I've narrowed down a reproducible error with using styled-components and typescript in a React project. I tried my best to diagnose through styled-components, but the app works in the browser, just not a local Tauri app. The app was working in its entirety with 1.0.0-beta.8, but I'm not sure in which update this breaking change happened.

Reproduction

1. Create a new Tauri app using create-react-app

• yarn create tauri-app
• Press any key to continue
• Pick any app name, or leave default (tauri-app)
• Pick any window title, or leave default (Tauri App)
• UI Recipe: choose create-react-app
• Add "@tauri-apps/api" npm package
• Use Typescript create-react-app template
• Choose version 1.0.0-rc.0 for "@tauri-apps/cli`

2. Install styled-components for typescript

• yarn add styled-components @types/styled-components

3. Create a styled component in App.tsx

...
import styled from 'styled-components'

const Title = styled.h1`
  color: green;
`;
...
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <Title>Styled h1</Title>
      </header>
...

4. Run app yarn tauri dev
5. App is blank screen, but you can see it in a browser at http://localhost:3000

Expected behavior

Tauri app window is not a blank screen. Should look like the browser view if you navigate to http://localhost:3000

Platform and versions

$ tauri info

Operating System - Windows, version 10.0.19042 X64
Webview2 - 98.0.1108.43
Visual Studio Build Tools:
   - Visual Studio Build Tools 2019

Node.js environment
  Node.js - 17.3.1
  @tauri-apps/cli - 1.0.0-rc.0
  @tauri-apps/api - 1.0.0-rc.0

Global packages
  npm - 8.3.0
  pnpm - 6.11.0
  yarn - 1.22.15

Rust environment
  rustc - 1.58.1
  cargo - 1.58.0

Rust environment
  rustup - 1.24.3
  rustc - 1.58.1
  cargo - 1.58.0
  toolchain - stable-x86_64-pc-windows-msvc

App directory structure
/.git
/node_modules
/public
/src
/src-tauri

App
  tauri.rs - 1.0.0-rc.0
  build-type - bundle
  CSP - default-src 'self'
  distDir - ../build
  devPath - http://localhost:3000/
  framework - React

Stack trace

Uncaught TypeError: Cannot assign to read only property 'toString' of object '#<e>'
    at Sheet.js:122:1
    at Module../node_modules/styled-components/dist/styled-components.browser.esm.js (Sheet.js:127:1)
    at Module.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:61:1)
    at Module../src/App.tsx (wordmark.svg:29:1)
    at Module.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:61:1)
    at Module../src/index.tsx (App.tsx:46:1)

Additional context

I see that this is probably an issue with styled-components, but as I can only get the issue when running a Tauri app, I felt it best to bring the issue here in case the problem occurs with one of Tauri's dependencies

[spa5k]

Also happening with chakra ui which is based on emotion.

[pwespi]

Probably related to #3416

[lucasfernog]

By default we're freezing the prototype. You can set tauri.conf.json > security > freezePrototype to false to fix this problem. Note that you should freeze the prototype later if possible. Documentation on this will be updated soon.

[lucasfernog]

We're going to publish a new release changing the default value to false since this breaks on several frameworks.