Installation with Create React App - babel-plugin-react-css-modules

I'm sorry for asking what may be an obvious question to most, but I'm lost. I have created a react project with create-react-app. I want to add a third party library (Ant Design UI Framework) that uses .css styles. Ant will use global .css and the rest of my application can then use styleName.
After running npm install babel-plugin-react-css-modules --save what do I have to do to get this running? The documentation references the configuration but the individual steps required properly configure the app aren't clear at all—at least to me.
Can someone help with a bit of an "idiot's guide" to setting this up, and detail some of the steps?
Thanks,
Chris

Ant Design also have react native library as you can see here
You just need to run the following command on your project root to install it:
$ npm install antd-mobile --save

Related

No such module 'SomeModule' after liking plugin to Capacitor app

I cannot seem to find a real solution for my problem anywhere.. After following the Capacitor documentation and creating successfully an app as well as a plugin, i've linked them both using the following commands:
in plugin directory:
-npm run build
-npm link
in app's directory:
-npm link plugin-name
-npm install
-npx cap sync
I open the app's workspace and want to run it on my device but instead I am getting an error in the added plugin of the app, that a certain library I'm using in it does not exist.
p.s
Plugin builds normally and has no issues. This occurs only after I'm linking both plugin and app. Am I doing something wrong?
The error I'm getting inside the plugin's file.
Those are the frameworks linked to the capacitor app.
As of this moment I have solved the issue I had. Shamefully there aren't really any precise documentation regarding the subject so I'll try to answer as best I can:
My issue got resolved when I updated the dependencies inside the .podspec file inside my plugin's folder.
The specific package I wish to use with the plugin, should be specified inside the .podspec file i.e. :
s.dependency 'PicUPSDKv3' should be added.
After running -npx cap sync on my main project's folder, all pods were initialized correctly and I was able to build and run the project alongside the plugin without any errors.
Running npm install unlinks whatever is linked.
You should change the order, first npm install and then npm link plugin-name.
But it's better if instead of linking the plugin you install it from its local folder.

. Why I am getting an error message? Building a React App

I wanted to start practicing with React to make a simple app. Went ahead and downloaded homebrew and node onto my computer. As I build my app with yarn install I get to the end where it tells you happy hacking. But when I run yarn start it gives me an error message.
-There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.
The react-scripts package provided by Create React App requires a dependency:
"eslint": "^6.6.0"
Don't try to install it manually: your package manager does it automatically.
However, a different version of eslint was detected higher up in the tree:
/Users/zacharyschneider/node_modules/eslint (version: 5.16.0)
Manually installing incompatible versions is known to cause hard-to-debug issues.
If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.
To fix the dependency tree, try following the steps below in the exact order:
1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
4. Run npm install or yarn, depending on the package manager you use.
In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:
5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
This may help because npm has known issues with package hoisting which may get resolved in future versions.
6. Check if /Users/zacharyschneider/node_modules/eslint is outside your project directory.
For example, you might have accidentally installed something in your home folder.
7. Try running npm ls eslint in your project folder.
This will tell you which other package (apart from the expected react-scripts) installed eslint.
If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.
P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
zacharyschneider#Zacharys-MBP %
A way to solve this issue or help me understand what is going on that would be great or point me in the right direction to find resources.
Thanks for your Help
It seems like you have installed es-lint 5.16.0 manually, and it conflicts with the needed version (6.6.0).
Have you tried the steps suggested in the error message?
Do you explicitly tell the es-lint version in your package.json? Could you share your package.json if you continue to experience the issue?

Exact steps needed to migrate a react native android app to iOS

I've written a react-native app and compiled it for android.
Now I wish to compile my app for iOS.
I've searched the internet and found a lot of documentation about adding react-native components to an existing iOS app project, but couldn't find a concrete guide/explanation on how to take an existing react-native project(with many components, packages installed etc) and add the relevant iOS configuration.
I guess that I somehow should create an iOS project through xCode,then probably copy some project files into my ios folder of my project, create a podfile corresponding to my packages in package.json, install the required stuff using pod install and then maybe I can run it using the react-native run-ios command, but I'm really not sure whether I'm correct and to do these steps.
If someone can clarify to me what are the required steps I'll be grateful! (And I think other people might find it useful as well)

How to make CircleCI call npm install on two places?

I have just started working with CircleCI so I don't know whether this is too obvious.
Problem is, that I have react website and react native project in one folder. React website uses project/package.json and project/node_modules, while React Native project uses project/nativeApp/package.json and project/nativeApp/node_modules.
To make both run and test correctly, I need to npm install in both locations. How do I tell CircleCI to do that?

React native, pass index.ios.js path to package manager

I'm writing a small POC for my learning benefit. MI want to prove that I can share business logic to a web app and it's react native counterpart. The repo mis below.
https://github.com/danfernand/rate-topic
Essentially under src folder I have a web and native folders. In that folder I have all my actions/reducers/utils.
I installed react-native as a dependency and am using the following run command.
export BABEL_ENV=native && npm run clean && ./node_modules/react-native/packager/packager.sh --project-path './src/native/' --reset-cache
I have tried all that I can find online but can't seem to be able to set the folder where the index.ios.js is. I get an error by the package manager.
Cannot find entry file index.ios.js in any of the roots: ['']
How can I fix this issue?
Find this in another stackoverflow question.
Apparently you just need to use --root
Credit where its due
React cannot find entry file in any of the roots

Resources