Can't resolve 'react-native-web/dist/exports/ViewPropTypes' after upgrading to 0.12.1

Question

Can't resolve 'react-native-web/dist/exports/ViewPropTypes' after upgrading to 0.12.1

kopax opened this issue 5 years ago · 57 comments

I have tried to upgrade from react-native-web v0.11.7 to 0.12.1 and it breaks my app:

 Module not found: Can't resolve 'react-native-web/dist/exports/ViewPropTypes' in '/home/dka/workspace/test-native/node_modules/react-native-swipe-list-view/components'

See:

https://github.com/jemise111/react-native-swipe-list-view/blob/6f22515c1d404d51bf8a6d1591ec51d241b77b9b/components/SwipeRow.js#L11

Related to:

jemise111/react-native-swipe-list-view#412

Answer 1 · 2020-02-11T19:21:34.000Z

It was removed as mentioned in the release notes https://github.com/necolas/react-native-web/releases/tag/0.12.0

Answer 2 · 2020-03-19T13:07:00.000Z

A lot of other packages are not able to be compiled after upgrading to 0.12.x
We use react-native-web as alias for react-native. So, if react-native still support prop types exports, but as deprecated, i think this package should behave in the same way: support them, but deprecated.

Answer 3 · 2020-04-23T08:34:26.000Z

Hello.
I have the same issue like this.
My import is like this
import {Overlay as BaseOverlay, Button, Text} from 'react-native-elements/src/index';

And errors in terminal
./node_modules/react-native-elements/src/config/ViewPropTypes.js Attempted import error: 'ViewPropTypes' is not exported from 'react-native-web' (imported as 'RNViewPropTypes').

I created the react app using create-react-native-web-app command.

System: Windows 10
IDE: VS Code
"node": v13.6.0
"react": "^16.13.0"
"react-native": "0.61.5"
"react-native-elements": "^1.0.0-beta8"
"react-native-web": "^0.12.2"

What is the solution to fix this issue?
Thanks for your reply.

Answer 4 · 2020-04-27T12:59:04.000Z

Hello developers,
I had the same issue. Before, I manually copied the library I was using in my code, but it turns out was not the best way so I created a workaround.

Explanation
If you mock ViewPropTypes in node_modules/react-native-web/dist/index.js the error will go away.
So what I did is I wrote some batch file for Windows, bash for Unix-like, Python for both, it is up to you to decide which one. Just copy and paste.

Workaround

create a .bat|.sh|.py file depending on your OS anywhere in your app and feel free to customize the mock. For me setting the style to null fixed the issue. In my case, I created a folder called scripts so my file is located at scripts/fix.bat|.sh|.py

Copy & paste the code

Python: fix.py OS-agnostic, use this if possible

import os
import sys

print("✅ Fixing PropTypes issues")
dir_path = os.path.dirname(os.path.realpath(__file__))
rnw_filename = dir_path + "/../node_modules/react-native-web/dist/index.js"

def append_new_line(file_name, text_to_append):
    """Append given text as a new line at the end of file"""
    
    if text_to_append in open(file_name).read():
        print("⏭️  Skipping...")
    else:
        with open(file_name, "a+") as file_object:        
            file_object.write("\n")
            file_object.write(text_to_append)
            file_object.close()

# Fix 
append_new_line(rnw_filename, "export const ViewPropTypes = { style: null };")

Windows Batch: fix.bat

@echo off
echo 'Fixing ViewPropTypes issues'
REM Fix ViewPropTypes issues
ECHO export const ViewPropTypes = { style: null };>>"PATH_TO_NODE_MODULES/react-native-web/dist/index.js"

Unix-like bash: fix.sh

#!/bin/bash

echo 'Fixing PropTypes issues'

if grep -q "export const ViewPropTypes = { style: null };" ../node_modules/react-native-web/dist/index.js; then
    echo "ViewPropTypes fixed already!"
else
    echo "export const ViewPropTypes = { style: null };">> ../node_modules/react-native-web/dist/index.js
fi

I added in the bash a cool if-else so that you can run it infinitely without duplicating it.

Please replace PATH_TO_NODE_MODULES with the path to your node_modules folder. For example, if you at your root folder it should be "node_modules"

(optional) Go in your package.json

Each time you run npm install | ``yarn install` or when you add a new package, the fix is removed, since the package refreshed. To overcome this, modify your scripts and add a post-install command that is called after.
Basically, it would execute your bat script each time you hit npm or yarn install.

With the python version
"postinstall": "python fix.py"

With .bat or .sh
"postinstall": "fix"

Hope it would help.
It works for me. Don't hesitate to ask me anything.
Thanks!
Franz

Answer 5 · 2020-06-16T14:30:31.000Z

Hello @franznkemaka I have the same issue of @hakuna0829 but the script didn't fix my problem, but I'm not sure if I'm making the things good, this is the way that I put that script in the package.json :

....
"scripts": {
"web": "node scripts/start.js",
"test:web": "node scripts/test.js",
"build": "node scripts/build.js",
"start": "react-native start",
"start-clean": "rm -rf $TMPDIR/react-* && watchman watch-del-all && npm start -- --reset-cache",
"test": "npm run test:web && npm run test:native",
"android": "react-native run-android",
"ios": "react-native run-ios",
"test:native": "node_modules/.bin/jest -c ./config/jest/jest.config.native.js",
"postinstall": "autofix.bat"
},
....
and I have put the file autofix.bat in the root of my project.
than you

Answer 6 · 2020-06-16T14:38:42.000Z

Hello @willerpp,
it should normally work. May I please see the content of your autofix.bat?

Possible fixes:

Did you try to run the script manually via cmd? The script will only run if something is installed. For the first time, I had to run it manually, as I already installed my packages.
Open node_modules/react-native-web/dist/index.js. Can you see this at the bottom
export const ViewPropTypes = { style: null };

Thanks!
Franz

Answer 7 · 2020-06-16T15:17:51.000Z

Ok well, I have added it manually to the file and it works, let me try to run the script manually. thank you so much for your response.

…

On Tue, Jun 16, 2020 at 10:38 AM Franz Nkemaka ***@***.***> wrote: Hello @willerpp <https://github.com/willerpp>, it should normally work. May I please see the content of your autofix.bat? *Possible fixes:* 1. Did you try to run the script manually via cmd? The script will only run if something is installed. For the first time, I had to run it manually, as I already installed my packages. 2. Open *node_modules/react-native-web/dist/index.js*. Can you see this at the bottom export const ViewPropTypes = { style: null }; Thanks! Franz — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1537 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AELWQXZHQV4UQSJVWLBQ5MLRW57YHANCNFSM4KS37KDQ> .

Answer 8 · 2020-06-16T15:25:41.000Z

Hello @willerpp,

You're welcome and I'm happy it works for you too.
To test the postinstall feature. You can install any package, let say lodash, then check if the script updated it. After that, you know it works and therefore free to remove lodash from your packages.

Thanks!
Franz

Answer 9 · 2020-09-22T16:36:27.000Z

Module not found: Can't resolve 'react-native-web/dist/exports/ViewPropTypes' after update to expo sdk 39.0

Answer 10 · 2020-09-22T16:44:26.000Z

Hello @aguilared . I had the same issue. Before, I manually copied the library I was using in my code, but it turns out was not the best way so I created a workaround.

Check out my comment above: #1537 (comment)

It works for me. Don't hesitate to ask me anything.
Thanks!
Franz

Answer 11 · 2020-09-22T21:01:17.000Z

@aguilared the same

Answer 12 · 2020-09-22T21:07:11.000Z

@aguilared the same

Did you try my workaround above, this is because ViewPropTypes was removed from react native, so react native web removed it too.

Answer 13 · 2020-09-27T15:48:04.000Z

@aguilared the same

Did you try my workaround above, this is because ViewPropTypes was removed from react native, so react native web removed it too.

Are you sure? I have the same issue, but npm package works without problems on RN.

Answer 14 · 2020-09-27T15:52:49.000Z

@echo off echo 'Fixing ViewPropTypes issues' REM Fix ViewPropTypes issues ECHO export const ViewPropTypes = { style: null };>>"PATH_TO_NODE_MODULES/react-native-web/dist/index.js"

Thank you for your answer. I am sure it can help me. Could you please explain in details what this lines do? I need create a bashscript for my project.

I use react-native-smooth-slider

I have added export const ViewPropTypes = { style: null } to "PATH_TO_NODE_MODULES/react-native-web/dist/index.js".
But my problem have not been solved. Npm package need something more :
`TypeError: Cannot read property 'source' of undefined
Module../node_modules/react-native-smooth-slider/src/Slider.js
node_modules/react-native-smooth-slider/src/Slider.js:174
171 | /**
172 | * Sets an image for the track.
173 | */

174 | trackImage: Image.propTypes.source,
| ^ 175 |
176 | /**
177 | * The style applied to the thumb.
View compiled
webpack_require
/Users/yue/Project/forProd/RN/TouchWand/code/TW/webpack/bootstrap:785
782 | };
783 |
784 | // Execute the module function
785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 786 |
787 | // Flag the module as loaded
788 | module.l = true;
View compiled
fn
/Users/yue/Project/forProd/RN/TouchWand/code/TW/webpack/bootstrap:150
147 | );
148 | hotCurrentParents = [];
149 | }
150 | return webpack_require(request);
| ^ 151 | };
152 | var ObjectFactory = function ObjectFactory(name) {
153 | return {
....

Answer 15 · 2020-09-27T18:46:29.000Z

Hello @karpov-denys,

When you add export const ViewPropTypes = { style: null } to PATH_TO_NODE_MODULES/react-native-web/dist/index.js. You mock ViewPropTypes, by exporting an object.

Check out my answer above #1537 (comment)

I updated the answer, now there is a batch script, a bash script, and a python script. I recommend you to use the Python version since it works on both Unix-like OS & Windows having Python installed.

Best regards,
Franz

Answer 16 · 2020-10-01T11:55:05.000Z

@franznkemaka have a look at https://www.npmjs.com/package/patch-package as it makes patching stuff like this much easier 😊

Answer 17 · 2020-10-01T12:05:59.000Z

@jaulz
Thanks, I'll check it out

Answer 18 · 2020-10-05T11:02:16.000Z

Hello everyone :) I am having the same issue as @aguilared. I tried adding export const ViewPropTypes = { style: null }; to /react-native-web/dist/index.jsas @franznkemaka mentioned, but it doesn't change anything. Are there any other ideas for a possible solution?

Answer 19 · 2020-10-05T11:15:05.000Z

Hello everyone :) I am having the same issue as @aguilared. I tried adding export const ViewPropTypes = { style: null }; to /react-native-web/dist/index.jsas @franznkemaka mentioned, but it doesn't change anything. Are there any other ideas for a possible solution?

Hi @Lis-Ma , what is the error message?

In my case ViewPropTypes.style was undefined, so it meant that ViewPropTypes was not defined that is why I exported ViewPropTypes in the /react-native-web/dist/index.js

If for example, it says ColorPropType is undefined, then you have to export it too.

Answer 20 · 2020-10-05T11:16:14.000Z

It didn't work for me as well unfortunately (it still wanted the export, but in /exports folder), but I've used part of that script and made myself my own workaround here (specifically for react-native-table-component): dohooo/react-native-table-component#131 . It's not the best solution, but will work until the package is upgraded.

Maybe in your case, you also need to add a ViewPropTypes file into /exports folder and declare that there instead (and from index.js, just export it like the rest are)

Answer 21 · 2020-10-05T11:22:06.000Z

Hi @Dammic,

it depends on what is in the index.js. If there is already something like this: export { default as ViewPropTypes } from './exports/ViewPropTypes'; then you have to create that file., or simply remove the line. If not you can just mock it by exporting an empty object for example like: export const ViewPropTypes = { style: null };

Answer 22 · 2020-10-05T12:04:24.000Z

Hey @franznkemaka, the error message with or without exporting the empty ViewPort object is Module not found: Can't resolve 'react-native-web/dist/exports/ViewPropTypes'. Also thx @Dammic, I will try out your idea in a minute.

Answer 23 · 2020-10-05T12:09:21.000Z

@Lis-Ma in this case @Dammic's solution is what you should try.

If you don't mind me asking, could you show what is the dist/index.js

Answer 24 · 2020-10-05T12:15:03.000Z

I just tried out @Dammic's solution with node_modules/react-native-web/dist/exports/ViewPropTypes/index.js containing

export default function ViewPropTypes(props) {}
var styles = StyleSheet.create({});

Still the same error message.

@franznkemaka dist/index.js:

// export const ViewPropTypes = { style: null }; // manual fix no 1
// export { default as ViewPropTypes } from './exports/ViewPropTypes'; // manual fix no 2

export { default as unstable_createElement } from './exports/createElement';
export { default as findNodeHandle } from './exports/findNodeHandle';
export { default as processColor } from './exports/processColor';
export { default as render } from './exports/render';
export { default as unmountComponentAtNode } from './exports/unmountComponentAtNode';
export { default as NativeModules } from './exports/NativeModules'; // APIs

export { default as AccessibilityInfo } from './exports/AccessibilityInfo';
export { default as Alert } from './exports/Alert';
export { default as Animated } from './exports/Animated';
export { default as Appearance } from './exports/Appearance';
export { default as AppRegistry } from './exports/AppRegistry';
export { default as AppState } from './exports/AppState';
export { default as BackHandler } from './exports/BackHandler';
export { default as Clipboard } from './exports/Clipboard';
export { default as DeviceInfo } from './exports/DeviceInfo';
export { default as Dimensions } from './exports/Dimensions';
export { default as Easing } from './exports/Easing';
export { default as I18nManager } from './exports/I18nManager';
export { default as Keyboard } from './exports/Keyboard';
export { default as InteractionManager } from './exports/InteractionManager';
export { default as LayoutAnimation } from './exports/LayoutAnimation';
export { default as Linking } from './exports/Linking';
export { default as NativeEventEmitter } from './exports/NativeEventEmitter';
export { default as PanResponder } from './exports/PanResponder';
export { default as PixelRatio } from './exports/PixelRatio';
export { default as Platform } from './exports/Platform';
export { default as Share } from './exports/Share';
export { default as StyleSheet } from './exports/StyleSheet';
export { default as UIManager } from './exports/UIManager';
export { default as Vibration } from './exports/Vibration'; // components

export { default as ActivityIndicator } from './exports/ActivityIndicator';
export { default as Button } from './exports/Button';
export { default as CheckBox } from './exports/CheckBox';
export { default as FlatList } from './exports/FlatList';
export { default as Image } from './exports/Image';
export { default as ImageBackground } from './exports/ImageBackground';
export { default as KeyboardAvoidingView } from './exports/KeyboardAvoidingView';
export { default as Modal } from './exports/Modal';
export { default as Picker } from './exports/Picker';
export { default as Pressable } from './exports/Pressable';
export { default as ProgressBar } from './exports/ProgressBar';
export { default as RefreshControl } from './exports/RefreshControl';
export { default as SafeAreaView } from './exports/SafeAreaView';
export { default as ScrollView } from './exports/ScrollView';
export { default as SectionList } from './exports/SectionList';
export { default as StatusBar } from './exports/StatusBar';
export { default as Switch } from './exports/Switch';
export { default as Text } from './exports/Text';
export { default as TextInput } from './exports/TextInput';
export { default as Touchable } from './exports/Touchable';
export { default as TouchableHighlight } from './exports/TouchableHighlight';
export { default as TouchableNativeFeedback } from './exports/TouchableNativeFeedback';
export { default as TouchableOpacity } from './exports/TouchableOpacity';
export { default as TouchableWithoutFeedback } from './exports/TouchableWithoutFeedback';
export { default as View } from './exports/View';
export { default as VirtualizedList } from './exports/VirtualizedList';
export { default as YellowBox } from './exports/YellowBox'; // compat (components)

export { default as DrawerLayoutAndroid } from './exports/DrawerLayoutAndroid';
export { default as InputAccessoryView } from './exports/InputAccessoryView';
export { default as ToastAndroid } from './exports/ToastAndroid'; // compat (apis)

export { default as PermissionsAndroid } from './exports/PermissionsAndroid';
export { default as Settings } from './exports/Settings';
export { default as Systrace } from './exports/Systrace';
export { default as TVEventHandler } from './exports/TVEventHandler'; // plugins

export { default as DeviceEventEmitter } from './exports/DeviceEventEmitter'; // hooks

export { default as useColorScheme } from './exports/useColorScheme';
export { default as useWindowDimensions } from './exports/useWindowDimensions';

Answer 25 · 2020-10-05T12:27:22.000Z

I just tried out @Dammic's solution with node_modules/react-native-web/dist/exports/ViewPropTypes/index.js containing
export default function ViewPropTypes(props) {}
var styles = StyleSheet.create({});
Still the same error message.

I changed the file to only contain export default function ViewPropTypes(props) {} and now it compiles again :) Thx everybody for your help!

Answer 26 · 2020-10-05T12:45:30.000Z

@Lis-Ma you're welcome.

Your index.js looks good, actually you have two solutions, either you replace this line export { default as ViewPropTypes } from './exports/ViewPropTypes'; with export const ViewPropTypes = { style: null };
or you create a new file like you did.

In my humble opinion, it is easier to just replace the line than creating a new file with the content.

Note: each time that you will either install, remove, or update a package, your modifications will go away. So to avoid that add a script in your package.json.

So follow my comment above but instead of the code displayed there use this script instead.

Python: fix.py OS-agnostic, use this if possible for your case

import os
import sys

print("✅ Fixing PropTypes issues")
dir_path = os.path.dirname(os.path.realpath(__file__))
rnw_filename = dir_path + "/../node_modules/react-native-web/dist/index.js"

def remove_line_from_file(file_name, text_to_remove):
    with open(file_name, "r+") as f:
    d = f.readlines()
    f.seek(0)
    for i in d:
        if i != text_to_remove:
            f.write(i)
    f.truncate()

def append_new_line(file_name, text_to_append):
    """Append given text as a new line at the end of file"""
    
    if text_to_append in open(file_name).read():
        print("⏭️  Skipping...")
    else:
        with open(file_name, "a+") as file_object:        
            file_object.write("\n")
            file_object.write(text_to_append)
            file_object.close()

# Remove the unnecessary line first
remove_line_from_file(rnw_filename, "export { default as ViewPropTypes } from './exports/ViewPropTypes';")

# Fix 
append_new_line(rnw_filename, "export const ViewPropTypes = { style: null };")

And there you go.
@Dammic you can use it as well it is easier

Answer 27 · 2020-10-06T13:13:23.000Z

@Lis-Ma you're welcome.

Your index.js looks good, actually you have two solutions, either you replace this line export { default as ViewPropTypes } from './exports/ViewPropTypes'; with export const ViewPropTypes = { style: null };
or you create a new file like you did.

In my humble opinion, it is easier to just replace the line than creating a new file with the content.

Note: each time that you will either install, remove, or update a package, your modifications will go away. So to avoid that add a script in your package.json.

So follow my comment above but instead of the code displayed there use this script instead.

Python: fix.py OS-agnostic, use this if possible for your case
import os
import sys

print("✅ Fixing PropTypes issues")
dir_path = os.path.dirname(os.path.realpath(__file__))
rnw_filename = dir_path + "/../node_modules/react-native-web/dist/index.js"

def remove_line_from_file(file_name, text_to_remove):
    with open(file_name, "r+") as f:
    d = f.readlines()
    f.seek(0)
    for i in d:
        if i != text_to_remove:
            f.write(i)
    f.truncate()

def append_new_line(file_name, text_to_append):
    """Append given text as a new line at the end of file"""
    
    if text_to_append in open(file_name).read():
        print("⏭️  Skipping...")
    else:
        with open(file_name, "a+") as file_object:        
            file_object.write("\n")
            file_object.write(text_to_append)
            file_object.close()

# Remove the unnecessary line first
remove_line_from_file(rnw_filename, "export { default as ViewPropTypes } from './exports/ViewPropTypes';")

# Fix 
append_new_line(rnw_filename, "export const ViewPropTypes = { style: null };")
And there you go.
@Dammic you can use it as well it is easier

I have implemented the python fix and it gets rid of most the errors with web...howveer for a few imports I am getting this error:

TypeError: Cannot read property 'style' of undefined
static propTypes = {
65 | ...ViewPropTypes,

66 | containerStyle: ViewPropTypes.style,
67 | duration: PropTypes.number,
68 | visible: PropTypes.bool,
69 | position: PropTypes.number,

I can't figure out why it recognizes viewproptypes but not the style part

Answer 28 · 2020-10-06T13:48:09.000Z

Hi @csumrell, this means that the ViewPropTypes is not defined correctly i.e undefined. This explains why you get the property 'style' of an undefined object.

What is the library that requires ViewPropTypes?

Answer 29 · 2020-10-06T13:51:20.000Z

Hi @csumrell, this means that the ViewPropTypes is not defined correctly i.e undefined. This explains why you get the property 'style' of an undefined object.

What is the library that requires ViewPropTypes?

Module.../../../react-native-root-toast/lib/ToastContainer.js
node_modules/react-native-root-toast/lib/ToastContainer.js:66

Answer 30 · 2020-10-06T14:00:12.000Z

@csumrell I just saw it, it looks good. Try to apply the fix manually. Does it work?
If not, please could you explain what you did exactly?

Answer 31 · 2020-10-06T17:48:15.000Z

@franznkemaka, if I do nothing:
Module not found: Can't resolve 'react-native-web/dist/exports/ViewPropTypes' in '/node_modules/react-native-button'

If I use your python postinstall script, it adds "export const ViewPropTypes = { style: null };" to the bottom of index file. I then receive error:

Module not found: Can't resolve 'react-native-web/dist/exports/ViewPropTypes' in '/node_modules/react-native-button'
node_modules/react-native-button/Button.js

Then if I add the alias in my webpack:
'react-native-web/dist/exports/ViewPropTypes': 'react-native-web/dist/index.js',
I get the original style error I described TypeError: Cannot read property 'style' of undefined

Answer 32 · 2020-10-06T19:06:22.000Z

Hi @csumrell,

Then the problem is that at the top of your index.js file, you have something like this:

export { default as ViewPropTypes } from './exports/ViewPropTypes';.
Check for that line and replace it to this export const ViewPropTypes = { style: null };.

-  export { default as ViewPropTypes } from './exports/ViewPropTypes';
+ export const ViewPropTypes = { style: null };

Let me know if it works or not.

Answer 33 · 2020-10-06T23:50:54.000Z

Hi @csumrell,

Then the problem is that at the top of your index.js file, you have something like this:

export { default as ViewPropTypes } from './exports/ViewPropTypes';.
Check for that line and replace it to this export const ViewPropTypes = { style: null };.
-  export { default as ViewPropTypes } from './exports/ViewPropTypes';
+ export const ViewPropTypes = { style: null };
Let me know if it works or not.

I did not have export { default as ViewPropTypes } from './exports/ViewPropTypes'; at the top of the file. However, if I add it to the file and then actually create the folder/file with only export default function ViewPropTypes(props) {} inside. it works.

But after that now i get a similar error for Text.propTypes and I am not sure how to repeat this solution for that propType

Answer 34 · 2020-10-07T13:44:56.000Z

Hi @csumrell,
I got a solution for you, I tested it myself.
Go to this file node_modules\react-native-web\dist\exports\Text\index.js
Add this line

...
Text.displayName = 'Text';
+ Text.propTypes  = ()=> {};
...

It will mock the styles. Now you can integrate it into the Python script too, by simply replacing the "Text.displayName = 'Text';" with "Text.displayName = 'Text';Text.propTypes = ()=> {};"

Hope it would help.
Franz

Answer 35 · 2020-10-24T11:05:54.000Z

i created script for windows but i guess it's quite easy to use it in mac os or linux.
Just add this script in postinstall section :

"scripts": { "postinstall": "shameForDevsWhoCantAddBackwardCompability.bat", ....

shameForDevsWhoCantAddBackwardCompability.bat script:
mkdir "node_modules\react-native-web\dist\exports\ViewPropTypes"; echo const ViewPropTypes = { style: null }; > node_modules\react-native-web\dist\exports\ViewPropTypes\index.js echo export default ViewPropTypes; >> node_modules\react-native-web\dist\exports\ViewPropTypes\index.js findstr "ViewPropTypes" node_modules\react-native-web\dist\index.js IF ERRORLEVEL 1 echo export { default as ViewPropTypes } from './exports/ViewPropTypes'; >> node_modules\react-native-web\dist\index.js

What it does is simply creates blank ViewPropTypes and exports it. findstr is equivalent for grep.
Hope this will help you as it helped me.
Tested with expo sdk 39 and react-native-web: 0.14.0

Answer 36 · 2020-10-24T11:43:13.000Z

Hi @lubuger did you check my example? #1537 (comment)

It is easy and works for Linux, MacOS and Windows

Answer 37 · 2020-10-24T14:35:30.000Z

yeah :) , i just don't want to use any external stuff (like python or e.g.)

Answer 38 · 2020-11-04T11:01:36.000Z

My WORKING solution for "Module not found" from answers above tested on "expo": "^39.0.0":

Create folder && file: ViewPropTypes/index.js in react-native-web/dist/exports
Add below code in ViewPropTypes/index.js :

var ViewPropTypes = { style: null }
export default ViewPropTypes;

Import above in react-native-web/dist/index.js
export { default as ViewPropTypes } from './exports/ViewPropTypes';
run expo r -c

Answer 39 · 2020-11-09T03:24:29.000Z

@franznkemaka Script wasn't quite working for me as it wasn't finding the exports. I modified it below and now the errors are gone. The types list can contain all the files with which you are getting errors. I was getting multiple for different dependencies.

import os

dir_path = os.path.dirname(os.path.realpath(__file__))

types = ['ViewPropTypes', 'TextPropTypes', 'ColorPropType', 'EdgeInsetsPropType', 'PointPropType']
for type in types:
    BASE_DEST = dir_path+'/node_modules/react-native-web/dist/exports/'+type+'/'
    if not os.path.exists(BASE_DEST):
        os.mkdir(BASE_DEST)
    with open(BASE_DEST+'index.js', "w") as file_object:
        file_object.write("module.exports = {}")
        file_object.close()

Answer 40 · 2020-11-10T16:23:19.000Z

Hi @khevamann, That's great. It means that there are many types missing. I see, thanks for sharing your code. It is easier to create folders and files as you can easily check if it doesn't exist already like you did.

Answer 41 · 2020-11-17T18:33:59.000Z

My WORKING solution for "Module not found" from answers above tested on "expo": "^39.0.0":

Create folder && file: ViewPropTypes/index.js in react-native-web/dist/exports

Add below code in ViewPropTypes/index.js :

var ViewPropTypes = { style: null }
export default ViewPropTypes;

Import above in react-native-web/dist/index.js
export { default as ViewPropTypes } from './exports/ViewPropTypes';

run expo r -c

@AndreiMsk your solution works for me!! Thanks for saving my day.

Answer 42 · 2021-02-01T23:44:59.000Z

Building on @franznkemaka 's script (by the way thank you it fixed the issue for me), here's my version, for bash:

in the root directory, add this as "fix-for-web.sh":

    #!/bin/bash

    echo 'Fixing PropTypes issues, for running expo start:web (for web)'
    echo "for reference: https://github.com/necolas/react-native-web/issues/1537"

    IMPORTS_REACT_NATIVE_WEB=('ViewPropTypes' 'ColorPropType' 'EdgeInsetsPropType' 'PointPropType' 'requireNativeComponent')
    for import in "${IMPORTS_REACT_NATIVE_WEB[@]}"
    do
        echo "Fixing $import ..."
        if grep -q "export const $import = { style: null };" ./node_modules/react-native-web/dist/index.js; then
            echo "$import fixed already!"
        else
            echo -e "\nexport const $import = { style: null };">> ./node_modules/react-native-web/dist/index.js
        fi
    done

NOTE: depending on your OS - you might need to run: "chmod +x ./fix-for-web.sh"

In package.json:
"scripts": { "start": "expo start", ... "postinstall": "bash ./fix-for-web.sh" },

Answer 43 · 2021-03-08T19:17:37.000Z

@lovebes and @franznkemaka

Thanks for the solution! And everyone else as well.

This still isn't quite working for me. After running the script (which successfully adds the export lines to ./node_modules/react-native-web/dist/index.js, I still get the following error:

Failed to compile.

./node_modules/react-native-table-component/components/rows.js
Cannot find module: 'react-native-web/dist/exports/ViewPropTypes'. Make sure this package is installed.

You can install this package by running: yarn add react-native-web/dist/exports/ViewPropTypes.

I can make the web build compile by adding the following to webpack.config.js:
config.resolve.alias['react-native-web/dist/exports/ViewPropTypes'] = 'react-native-web/dist/index.js';

However, then I get the errors that ViewPropTypes is null, and .style is not defined on it.

Anyone have any ideas? Would really appreciate any help. I think it's close, and I need to get this working to get my react-native-web app to compile again.

Answer 44 · 2021-03-08T19:23:35.000Z

Hi @vjsingh

Did you make sure to always run your script after npm install or yarn install? If not then you have to add a script.

What solution did you use exactly?
(We ended up bringing many workarounds haha)

Answer 45 · 2021-03-08T19:39:21.000Z

@franznkemaka Hey,

Yeah I'm testing it before running npm install. I understand that it has to be added into postinstall, and have verified that the extra lines exist in ./node_modules/react-native-web/dist/index.js when compiling.

Maybe it's because I'm running expo build? That's the way I've been testing. I haven't found a solution yet that works, and there's quite a few affected libraries so I don't want to patch all of them individually.

@AndreiMsk 's solution looks like it may work, but I'm not sure how to put it into a script so I can run it on postinstall

Answer 46 · 2021-03-08T19:47:07.000Z

@vjsingh

However, then I get the errors that ViewPropTypes is null, and .style is not defined on it.

Then make sure to export ViewPropTypes as an object that includes style property.
So it should look like this

export const ViewPropTypes = { style: null };

or

export const ViewPropTypes = { style: ()=> null };

Answer 47 · 2021-03-08T19:48:51.000Z

Yes, I used the script you provided (thanks for that!), and that exact line is at the bottom of ./node_modules/react-native-web/dist/index.js.

Answer 48 · 2021-03-09T05:08:19.000Z

Building off @AndreiMsk 's solution, I resolved this by adding the following to my fix-for-web.sh post script:

mkdir node_modules/react-native-web/dist/exports/ViewPropTypes
echo "var ViewPropTypes = { style: null }" >> node_modules/react-native-web/dist/exports/ViewPropTypes/index.js
echo "export default ViewPropTypes;" >> node_modules/react-native-web/dist/exports/ViewPropTypes/index.js
echo "export { default as ViewPropTypes } from './exports/ViewPropTypes';" >> node_modules/react-native-web/dist/index.js

Answer 49 · 2021-08-11T04:25:23.000Z

use patch-package

first, add script at package.json
(postinstall means after effect installing)

+   "postinstall": "patch-package"

second, install patch-package

npm install --save-dev patch-package
yarn add -D patch-package postinstall-postinstall

third, open react-native-web/dist/index.js and edit

+   export const ViewPropTypes = { style: ()=> null };

fourth, run patch-package

npx patch-package react-native-web

check created file at rootDir/patches

good luck

refer : https://www.npmjs.com/package/patch-package

Answer 50 · 2021-10-11T12:25:08.000Z

Hello developers, I had the same issue. Before, I manually copied the library I was using in my code, but it turns out was not the best way so I created a workaround.

Explanation If you mock ViewPropTypes in node_modules/react-native-web/dist/index.js the error will go away. So what I did is I wrote some batch file for Windows, bash for Unix-like, Python for both, it is up to you to decide which one. Just copy and paste.

Workaround

create a .bat|.sh|.py file depending on your OS anywhere in your app and feel free to customize the mock. For me setting the style to null fixed the issue. In my case, I created a folder called scripts so my file is located at scripts/fix.bat|.sh|.py

Copy & paste the code

Python: fix.py OS-agnostic, use this if possible
import os
import sys

print("✅ Fixing PropTypes issues")
dir_path = os.path.dirname(os.path.realpath(__file__))
rnw_filename = dir_path + "/../node_modules/react-native-web/dist/index.js"

def append_new_line(file_name, text_to_append):
    """Append given text as a new line at the end of file"""
    
    if text_to_append in open(file_name).read():
        print("⏭️  Skipping...")
    else:
        with open(file_name, "a+") as file_object:        
            file_object.write("\n")
            file_object.write(text_to_append)
            file_object.close()

# Fix 
append_new_line(rnw_filename, "export const ViewPropTypes = { style: null };")
Windows Batch: fix.bat
@echo off
echo 'Fixing ViewPropTypes issues'
REM Fix ViewPropTypes issues
ECHO export const ViewPropTypes = { style: null };>>"PATH_TO_NODE_MODULES/react-native-web/dist/index.js"
Unix-like bash: fix.sh
#!/bin/bash

echo 'Fixing PropTypes issues'

if grep -q "export const ViewPropTypes = { style: null };" ../node_modules/react-native-web/dist/index.js; then
    echo "ViewPropTypes fixed already!"
else
    echo "export const ViewPropTypes = { style: null };">> ../node_modules/react-native-web/dist/index.js
fi
I added in the bash a cool if-else so that you can run it infinitely without duplicating it.

Please replace PATH_TO_NODE_MODULES with the path to your node_modules folder. For example, if you at your root folder it should be "node_modules"

(optional) Go in your package.json

Each time you run npm install | ``yarn install` or when you add a new package, the fix is removed, since the package refreshed. To overcome this, modify your scripts and add a post-install command that is called after. Basically, it would execute your bat script each time you hit npm or yarn install.

With the python version "postinstall": "python fix.py"

With .bat or .sh "postinstall": "fix"

Hope it would help. It works for me. Don't hesitate to ask me anything. Thanks! Franz

Hello, Thanks for this, but I don't really understand how to go about this, any help ??

Answer 51 · 2021-10-12T11:57:04.000Z

Hello, Thanks for this, but I don't really understand how to go about this, any help ??

Hi @udemezue01,

to fix the problem, you have to edit the node_modules/react-native-web/dist/index.js file and export ViewPropTypes so that it won't show you the error anymore.

The reason why I use a script is that each time you install new packages, npm or yarn will discard your changes. So you need a script to make sure the fix is applied after. For that yarn or npm provides you a postinstall command inside your package.json scripts sections. You call call the script from there

Hope it helps

Answer 52 · 2021-10-12T12:09:24.000Z

Thanks, I fixed it already

…

On Tue, Oct 12, 2021 at 12:57 PM Franz Nkemaka ***@***.***> wrote: Hello, Thanks for this, but I don't really understand how to go about this, any help ?? Hi @udemezue01 <https://github.com/udemezue01>, to fix the problem, you have to edit the node_modules/react-native-web/dist/index.js file and export ViewPropTypes so that it won't show you the error anymore. The reason why I use a script is that each time you install new packages, npm or yarn will discard your changes. So you need a script to make sure the fix is applied after. For that yarn or npm provides you a postinstall command inside your package.json scripts sections. You call call the script from there Hope it helps — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1537 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AD2KU4K3PMLECZTNPRFKCCDUGQPBZANCNFSM4KS37KDQ> .

-- <https://about.me/thejohnbenjamin?promo=email_sig&utm_source=product&utm_medium=email_sig&utm_campaign=gmail_api&utm_content=thumb> Nwabufor John Web Developer, Blogger, Digital Marketing Expert and Serial Entrepreneur. Visit the Link Below. *Tchelete.com <http://Tchelete.com> (Blog)* Make sure to also visit the links below. 🖐🏼 👉👉 How To Start a Blog. <http://Tchelete.com/how-to-start-a-blog>

Answer 53 · 2022-01-01T03:51:18.000Z

use patch-package

first, add script at package.json (postinstall means after effect installing)
+   "postinstall": "patch-package"
second, install patch-package
npm install --save-dev patch-package
yarn add -D patch-package postinstall-postinstall
third, open react-native-web/dist/index.js and edit
+   export const ViewPropTypes = { style: ()=> null };
fourth, run patch-package
npx patch-package react-native-web
check created file at rootDir/patches

good luck

refer : https://www.npmjs.com/package/patch-package

thx man, it worked!

Answer 54 · 2022-09-27T09:40:37.000Z

When I add the export const ViewPropTypes = { style: ()=> null };, or export const ViewPropTypes = { style: null };,
my console gives the error:
"DaysGridView.js:191 Uncaught TypeError: Cannot read properties of undefined (reading 'style')";

Answer 55 · 2022-11-22T16:42:28.000Z

I have created the python script from @franznkemaka and am able to manually run it and see the expected output in react-native-web/dist/index.js but its not working when its called in the postinstall phase after running a yarn add command.

My "postinstall" looks like this:
"postinstall": "patch-package && python scripts/webfix.py"

I see the following error after yarn add [package]
/bin/sh: python: command not found

If i change my post install to use the path to python3 then its working properly:
"postinstall": "patch-package && /usr/bin/python3 scripts/webfix.py"

Does anyone know how I fix this so i can just call python rather than /usr/bin/python3?

Answer 56 · 2022-11-23T00:38:58.000Z

I have created the python script from @franznkemaka and am able to manually run it and see the expected output in react-native-web/dist/index.js but its not working when its called in the postinstall phase after running a yarn add command.

My "postinstall" looks like this: "postinstall": "patch-package && python scripts/webfix.py"

I see the following error after yarn add [package] /bin/sh: python: command not found

If i change my post install to use the path to python3 then its working properly: "postinstall": "patch-package && /usr/bin/python3 scripts/webfix.py"

Does anyone know how I fix this so i can just call python rather than /usr/bin/python3?

It's not related to this package at all

Answer 57 · 2022-11-23T07:02:49.000Z

I have created the python script from @franznkemaka and am able to manually run it and see the expected output in react-native-web/dist/index.js but its not working when its called in the postinstall phase after running a yarn add command.

My "postinstall" looks like this:

"postinstall": "patch-package && python scripts/webfix.py"

I see the following error after yarn add [package]

/bin/sh: python: command not found

If i change my post install to use the path to python3 then its working properly:

"postinstall": "patch-package && /usr/bin/python3 scripts/webfix.py"

Does anyone know how I fix this so i can just call python rather than /usr/bin/python3?

It simply states that /usr/nin/python3 does not exist in your computer.

Run which python to see where your Python is located and modify that.

Honestly I recommend using patch-package instead of a custom Python script