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

Posted 2023-03-07

【中文标题】nextjs + react-native-web + styled-components ：warnOnce

【英文标题】：nextjs + react-native-web + styled-components : warnOnce

【发布时间】：2020-01-08 22:08:46

【问题描述】：

当我尝试将 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

【参考方案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

结果：

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

【讨论】：

是的，准确。感谢您提醒我跟进此事。我让它工作了，一切正常......好的。我只是忘了更新这个。我仍然遇到一些无法正确编译和摇树的问题，但它可以工作。所以这是一个开始。

现在不行了。有效的是在withTM() 中删除transpileModules，然后使用const withTM = require('next-transpile-modules')["styled-components", "styled-components/native"]。有关更多信息，请参阅文档：github.com/martpie/next-transpile-modules#scoped-packages