Next.js nextjs+；react原生web+；样式化组件：warnOnce

在尝试将NextJS与react原生web和样式化组件一起使用时，我经常遇到麻烦

这些问题似乎与样式化组件中“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)

---

我在谷歌上搜索过，也找到了这个案子。。解决方案是安装下一个Transfile模块，然后像下面那样配置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'
          }
        }
      }
    }
  })

这是您的分叉回购：

结果是：

---

希望它能拯救你的一天：）

是的，马上就来。谢谢你提醒我跟进此事。我让它工作，一切都正常。。。好啊我只是忘了更新这个。我仍然会遇到一些问题，没有正确地编译和绘制树，但它可以工作。这是个开始，现在不行了。有效的方法是删除

transbileModules

内部

withTM（）

然后使用

constWithTM=require（'next-transbile-modules'）[“样式化组件”、“样式化组件/native”]

。有关更多信息，请参阅文档：