jsdf/react-native-htmlview

Attempted import error: 'ViewPropTypes' is not exported from 'react-native-web/dist/index'.

Natetronn opened this issue · 8 comments

Natetronn commented

I tried to access the app using Expo Web and got one error in terminal and one in the browser. It seemed to work fine in Android emulator, however.

Terminal error:

Compiled with warnings.
/home/usnerame/Code/htmlviewExpo/node_modules/react-native-htmlview/HTMLView.js
Attempted import error: 'ViewPropTypes' is not exported from 'react-native-web/dist/index'.

Not sure if it's related but, I saw this issue as well, which also mentions HTMLView.js line 149: #311

And this browser error, which would seem to make sense if ViewPropTypes isn't exported any more by react-native-web. Possibly more on that here: necolas/react-native-web#1537

And a possible solution was suggested here: necolas/react-native-web#1537 (comment) (not sure that's the best way or not but, trying to help troubleshoot or at least research. Hope that helps.)

Initial browser error with no visable app/site:

TypeError: can't access property "style", react_native_web_dist_index__WEBPACK_IMPORTED_MODULE_14__.ViewPropTypes is undefined
../../../../../../../../../../../Code/htmlviewExpo/node_modules/react-native-htmlview/HTMLView.js
node_modules/react-native-htmlview/HTMLView.js:149

  146 | renderNode: PropTypes.func,
  147 | RootComponent: PropTypes.func,
  148 | rootComponentProps: PropTypes.object,
> 149 | style: ViewPropTypes.style,
      | ^  150 | stylesheet: PropTypes.object,
  151 | TextComponent: PropTypes.func,
  152 | textComponentProps: PropTypes.object,

__webpack_require__
/home/username/Code/htmlviewExpo/webpack/bootstrap:789

  786 | };
  787 | 
  788 | // Execute the module function
> 789 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  790 | 
  791 | // Flag the module as loaded
  792 | module.l = true;

fn
/home/username/Code/htmlviewExpo/webpack/bootstrap:100

   97 | 		);
   98 | 		hotCurrentParents = [];
   99 | 	}
> 100 | 	return __webpack_require__(request);
      | ^  101 | };
  102 | var ObjectFactory = function ObjectFactory(name) {
  103 | 	return {

../../../../../../../../../../../Code/htmlviewExpo/node_modules/react-native-htmlview/index.js
node_modules/react-native-htmlview/index.js:1
__webpack_require__
/home/username/Code/htmlviewExpo/webpack/bootstrap:789

  786 | };
  787 | 
  788 | // Execute the module function
> 789 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  790 | 
  791 | // Flag the module as loaded
  792 | module.l = true;

fn
/home/username/Code/htmlviewExpo/webpack/bootstrap:100

   97 | 		);
   98 | 		hotCurrentParents = [];
   99 | 	}
> 100 | 	return __webpack_require__(request);
      | ^  101 | };
  102 | var ObjectFactory = function ObjectFactory(name) {
  103 | 	return {

../../../../../../../../../../../Code/htmlviewExpo/App.js
http://localhost:19006/static/js/bundle.js:887:98
__webpack_require__
/home/username/Code/htmlviewExpo/webpack/bootstrap:789

  786 | };
  787 | 
  788 | // Execute the module function
> 789 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  790 | 
  791 | // Flag the module as loaded
  792 | module.l = true;

fn
/home/username/Code/htmlviewExpo/webpack/bootstrap:100

   97 | 		);
   98 | 		hotCurrentParents = [];
   99 | 	}
> 100 | 	return __webpack_require__(request);
      | ^  101 | };
  102 | var ObjectFactory = function ObjectFactory(name) {
  103 | 	return {

../../../../../../../../../../../Code/htmlviewExpo/node_modules/expo/AppEntry.js
node_modules/expo/AppEntry.js:1
__webpack_require__
/home/username/Code/htmlviewExpo/webpack/bootstrap:789

  786 | };
  787 | 
  788 | // Execute the module function
> 789 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  790 | 
  791 | // Flag the module as loaded
  792 | module.l = true;

fn
/home/username/Code/htmlviewExpo/webpack/bootstrap:100

   97 | 		);
   98 | 		hotCurrentParents = [];
   99 | 	}
> 100 | 	return __webpack_require__(request);
      | ^  101 | };
  102 | var ObjectFactory = function ObjectFactory(name) {
  103 | 	return {

1
http://localhost:19006/static/js/bundle.js:65801:18
__webpack_require__
/home/username/Code/htmlviewExpo/webpack/bootstrap:789

  786 | };
  787 | 
  788 | // Execute the module function
> 789 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  790 | 
  791 | // Flag the module as loaded
  792 | module.l = true;

(anonymous function)
/home/username/Code/htmlviewExpo/webpack/bootstrap:856

  853 | 
  854 | 
  855 | // Load entry module and return exports
> 856 | return hotCreateRequire(1)(__webpack_require__.s = 1);
      | ^  857 | 

(anonymous function)
http://localhost:19006/static/js/bundle.js:860:10
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.  Click the 'X' or hit ESC to dismiss this message.
Natetronn commented

I tried the above fix i.e. adding export const ViewPropTypes = { style: null }; necolas/react-native-web#1537 (comment) to the bottom of node_modules/react-native-web/dist/index.js and I'm now able to get past the above browser and terminal errors and can see the app/site but, I do get this warning in the browser console:

Warning: Failed prop type: HtmlView: prop type `style` is invalid; it must be a function, usually from the `prop-types` package, but received `object`.
    in HtmlView (at App.js:74)
    in App (created by ExpoRootComponent)
    in ExpoRootComponent (created by RootComponent)
    in RootComponent
    in div (created by View)
    in View (created by AppContainer)
    in div (created by View)
    in View (created by AppContainer)
    in AppContainer index.js:1
    e index.js:1
    printWarning checkPropTypes.js:20
    checkPropTypes checkPropTypes.js:82
    React 2
    render App.js:73
    React 13
    renderApplication renderApplication.js:23
    run index.js:51
    runApplication index.js:95
    registerRootComponent registerRootComponent.web.tsx:14
    js AppEntry.js:5
    Webpack 6
  • 👍1
sebellows commented

I ran into the same problem and wound up having to write a patch file using patch-package.

  1. In node_modules/react-native-htmlview/HTMLView.js remove ViewPropTypes from the import statement.
  2. Below the imports, add the following:
const ViewPropTypes = typeof document !== 'undefined' || Platform.OS === 'web'
  ? PropTypes.shape({style: PropTypes.object})
  : require('react-native').ViewPropTypes || View.propTypes;
  1. Then run the following command: npx patch-package react-native-htmlview. This will generate a patch file locally in folder named "patches".
  2. Now, in your package.json file, add a postinstall command to your scripts like so:
"scripts": {
  "postinstall": "patch-package"
}

This was what I needed to do so I could get Storybook running under my Expo example app for the project I've been working on.

  • 👍14
  • 🎉3
  • ❤️4
Zuhirbadr commented

#313 (comment)
that really works

kamatchipannerselvam commented

I ran into the same problem and wound up having to write a patch file using patch-package.

  1. In node_modules/react-native-htmlview/HTMLView.js remove ViewPropTypes from the import statement.
  2. Below the imports, add the following:
const ViewPropTypes = typeof document !== 'undefined' || Platform.OS === 'web'
  ? PropTypes.shape({style: PropTypes.object})
  : require('react-native').ViewPropTypes || View.propTypes;
  1. Then run the following command: npx patch-package react-native-htmlview. This will generate a patch file locally in folder named "patches".
  2. Now, in your package.json file, add a postinstall command to your scripts like so:
"scripts": {
  "postinstall": "patch-package"
}

This was what I needed to do so I could get Storybook running under my Expo example app for the project I've been working on.

Thank you much . You saved my time

frknltrk commented

change all ViewPropTypes.style to PropTypes.style in the source code
don't forget to import PropTypes from "prop-types";
which requires npm install prop-types

Vytas88 commented

Thanks everybody for sharing your solution ideas for this.
I am having these ViewPropTypes, requireNativeComponent and other similar Attempted import errors. I took over one React Native and Kotlin Springboot as a backend project.
It helped in the beginning to comment out ViewPropTypes in some files, but there are so many and seems to be never ending. Not sustainable solution.
Capture84

BrianWendt commented

I ended up removing ViewPropTypes entirely and that got it working with the version of React Native that I'm on (0.69.6)

radekzz commented

Simple solution here:

yarn add deprecated-react-native-prop-types

In node_modules/react-native-htmlview/HTMLView.jsremove ViewPropTypes from the import statement.

Insert import { ViewPropTypes } from 'deprecated-react-native-prop-types'

But i hope that author will update a package so we don't need this anymore.