React Native Web runtime error with @emotion/native

[hyochan]

Current behavior:

React Native Web runtime error with @emotion/native. It was fine using styled-component/native but started facing this after migrating to emotion.

To reproduce:

1. Clone the repository

   git clone https://github.com/hyochan/dooboolab.com.git
   

2. Check out the emotion repo version

   git checkout 366c1466f69d4bbbf1e9f4b4968aaf5b7be73c35
   

3. yarn && yarn web

4. In the browser you will see the below error in the web browser.

   index.js:10 Uncaught ReferenceError: exports is not defined
   at Module../node_modules/stylis/dist/stylis.mjs (index.js:10)
   at __webpack_require__ (bootstrap:851)
   at fn (bootstrap:150)
   at Object../node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js (emotion-cache.browser.esm.js:2)
   at __webpack_require__ (bootstrap:851)
   at fn (bootstrap:150)
   at Object.<anonymous> (emotion-react.browser.esm.js:2)
   at Object../node_modules/@emotion/react/dist/emotion-react.browser.esm.js (emotion-react.browser.esm.js:327)
   at __webpack_require__ (bootstrap:851)
   at fn (bootstrap:150)
   at Object../node_modules/@emotion/primitives-core/dist/emotion-primitives-core.browser.esm.js (emotion-primitives-core.browser.esm.js:3)
   at __webpack_require__ (bootstrap:851)
   at fn (bootstrap:150)
   at Object../node_modules/@emotion/native/dist/emotion-native.browser.esm.js (emotion-native.browser.esm.js:3)
   at __webpack_require__ (bootstrap:851)
   at fn (bootstrap:150)
   at Object.<anonymous> (Typography.ts:1)
   at Object../src/components/uis/Typography.ts (Typography.ts:59)
   at __webpack_require__ (bootstrap:851)
   at fn (bootstrap:150)
   at Object.<anonymous> (CodeOfConduct.tsx:1)
   at Object../src/components/pages/CodeOfConduct.tsx (CodeOfConduct.tsx:237)
   at __webpack_require__ (bootstrap:851)
   at fn (bootstrap:150)
   at Object.<anonymous> (RootStackNavigator.tsx:9)
   at Object../src/components/navigations/RootStackNavigator.tsx (RootStackNavigator.tsx:158)
   at __webpack_require__ (bootstrap:851)
   at fn (bootstrap:150)
   at Object.<anonymous> (App.tsx:7)
   at Object../src/App.tsx (App.tsx:36)
   at __webpack_require__ (bootstrap:851)
   at fn (bootstrap:150)
   at Object.<anonymous> (index.tsx:3)
   at Object../src/index.tsx (index.tsx:46)
   at __webpack_require__ (bootstrap:851)
   at fn (bootstrap:150)
   at Object.1 (wrapper.tsx:27)
   at __webpack_require__ (bootstrap:851)
   at checkDeferredModules (bootstrap:45)
   at Array.webpackJsonpCallback [as push] (bootstrap:32)
   at main.chunk.js:1
   

Expected behavior: No error

Environment information:

• react version: 17.0.2
• @emotion/react version: 11.1.5
• @emotion/native version: 11.0.0

[Andarist]

This really looks like a problem with your bundler - the stack trace points to stylis.mjs but you might check that this file doesn't contain a reference to exports variable so something is adding it there. https://unpkg.com/[email protected]/dist/stylis.mjs

This is not a problem on our side and, unfortunately, I won't have the time to dive into the provided repro.

[hyochan]

Alright~! Thanks for the reply tough 🙌

[hyochan]

@Andarist I'd just want to clarify that after migrating back to styled-components, issue is resolved. I've also described the issue here https://github.com/hyochan/dooboolab.com/issues/14.

The commit solved the problem.