reactjs - 与 haul 不工作的本地反应,引发一些 loader 问题
问题描述
我已经在我的 react native 项目中添加了数据,以分析我的发布构建失败的原因。但我遇到了另一个问题。我有一个带有以下配置的 webpack.haul.js
module.exports = {
entry: './index.js',
};
当我运行 react-native run-android 时,我看到以下错误。有人能帮助我吗。
ERROR Failed to compile.
./node_modules/native-base-shoutem-theme/src/StyleProvider.js 10:19
Module parse failed: Unexpected token (10:19)
You may need an appropriate loader to handle this file type.
| */
| export default class StyleProvider extends React.Component {
> static propTypes = {
| children: PropTypes.element.isRequired,
| style: PropTypes.object,
@ ./node_modules/native-base-shoutem-theme/index.js 3:0-48 7:0-15:2
@ ./node_modules/native-base/dist/src/index.js
@ ./screens/Academics/HomeWorkScreen.js
@ ./App.js
@ ./index.js
@ multi ./node_modules/haul/src/vendor/polyfills/Object.es6.js ./node_modules/haul/src/vendor/polyfills/console.js ./node_modules/haul/src/vendor/polyfills/error-guard.js ./node_modules/haul/src/vendor/polyfills/Number.es6.js ./node_modules/haul/src/vendor/polyfills/String.prototype.es6.js ./node_modules/haul/src/vendor/polyfills/Array.prototype.es6.js ./node_modules/haul/src/vendor/polyfills/Array.es6.js ./node_modules/haul/src/vendor/polyfills/Object.es7.js ./node_modules/haul/src/vendor/polyfills/babelHelpers.js ./node_modules/react-native/Libraries/Core/InitializeCore.js ./node_modules/haul/src/utils/polyfillEnvironment.js ./index.js
./node_modules/native-base-shoutem-theme/src/connectStyle.js 116:26
Module parse failed: Unexpected token (116:26)
You may need an appropriate loader to handle this file type.
|
| class StyledComponent extends React.Component {
> static contextTypes = {
| theme: ThemeShape,
| // The style inherited from the parent
@ ./node_modules/native-base-shoutem-theme/index.js 1:0-46 7:0-15:2
@ ./node_modules/native-base/dist/src/index.js
@ ./screens/Academics/HomeWorkScreen.js
@ ./App.js
@ ./index.js
@ multi ./node_modules/haul/src/vendor/polyfills/Object.es6.js ./node_modules/haul/src/vendor/polyfills/console.js ./node_modules/haul/src/vendor/polyfills/error-guard.js ./node_modules/haul/src/vendor/polyfills/Number.es6.js ./node_modules/haul/src/vendor/polyfills/String.prototype.es6.js ./node_modules/haul/src/vendor/polyfills/Array.prototype.es6.js ./node_modules/haul/src/vendor/polyfills/Array.es6.js ./node_modules/haul/src/vendor/polyfills/Object.es7.js ./node_modules/haul/src/vendor/polyfills/babelHelpers.js ./node_modules/react-native/Libraries/Core/InitializeCore.js ./node_modules/haul/src/utils/polyfillEnvironment.js ./index.js
./node_modules/rn-fetch-blob/index.js 13:12
Module parse failed: Unexpected token (13:12)
You may need an appropriate loader to handle this file type.
| AppState,
| } from 'react-native'
> import type {
| RNFetchBlobNative,
| RNFetchBlobConfig,
@ ./screens/Academics/HomeWorkScreen.js 1:603-627
@ ./App.js
@ ./index.js
@ multi ./node_modules/haul/src/vendor/polyfills/Object.es6.js ./node_modules/haul/src/vendor/polyfills/console.js ./node_modules/haul/src/vendor/polyfills/error-guard.js ./node_modules/haul/src/vendor/polyfills/Number.es6.js ./node_modules/haul/src/vendor/polyfills/String.prototype.es6.js ./node_modules/haul/src/vendor/polyfills/Array.prototype.es6.js ./node_modules/haul/src/vendor/polyfills/Array.es6.js ./node_modules/haul/src/vendor/polyfills/Object.es7.js ./node_modules/haul/src/vendor/polyfills/babelHelpers.js ./node_modules/react-native/Libraries/Core/InitializeCore.js ./node_modules/haul/src/utils/polyfillEnvironment.js ./index.js
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':app:bundleDemshReleaseJsAndAssets'.
> Process 'command 'node'' finished with non-zero exit value 1
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
* Get more help at https://help.gradle.org
解决方案
您的问题是,不知何故,babel 未正确配置以编译这些错误中提到的代码中存在的功能。
具体问题:
- 静态方法属性(你需要https://babeljs.io/docs/en/babel-plugin-proposal-class-properties)
- 流类型(你需要https://babeljs.io/docs/en/babel-plugin-transform-flow-strip-types)
很难准确地说出你的配置出了什么问题,但更快的测试方法是直接在这些文件上运行 babel CLI。如果您确保BABEL_ENV
和任何其他 babel cli/env/API 标志的设置方式与它们在 webpack 构建中的方式相同(您可能需要进行一些调试才能找到babel-loader
应用的位置),例如yarn run babel node_modules/native-base-shoutem-theme/src/StyleProvider.js
如果你能像这样重现问题,你可以用你的 babel 配置在一个更紧密的循环中进行试验,直到找到解决方案。
一个好的起点是更新 babel 和你安装的所有预设/插件。
推荐阅读
- reactjs - 如何在material-ui中将道具传递给传递给MenuItem的组件
- python - 当我使用fabric == 2.4.0'sudo helper getpass.getpass'时如何修复'没有可用的身份验证方法'
- css - 单击复选框项目不会将元素标记为已选中
- javascript - 修改后 datatables.search 函数的奇怪行为
- c# - 使用 AD/ADFS 和 .NET Native Client 的 SSO
- selenium - 如何找到选中属性的复选框
- docker - 两个 docker 容器之间的 rsync
- bitbucket - 为什么 bitbucket-pipelines 不创建缓存?
- azure - Azure CLI:az devops configure --defaults... 无效。我错过了什么?
- spring - 更改重定向:返回模型和视图时