nextjs + react-native-web + styled-components : warnOnce

Question

当我尝试将 NextJS 与 react-native-web 和 styled-components 一起使用时，我经常碰壁。

问题似乎与样式组件中 "react-native" 的不正确别名有关。不过我不确定如何解决它。

我知道如何让它与 Razzle.js 一起工作，但我一辈子都想不出如何使用 NextJS 达到相同的工作状态。我怀疑它与 webpack 的 config.externals 有关 - 但它也可能与 babel.config.js.

中的内容有关

如果有人解决了这个问题，你将成为我年度最喜欢的人。我已经设置回购重现问题

--- Next.js
pages/index.js - WORKS
pages/problem.js - FAILS (has styled-components/native)

--- Razzle
pages/Home.js - WORKS
pages/Home.js - WORKS (has styled-components/native)

https://github.com/Aleksion/rnw-styled-next https://github.com/Aleksion/rnw-styled-razzle

Answer 1

我用谷歌搜索了一下，也发现了这种情况。解决方案是安装 next-transpile-modules 并配置你的 next.config.js，如下所示

const withTM = require('next-transpile-modules')

module.exports = withTM({
    transpileModules: [
      "react-native", "styled-components", "styled-components/native"
    ],
    webpack: config => {
      return {
        ...config,
        resolve: {
          ...config.resolve,
          extensions: [
            '.web.ts',
            '.web.tsx',
            '.ts',
            '.tsx',
            '.web.js',
            '.web.jsx',
            '.js',
            '.jsx',
            ...config.resolve.extensions
          ],
          alias: {
            ...config.resolve.alias,
            'react-native$': 'react-native-web'
          }
        }
      }
    }
  })

结果：

希望它能拯救你的一天:)

nextjs + react-native-web + styled-components : warnOnce

nextjs + react-native-web + styled-components : warnOnce

styled-components

next.js

react-native-web