使用本机进行响应本机无法正常工作,引发一些加载程序问题

时间:2018-12-06 05:29:57

标签: reactjs react-native webpack

我已经向我的本地响应项目添加了内容,以分析为什么我的发布版本失败。但是我却遇到了另一个问题。我有一个带有以下config的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

1 个答案:

答案 0 :(得分:1)

您的问题是babel的配置不正确,无法编译这些错误中提到的代码中存在的功能。

具体问题:

  1. 静态方法属性(您需要https://babeljs.io/docs/en/babel-plugin-proposal-class-properties
  2. 流类型(您需要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和已安装的所有预设/插件。