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

[kopax]

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:

• Upgrade to react-native-web 0.12.1 is not supported due to ViewPropTypes import being removed jemise111/react-native-swipe-list-view#412

[necolas]

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

[anija]

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.

[hakuna0829]

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.

[franznkemaka]

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

1. 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"

2. (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

[willerpp]

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

[franznkemaka]

Hello @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

[willerpp]

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> .

[franznkemaka]

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

[aguilared]

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

[franznkemaka]

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

[xn3cr0nx]

@aguilared the same

[franznkemaka]

@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.

[karpov-denys]

@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.

[karpov-denys]

1. @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 {
....

[franznkemaka]

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

[vjsingh]

@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.

[franznkemaka]

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)

[vjsingh]

@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

[franznkemaka]

@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 };

[vjsingh]

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.

[vjsingh]

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

[sacru2red]

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

[udemezue01]

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

1. 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"

1. (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 ??

[franznkemaka]

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

[udemezue01]

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>

[raihan-suryanom]

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!

[Muschke]

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')";

[chadlaughland]

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?

[sacru2red]

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

[franznkemaka]

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