Thursday, 13 January 2022

How can I use emotion with react-native-web?

I develop a cross-platform react-native application inside a monorepo and want to render my app using react-native-web in the browser. To achieve that I followed this guide https://mmazzarolo.com/blog/2021-09-22-running-react-native-everywhere-web/. I'm also using the metro-react-native-babel-preset package for compiling my web-app, as described in the react-native-web guide https://necolas.github.io/react-native-web/docs/multi-platform/. Here is a part of my craco.config.js file (I use create-react-app with craco):

// craco.config.js
const webpack = require("webpack");
const { getWebpackTools } = require("react-native-monorepo-tools");

const monorepoWebpackTools = getWebpackTools();

module.exports = {
  babel: {
    presets: ["module:metro-react-native-babel-preset", "@babel/preset-react"]
  },
  webpack: {
    configure: (webpackConfig) => {
      // Allow importing from external workspaces.
      monorepoWebpackTools.enableWorkspacesResolution(webpackConfig);
      // Ensure nohoisted libraries are resolved from this workspace.
      monorepoWebpackTools.addNohoistAliases(webpackConfig);
      return webpackConfig;
    },

Now it seems like the metro-react-native-babel-preset preset is not compatible with the stylis library (imported by @emotion/react), because I get this error when launching the app in the browser (it compiles without errors):

Uncaught TypeError: (0 , _stylis.middleware) is not a function
    at createCache (emotion-cache.browser.esm.js:288)
    at Object.../node_modules/@emotion/react/dist/emotion-element-699e6908.browser.esm.js (emotion-element-699e6908.browser.esm.js:11)
    at __webpack_require__ (bootstrap:851)
    at fn (bootstrap:150)
    at Object.<anonymous> (emotion-react.browser.esm.js:3)
    at Object.../node_modules/@emotion/react/dist/emotion-react.browser.esm.js (emotion-react.browser.esm.js:347)
    at __webpack_require__ (bootstrap:851)
    at fn (bootstrap:150)
    at Object.../node_modules...

I guess that the stylis-package cannot be imported correctly due to the metro-react-native-babel-preset preset, since without the preset the error is gone (but the compilation-step throws errors, so removing the preset is not a solution).

What do I have to change in my babel- / webpack-config or code to remove this error?

Minimum, reproducible example

https://github.com/Tracer1337/stackoverflow-mre



from How can I use emotion with react-native-web?

1 comment:

  1. Merkur Futur Adjustable Safety Razor - Sears
    Merkur Futur Adjustable 메리트 카지노 조작 Safety Razor is the perfect balance of performance, safety, and comfort. Made 메리트 카지노 도메인 in Solingen, Germany, 1xbet app this razor has a perfect 메리트카지노총판 balance 바카라 사이트 of

    ReplyDelete