如何在Native中使用Nextjs应用程序中的本机组件
如何在Native中使用Nextjs应用程序中的本机组件
提问于 2022-01-05 08:23:11
我试图在Nx中使用React本地组件。
当我运行Nextjs应用程序时，它成功地编译：
info - automatically enabled Fast Refresh for 1 custom loader
event - compiled client and server successfully in 375 ms (173 modules)
[ ready ] on http://localhost:4200当我访问http://localhost:4200时，它会再次编译并失败
wait - compiling / (client and server)...
error - ../../node_modules/react-native/index.js
Module parse failed: Unexpected token (14:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| // Components
> import typeof AccessibilityInfo from './Libraries/Components/AccessibilityInfo/AccessibilityInfo';
| import typeof ActivityIndicator from './Libraries/Components/ActivityIndicator/ActivityIndicator';
| import typeof Button from './Libraries/Components/Button';
(node:17163) [DEP_WEBPACK_MODULE_ISSUER] DeprecationWarning: Module.issuer: Use new ModuleGraph API
(Use `node --trace-deprecation ...` to show where the warning was created)
info - automatically enabled Fast Refresh for 1 custom loader
wait - compiling /_error (client and server)...
error - ../../node_modules/react-native/index.js
Module parse failed: Unexpected token (14:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| // Components
> import typeof AccessibilityInfo from './Libraries/Components/AccessibilityInfo/AccessibilityInfo';
| import typeof ActivityIndicator from './Libraries/Components/ActivityIndicator/ActivityIndicator';
| import typeof Button from './Libraries/Components/Button';
error - SyntaxError: Cannot use import statement outside a module此错误仅在我试图在Nextjs中使用React本机组件时才会发生。
回答 1
Stack Overflow用户
发布于 2022-01-17 01:39:53
刚开始工作。
npm
npm install --save react-native-web
npm install --save-dev babel-plugin-react-native-web纱线
yarn add react-native-web
yarn add --dev babel-plugin-react-native-web将.babelrc添加到应用程序/next-app-name/
{
"presets": [
[
"@nrwl/next/babel",
{
"runtime": "automatic",
"useBuiltIns": "usage"
}
]
],
"plugins": [["react-native-web", { "commonjs": true }]]
}在应用程序/下一个应用程序名称/页面中创建_document.tsx
import Document, { Html, Head, Main, NextScript } from 'next/document'
import { AppRegistry } from 'react-native'
export default class MyDocument extends Document {
static async getInitialProps({renderPage} ) {
AppRegistry.registerComponent('main', () => Main)
const page = await renderPage()
return{ ...page}
}
render() {
return (
<Html style={{ height: '100%' }}>
<Head />
<body style={{ height: '100%', overflow: 'hidden' }}>
<Main />
<NextScript />
</body>
</Html>
)
}
}然后砰！啊，真灵
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70589736
复制相关文章
相似问题
腾讯云开发者
