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 中的东西。

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

--- 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'
          }
        }
      }
    }
  })

这里是你的分叉回购：https://github.com/hedikasmanto/rnw-styled-next

结果：

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