nextjs + react-native-web + styled-components : warnOnce
nextjs + react-native-web + styled-components : warnOnce
提问于 2019-09-06 10:43:57
当我尝试使用带有react-native-web和styled-components的NextJS时，我总是碰壁。
这个问题似乎与样式化组件中"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
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-09-20 15:57:22
我用谷歌搜索了一下，也找到了这个箱子..解决方案是安装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'
}
}
}
}
})这是你派生的repo：https://github.com/hedikasmanto/rnw-styled-next
结果是：
希望它能拯救您的一天:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57815082
复制相关文章
相似问题
腾讯云开发者
