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

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.

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

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

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

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

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

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

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

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

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

2. run expo r -c

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

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.

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

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

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

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

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 notifications@github.com wrote:

Hello @willerpp https://github.com/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. 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 https://github.com/necolas/react-native-web/issues/1537#issuecomment-644807666, or unsubscribe https://github.com/notifications/unsubscribe-auth/AELWQXZHQV4UQSJVWLBQ5MLRW57YHANCNFSM4KS37KDQ .

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

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

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

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