When I run
react-scripts build
I get the following message :
The following changes are being made to your tsconfig.json file:
- compilerOptions.jsx must be react-jsx (to support the new JSX transform in React 17)
However I do not have React 17. It is not installed, or in my package.json file.
The only thing I did was upgrade to React 17 a few days ago to play around with it, but then I reverted. Everything is back to 16.
Why does react-scripts think it should update my JSX?
I just realised what the problem was.
I had a package.json file one level up from my actual project. It was there by accident. Inside the "parent" package.json I had React 17 defined.
package.json
|
|----- package.json
It seems like npm or CRA is behaving like Maven and trying to recursivley process build scripts up the folder tree.
Related
I am using Vue 2 (doesn't really matter which version exactly).
I want to test some things that happen behind the hood in Vue. So I decided to add console.log('test123') in Vue's files in node_modules. It turns out that the console log never fires. I put that in all files of Vue in node_modules, even in all files of dist's folder of Vue.
How can I achieve this ? If I fork the repo, then I'd have to upload new versions each time on my repo and then run npm install. I know that will work but wanted to achieve this without forking.
Any ideas what I am missing ?
there are many ways .. but i feel more comfortable using this method :
you can download any npm package in a seperated folder next to your project...
open the folder of the package then run this in the terminal:
npm link
then open the project folder and run
npm link ../package-path # link the dir of your dependency
References
npm-link
How to test an npm package locally
In a create-react-app i would like to access some properties of the package.json and show those to the user in the browser. Like the version of the app and the version of some of the dependencies specified in the package.json.
How would I access those properties, without importing and exposing the whole package.json to the client?
Executing npm run build on the create-react-app provides a production bundle in the ./build directory.
Solution 1:
The way it works it does not expose the rest of the package.json content to the production bundle when making a destructured import. (E.g. previous answer from Devchris)
import { dependencies } from './package.json';
Solution 2:
By extending the npm scripts it is possible to read and expose the package.json into the node environment and read it from there at build time (https://create-react-app.dev/docs/adding-custom-environment-variables)
process.env.REACT_APP_DEPENDENCIES
Note: The variable must start with 'REACT_APP_'
What you can do is:
import { version, dependencies } from './package.json';
this will give you all dependencies and the version of your package.json in your js code. Keep in mind that your path to the package.json file might be different.
I have a problem "Unable to resolve module".
// Please, read the question before publish comments with links for first result from google.
This is the import line where I got the error:
import Interactor from 'react-native-native-orientation-interactor';
What I did:
Create a react-native library
Run npm link inside the library folder
Run npm link react-native-native-orientation-interactor inside a demo react-native app
Add import statement
Got the error with import.
If I press Cmd+B on import statement I can open a file from node_modules folder. Also I can see my library (as a link) inside node_modules.
But I didn't find any solution for me.
Upd1: I added my library as a dependency in package.json
"dependencies": {
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-native-orientation-interactor": "*"
},
1 - First of all you have written double native in react-native-native-orientation-interaction
2 - Another thing is, don't add dependencies manually..
Use Proper installation guide like
npm install --save react-native-orientation-interactor
or
yarn add react-native-orientation-interactor
then link the dependency.
3 - And actually I didn't get any module named 'react-native-orientation-interaction'.
react-native-orientation
here is the one of valid module dependency.
always read the whole proper Documentation.( Correct me if I am wrong)
If you are able to link your package correctly, and problem still persists.
From my experience you can do two things to resolve error.
1) Try to install pod in ios/ directory
or
2) Just close the Termianl and re-run
I init a new project using react native 0.61.2 , using react-native init proj command, after that when I try to react-native run-android, the build fails with this error :
FAILURE: Build failed with an exception.
Where:Script '..\node_modules#react-native-community\cli-platform-android\native_modules.gradle' line: 182
What went wrong:
A problem occurred evaluating script.
Unable to determine the current character, it is not a string, number, array, or object
The current character read is 'D' with an int value of 68
Unable to determine the current character, it is not a string, number, array, or object
line number 1
index number 0
as i mentioned, it's a fresh project.
any idea how to fix this ?
I ran into the same issue today and noticed that react recently released new versions to react-native and react.
I downgraded to versions i know work properly which are:
"react": "~16.8.0",
"react-native": "~0.60.0"
cleared all cache and the project loads correctly.
in order to do so change the dependencies in your package.json file
then delete your node_modules directory, package.lock file and run npm cache clean
finally run npm i
perhaps there are still issues in the new releases.
I am aslo facing the same issue. Downgrading works, however i have two other projects that r working fine and they are react native 0.61.2
Only new projects are giving this error. I read in some blogs that removing react community cli from global and trying again might do the trick.
Will try that tomorrow and post my findings.
Look for mistakes in your AndroidManifest.xml!!!
For me, I solved this by replacing the character ” with "
(And also read some people telling that unclosed tags did that too)
As dumb as it looks, I got to this error from following a tutorial.
(tip: VS code would often show these quotes in different colors, unless you have installed another XML files extension)
I ran into the same issue in a fresh project with RN 0.64.0. The project was created inside a monorepo that was using Yarn workspaces. In my case, Yarn had moved or "hoisted" the #react-native-community/cli-platform-android/native_modules.gradle file to the root node_modules directory.
The Android project's settings.gradle and build.gradle files are expecting the #react-native-community/cli-platform-android/native_modules.gradle file to be in the RN project's node_modules directory and not the repo's root node_modules directory.
Try updating line 2 of settings.gradle to something like:
apply from: file("../../../node_modules/#react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
And line 222 of build.gradle to something like:
apply from: file("../../../../node_modules/#react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
Obviously, you will need to adjust how many leading ../ you add to the path depending on how nested your project is.
You could also look into using the nohoist options available with Yarn to keep packages from moving around.
My git hooks does't get triggered. I pretty sure the reason is, because my package.json file isn't on the same level as my .git. So my .git dir structure looks something like this:
.git/...
.vscode/...
auth/...
core/...
www/package.json
www/scripts/verify-commit-msg.js
www/src/...
As you can see my package.json is nested inside my www/ folder.
Within my `package.json, my gitHooks looks as follow.
"gitHooks": {
"commit-msg": "node scripts/verify-commit-msg.js"
}
Additional Note: It works fine if my package.json is on the same level as my .git
I know 1 solution is to put my www in its own git repo. For now I don't want to do that.
I am using vue cli 3, and I know they are using yorky for the githooks tooling.