Does react-script-ts support create-react-app and CSS/SCSS Modules? - create-react-app

Now that create-react-app has released v2, I want to create a new React App using Typescript and SCSSModules or CSSModules?
Am wondering if anyone managed to make this work? I am getting a Cannot find module ./Styles.module.scss when I import styles from "./Styles.module.scss";
Any thoughts/help with this would be highly appreciated.

Turns out this is not yet supported by react-script-ts released versions, but you can use it by using the 4.0.8 version of react-scripts-ts.
Please see https://github.com/facebook/create-react-app/pull/4837

Related

How to Upgrade React Native Version 0.66.3 to 0.70.6?

Currently, my project running on the 0.66.3 version I need to upgrade to react native version 0.70.6. So I have used to following command
npx react-native upgrade
After running this command showing some error I have attached a screenshot please refer.
I am also trying the manual way using react native helper but some files are not available in my project.
so anyone please tell me how I will upgrade my project version?
After Run npx react-native run-android my build was created successfully but 3 errors showing in the metro bundler. I have attached a screenshot of the metro bundler error.
you can specify a React Native version and pass it as an argument:
npx react-native upgrade 0.70.6
you can also refer this official documentation for this
& it will also helps you if you got any error.
https://reactnative.dev/docs/upgrading
I found by changing react-native - index.js and react-native/Libraries/Text - index.js
Follow this link for output:
https://github.com/facebook/react-native/commit/3f629049ba9773793978cf9093c7a71af15e3e8d
Don't know whether it is the right way or not....
Since upgrading an application can break functionality in your app if you do not know what is needed to be changed. the upgrade is tells you to visit the pages to go through and see what has changed throughout the upgrading process.
Other as that I am just needing more information regarding to what is not working. Since upgrading is more as just running a command, its about reading the documentation and see what part is missing and what they replaced the files with. The missing files could be straight-out deprecated and not working with the new version.
As always check the debugger and read every message throughout and visit all links given and see the documentation regarding the upgrade differences, find out if there are any log files you could look at, and talk with people in your company / group of react-native about this.
"Some files are not available in my project"
This part might just be able to google and see if this is still supported or not in the version it could be phased out, or not supported in the version. that's where versioning comes in to play.
I am unsure what files and which libraries are deprecated based on your Opening Post, this needs more information, to help us, help you.

React Native Expo shows Async Storage warning

i'm using React Native expo, and it shows
[Warning: Async Storage has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from '#react-native-community/async-storage' instead of 'react-native'. See https://github.com/react-native-community/react-native-async-storage].
i read this link and I understood that it's due to the fact that some dependencies are using old AsyncStorage, not the new one from community.
But I hardly found that any solution for Expo users. Is there any solution for Expo? Or if I have to manual change dependencies using the old AsyncStorage, how can i do it? Since I'm new to React Native, not really sure what to do..
In Expo you should always link the libraries that Expo includes in the App. So like mentioned in the docs here https://docs.expo.dev/versions/latest/sdk/async-storage/
expo install #react-native-async-storage/async-storage
is the correct import. If you are working with an old Expo-SDK this might be different, otherwise you should adapt your imports.
Now expo has migrated to use as well the community version as you can see here.
But if you get this warning definitely you have some dependency or more that still use the react-native-core version, if so please refer to the first answer to How to resolve using AsyncStorage (deprecated) warning? Using the community (correct) library:
if this is the case the best is as suggested in that answer is to
Your best course of action is to fork the repo and fix all instances of AsyncStorage to use the correct version, or open an issue.
This error occurs because firebase imports AsyncStorage from react native core and not the new library #react-native-async-storage/async-storage. I think firebase hasn't updated the by default import yet so you have to do it yourself.The way I fixed it was ;
Install react-native-async-storage: npm i #react-native-async-storage/async-storage
Go into the firebase index.js file that imports AsyncStorage from react native core: It is located at : 'node_modules/#firebase/auth/dist/rn'.
Create a variable that imports AsycnStorage from 'node-modules/#react-native-async-storage/async-storage' :
var AsyncStorage = require('../../../../#react-native-async-storage/async-storage');
Replace all uses of AsyncStorage in this file from react native core with new variable, i.e. replace "ReactNative__namespace.AsyncStorage" with "AsycnStorage",

What package does create-react-app docs use

I am wondering how I can create a docs site like create-react-app or react typescript cheatsheets. I am imaging they are using the same package or setup, I just want to know what they are using. Apologies if the answer is too obvious!
After some investigation I discovered they are using docusaurus.

How to update to the new version of React-Native on the current (WIP) project

What is the best way how can I update (WIP) React Native project to the newer version?
I tried to update my project but from that moment the project won't work. And the only solution was to go back to the previous version.
I found this manual solution (https://react-native-community.github.io/upgrade-helper/?from=0.61.5&to=0.63.2), but I hope that there is some automated solution?
Thanks!
There is no automatic solution. Update your libraries manually. Use this tool to view changes in react-native versions.
https://react-native-community.github.io/upgrade-helper/
Each version is different. Upgrading has always been sort of a pain point. The best solution is applying the changes shown in ReactNative Upgrade helper and then debugging the issues one by one or checking online for a matching version bump. in our case from 0.60 to 62.2 we had change and rebuild some swift files within XCode which we found out about using react native upgrade helper. What's not working right now?

AsyncStorage module not found in /expo/build/Notifications

I'm getting the below mentioned error when i try run application in the web mode.
/node_modules/expo/build/Notifications/Notifications.js
Module not found: Can't resolve 'react-native-web/dist/exports/AsyncStorage' in '/Users/i322865/node_modules/expo/build/Notifications'
I'm using the latest expo(0.36, same error i faced when i was using 0.35 version as well) and react native web 0.12.0-rc.1. Please help to solve this issue and let me know if you require any further details.
This module (AsyncStorage) is not available on react-native-web : ^0.12.
If you need to use the AsyncStorage you can use the version: "react-native-web": "0.11.7",
PS: you can check updates on that subject at this issue: https://github.com/necolas/react-native-web/issues/1515
The official position is:
Use 0.11 until the community packages add web support.
They've known this was coming for 9 months react-native-community/async-storage#52
Regards