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

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: https://github.com/jsdf/react-native-htmlview/issues/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: https://github.com/necolas/react-native-web/issues/1537

And a possible solution was suggested here: https://github.com/necolas/react-native-web/issues/1537#issuecomment-619969653 (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.

[sebellows]

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.

[Natetronn]

I tried the above fix i.e. adding export const ViewPropTypes = { style: null }; https://github.com/necolas/react-native-web/issues/1537#issuecomment-619969653 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