Related
I am using fullcalendar with vue3. I want to change change colors for button and text in fullcalendar.
vue version
"vue": "^3.2.26",
I am getting error
Syntax Error: Error: PostCSS plugin postcss-custom-properties requires
PostCSS 8.
I am following steps mentioned in fullcalendar documentation.
fullcalendar-vars.css
:root {
--fc-border-color: green;
--fc-button-text-color: #ff0000;
}
I have installed following packages
"postcss": "^8.4.7",
"postcss-calc": "^8.2.4",
"postcss-custom-properties": "^12.1.4",
"postcss-loader": "^6.2.1",
Added postcss.config.js at root
module.exports = {
plugins: [
require('postcss-custom-properties')({
preserve: false, // completely reduce all css vars
importFrom: [
'client/fullcalendar-vars.css' // look here for the new values
]
}),
require('postcss-calc')
]
}
And my vue.config.js as follow
const path = require("path");
module.exports = {
pages: {
index: {
entry: "./client/main.js",
},
},
outputDir: path.resolve(__dirname, "./client/dist"),
};
Also I would like to know, Do I need make any changes in vue.config.js?
PostCSS error
Vue CLI scaffolded projects already include PostCSS (including postcss, postcss-calc, and postcss-loader), so you don't need to install it in your project. The only dependency needed here is postcss-custom-properties.
To resolve the PostCSS error, you should uninstall the PostCSS dependencies that you had mistakenly added:
npm uninstall --save-dev postcss postcss-calc postcss-loader
Starting from scratch
To setup custom colors for FullCalendar in a Vue CLI scaffolded project:
Install postcss-custom-properties with:
npm install --save-dev postcss-custom-properties
Create postcss.config.js with the following PostCSS configuration:
// <projectRoot>/postcss.config.js
module.exports = {
plugins: [
require("postcss-custom-properties")({
preserve: false,
importFrom: [
"client/fullcalendar-vars.css",
],
}),
require("postcss-calc"),
],
}
Create fullcalendar-vars.css with the following CSS:
/* <projectRoot>/client/fullcalendar-vars.css */
:root {
--fc-border-color: green;
--fc-button-text-color: #ff0000;
}
Note: Changes to this file are not hot-reloaded, so the dev server must be restarted to reflect any updates.
Start the Vue CLI dev server with:
npm run serve
demo
While running:
npx react-native start --reset-cache
npx react-native run-android
My app crashes at the end of the build without any log.
The problem is coming from #babel/preset-env in babel.config.js (used by jest tests)
babel.config.js :
module.exports = {
presets: ['module:metro-react-native-babel-preset', "#babel/preset-env", '#babel/preset-react'],
plugins: [
["#babel/plugin-proposal-private-methods", { "loose": true }],
'react-native-reanimated/plugin'
],
};
Removing "#babel/preset-env" is resolving the issue, but I need it to launch Jest.
Do you have any idea to fix this ?
I fixed it by simply removing '#babel/preset-react' and '#babel/preset-env' from babel.config.js.
Code was transpiling with module:metro-react-native-babel-preset which caused this issue.
This is my babel file
My code:
import React, { useRef, useState } from 'react'
import { View, useWindowDimensions, Button } from 'react-native'
import Animated, { runOnUI } from 'react-native-reanimated';
export default function Login() {
const { width, height } = useWindowDimensions();
// const value = useSharedValue(0);
function someWorklet(greeting: any) {
'worklet';
console.log("Hey I'm running on the UI thread");
}
return (
<View style={{ flex: 1, justifyContent: 'flex-end', alignItems: 'center' }}>
<Button title="click me" onPress={() => runOnUI(someWorklet)('Howdy')} />
</View>
);
}
The package I installed is "react-native-reanimated": "^2.1.0"
I followed their installation process: React Native Reanimated instalation guide.
The error is:
Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?
I have found this issue on this link.
These are the steps that I have followed for having my project up and running without any errors:
Run yarn add react-native-reanimated#next react-native-gesture-handler
I have added import 'react-native-gesture-handler' to App.tsx file at the top of the file before importing any packages
You should update the babel.config.js file and add react-native-reanimated/plugin to plugins
module.exports = {
presets: ["module:metro-react-native-babel-preset"],
plugins: [
"react-native-reanimated/plugin",
],
};
The last thing you should do is run your project by removing the cache yarn start --reset-cache
Here is what worked for me in an Expo project.
This is my babel.config.js.
Note that react-native-reanimated/plugin must be at the last plugin in the plugins array of the babel.config.js.
module.exports = function (api) {
api.cache(true);
return {
presets: ["babel-preset-expo"],
plugins: [
[
"module-resolver",
{
extensions: [".tsx", ".ts", ".js", ".json"],
},
],
"react-native-reanimated/plugin",
],
};
};
Make sure you add react-native-reanimated/plugin as the last element of the plugins
Then stop the expo-server and run the following command:
expo r -c
It's all done.
Clearing the cache worked for me, run:
npx react-native start --reset-cache
If you are using Expo try to start your app with expo r -c in order to clear caches associated with your project.
Just add the below code in babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
// add the below line
plugins: ['react-native-reanimated/plugin'],
// this should be always last line
};
then if you need to clear the package manager cache and start it clean if you are using
yarn
yarn start --reset-cache
npx
npx react-native start --reset-cache
and it worked for me
I faced the same issue. The following command solved the issue:
npm install react-native-reanimated#~2.2.0
I also came around this problem while implementing the reanimated 2 package. For me it seems a half configured installation issue. I am using React Native CLI and Windows Machine.
This is what worked for me :
Delete the node_modules folder and run this just to be sure.
npx react-native start --reset-cache
Run
npm install
In babel.cofig.js add these lines. the Reanimated plugin has to be the last item in the plugins array.
//babel.config.js
module.exports = {
...
plugins: [
...
'react-native-reanimated/plugin', // << add
],
};
Turn on Hermes engine by editing android/app/build.gradle
project.ext.react = [
enableHermes: true
]
5.Plug Reanimated in MainApplication.java. This file is present in android/app/src/main/java/com/appname folder.
import com.facebook.react.bridge.JSIModulePackage; // << add
import com.swmansion.reanimated.ReanimatedJSIModulePackage; // << add
...
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
...
#Override
protected String getJSMainModuleName() {
return "index";
}
**#Override //<<add this function
protected JSIModulePackage getJSIModulePackage() {
return new ReanimatedJSIModulePackage();
}**
};
This is actually availaible in there installation docs.
https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation
I just add react-native-reanimated/plugin to babel.config.json in plugins array
module.exports = {
presets: [some thing],
plugins: [
"react-native-reanimated/plugin",
],
};
and after that expo start -c
and error solved no need do extra steps
Just adding "plugins: ['react-native-reanimated/plugin']", in my babel.config did the trick for me.
My babel.config.js file look like this now.
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: ['react-native-reanimated/plugin'],
};
then I fully cleaned my RN project by running these:
watchman watch-del-all
rm -rf yarn.lock package-lock.json node_modules
rm -rf android/app/build
rm ios/Pods ios/Podfile.lock
rm -rf ~/Library/Developer/Xcode/DerivedData
npm install && cd ios && pod update && cd ..
npm start -- --reset-cache
You should run one by one or one line command.
watchman watch-del-all && rm -rf yarn.lock package-lock.json node_modules && rm -rf android/app/build && rm ios/Pods ios/Podfile.lock && rm -rf ~/Library/Developer/Xcode/DerivedData && npm install && cd ios && pod update && cd ..
Hope this help to someone.
Delete node_modules and reinstall, and make sure to delete all caches and all previous settings -- RN caches, packager caches, simulator caches and settings, etc. It might even help to go to a previous version of your app when you hadn't tried to install version 2 at all.
I am using expo and following all these steps was helpful :- https://forums.expo.io/t/how-to-clear-the-expo-and-react-native-packager-caches-metro-watchman-haste/1352
Add this code in babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
env: {
production: {
plugins: [
],
},
},
plugins: [
[
'module-resolver',
{
extensions: ['.tsx', '.ts', '.js', '.json'],
},
],
'react-native-reanimated/plugin'
]
};
and then rebuild your application or run yarn start --reset-cache
follow these steps
expo install react-native-reanimated
After the installation completed, add the Babel plugin to babel.config.js:
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: ['react-native-reanimated/plugin'],
};
};
expo start --clear
In my condition i will change my babel.config.js to different this
module.exports = function (api) {
api.cache(true);
return {
presets: ["babel-preset-expo"],
plugins: [
[
"module-resolver",
{
extensions: [".tsx", ".ts", ".js", ".json"],
},
],
"react-native-reanimated/plugin",
],
};
};
Don't Forget to type this command on your project directory
expo r -c
After you add the Babel plugin, restart your development server and clear the bundler cache: expo start --clear.
Note: If you load other Babel plugins, the Reanimated plugin has to be the last item in the plugins array.
I tried this on a freshly created expo project (tabs template). It generated the following default babel.config.js:
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo']
};
};
I added just one line, like this:
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: ['react-native-reanimated/plugin']
};
};
and cleared the rebuild cache (yarn start -c).
This worked for me.
Sometimes you have done all setups but you are getting errors then just type this cmd:
npx react-native start --reset-cache
It will be helpful.
I had the same issue yesterday and when I did a Google search I landed here. After some digging here is what I understood:
Reanimated v2's latest version does not run in Expo when in debug mode. So I tried to open the developer options to turn off debugging by shaking the device but I was not able to.
Then I found that you can toggle to production mode once the Metro Bundler server connection is established. Once you toggle to production mode in Expo, the app works.
Enabling Production mode in Expo
You can try
yarn add react-native-reanimated#next
npx react-native start --reset-cache
Add Reanimated's babel plugin to your babel.config.js.
module.exports = {
presets: [
'module:metro-react-native-babel-preset',
'#babel/preset-typescript'
],
plugins: ['react-native-reanimated/plugin'],
};
It's worked for me. My babel.config was:
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
env: {
production: {
plugins: [
'react-native-paper/babel',
'react-native-reanimated/plugin',
],
},
},
};
I changed to this:
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
'react-native-paper/babel',
'react-native-reanimated/plugin',
]
};
And did all the instructions at https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation
If you are using expo, what worked for me is
expo doctor --fix-dependencies
install expo
expo install react-native-reanimated
add babel.config.js
plugins: ['react-native-reanimated/plugin']
start server
expo start --clear
I had to upgrade from 2.8.0 to 2.9.1 (the latest stable version). Also 3.0.0-rc worked too.
You can see the latest versions on the Versions tab here.
Change it in your package.json file:
"react-native-reanimated": "2.9.1",
And run yarn again to download the package.
We had a .babelrc and babel.config.json and only the config had our reanimated plugin so I consolidated them but that didn't fix the issue.
For "react-native-reanimated": "~2.12.0"
Step 1:
Add import 'react-native-gesture-handler' to App.ts file at the top of the file before importing any packages
Step 2:
Go to the babel.config.js and add plugins array:-
module.exports = function (api) {
api.cache(true);
return { '
presets: ["babel-preset-expo"],
plugins: ["react-native-reanimated/plugin"//must be in the end of plugins array],
};
};
Step 3:
Run npx expo -c
Resources:
*1.*https://reactnavigation.org/docs/drawer-navigator
2-https://www.reanimated2.com/docs/fundamentals/installation
3-https://stackoverflow.com/questions/67130651/reanimated-2-failed-to-create-a-worklet-maybe-you-forgot-to-add-reanimateds-ba/68694681#68694681
I have one react-native app in which I am using "json-schema-rules" library. Now I have also created one library which is getting used in my react-native app like this "file:../custom_library" in package.json.
Now to resolve the version conflict, I decided to use "json-schema-rules" as a peer dependency in my custom library. So, the package.json is like this
Package.json of my react-native app:
{
"dependencies": {
"json-rules-engine": "^2.3.0",
"custom_library": "file:../custom_library"
}
}
package.json of my custom_library:{
"peerDependencies": {
"json-schema-rules": "^2.3.0"
}
}
Now the problem is, whenever I am using metro bundler, I get an error
error: bundling failed: Error: Unable to resolve module json-rules-engine
json-rules-engine could not be found within the project.
This is the case when I am using it in peerDependencies, I do not get any error if I use this library in dependencies.
Please help.
You can try to add an alias for the module in your project's babel config.
This means that when your custom packages tries to import "json-rules-engine" it will get served the version from the main app.
First install 'babel-plugin-module-resolver' then configure the alias in "module-resolver"
babel.config.js
const config = {
presets: ["module:metro-react-native-babel-preset"],
plugins: [
[
"module-resolver",
{
root: ["./src"],
extensions: [".js", ".jsx", ".ios.js", ".android.js"],
alias: {
"json-rules-engine": require.resolve("json-rules-engine")
}
}
]
]
};
module.exports = config;
I am new to react-native but not ReactJs iam going to mad about this error from 2 days
error: bundling failed: Error: While trying to resolve module `#react-navigation/native` from file `C:\XXXXX\Example\src\Router.jsx`, the package `C:\XXXXX\Example\node_modules\#react-navigation\native\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`C:\XXXXX\Example\node_modules\#react-navigation\native\src\index.tsx`. Indeed, none of these files exist:
error: bundling failed: Error: While trying to resolve module `react-native-safe-area-context` from file `C:\XXXXX\Example\App.js`, the package `C:\XXXXX\Example\node_modules\react-native-safe-area-context\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`C:\XXXXX\Example\node_modules\react-native-safe-area-context\src\index.tsx`. Indeed, none of these files exist:
This is my package.json
{
"name": "Example",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native start",
"test": "jest"
},
"dependencies": {
"#react-native-community/masked-view": "^0.1.6",
"#react-navigation/native": "^5.0.0",
"#react-navigation/stack": "^5.0.0",
"eslint": "^6.8.0",
"jetifier": "^1.6.5",
"native-base": "^2.13.8",
"prop-types": "^15.7.2",
"react": "16.8.6",
"react-native": "0.60.0",
"react-native-camera": "^3.16.0",
"react-native-gesture-handler": "^1.5.6",
"react-native-image-crop-picker": "^0.28.0",
"react-native-reanimated": "^1.7.0",
"react-native-safe-area-context": "^0.7.2",
"react-native-safe-area-view": "^1.0.0",
"react-native-screens": "^2.0.0-beta.2",
"react-native-svg": "^11.0.1",
"react-native-vector-icons": "^6.6.0"
},
"devDependencies": {
"#babel/core": "^7.3.3",
"#babel/runtime": "^7.3.1",
"#react-native-community/eslint-config": "^0.0.3",
"babel-jest": "^24.1.0",
"jest": "^24.1.0",
"metro-react-native-babel-preset": "^0.54.1",
"react-test-renderer": "16.8.6"
},
"jest": {
"preset": "react-native"
}
}
I am downgrade the react-navigation version to react-navigation 4 and react-navigation-stack
the error become
error: bundling failed: Error: While trying to resolve module `react-native-safe-area-context` from file `C:\XXXXX\Example\node_modules\react-navigation-stack\lib\module\vendor\views\Stack\StackView.js`, the package `C:\XXXXX\Example\node_modules\react-native-safe-area-context\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`C:\XXXXX\Example\node_modules\react-native-safe-area-context\src\index.tsx`. Indeed, none of these files exist:
I am also deleted node_modules ,clear cache and install again but no use same errors appear
After a long research MetroJS bundler default not compile typescript .ts and .tsx extension files.
We need tell MetroJS bundler to compile .ts and .tsx files
i solved this error by edit metro.config.js file in root project folder by following.
Edited on September 2022
Added cjx and json extensions to below snippet
All extensions listed below not required it's depend on what language you choose javascript or typescript, and your dependencies
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
resolver: {
sourceExts: ['jsx', 'js', 'ts', 'tsx', 'cjs', 'json'] //add here
},
};
The above answers did not work for me. Turns out there was nothing wrong with my files.
I simply had to terminate the react-native metro that was running on the terminal and restarted it, it worked fine.
Adding to the accepted answer by Jogi, this issue was acknowledged by the Apollo developers at https://github.com/apollographql/apollo-client/blob/main/CHANGELOG.md#apollo-client-354-2021-11-19
I was unable to resolve the issue with Jogi's answer alone, but after adding 'cjs' to the array, as recommended in the linked changelog, my app was able to start up as expected.
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true,
},
}),
},
resolver: {
sourceExts: ['jsx', 'js', 'ts', 'tsx', 'cjs'],
},
};
For me, I'm using two terminals to run my app. 1st terminal: react-native start, 2nd: react-native run android, which builds the app and starts it on my physical device. I got the same error above when I installed a new package and rebuild my app not knowing that I had to restart the react-native server.
So what I just did is went back to 1st terminal, killed it, and re-run react-native start then rebuilt my app in the second terminal and everything is working as expected!!!
here is how my metro.config.js it looks like after configuring. i am using react-navigato 5*
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
/** include this below (remove this comment too)*/
resolver: {
sourceExts: ['jsx', 'js', 'ts', 'tsx'],
},
};
I got the same error with react-native-gesture-handler package.Changing metro.config.js file has worked for me.
/**
* Metro configuration for React Native
* https://github.com/facebook/react-native
*
* #format
*/
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
resolver: {
sourceExts: ['jsx', 'js', 'ts', 'tsx'],
},
};
This has worked for me.
* Metro configuration for React Native
* https://github.com/facebook/react-native
*
* #format
*/
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
resolver: {
sourceExts: ['jsx','js','ts','tsx'] //add here
},
};
As many of them already mentioned to customize your metro.config.js file. If it is not there create it in the root directory of your project and then add the code as everyone said. Now even after adding the code in metro.config.js file error is there, then you have to stop your expo server and restart with command
expo start -c
This works for me. Hope it will help you too.
For Expo, this version worked
https://github.com/firebase/firebase-js-sdk/issues/6253#issuecomment-1123923581
const { getDefaultConfig } = require("#expo/metro-config");
const defaultConfig = getDefaultConfig(__dirname);
defaultConfig.resolver.assetExts.push("cjs");
module.exports = defaultConfig;
Sometimes, you get this error because you install an npm package that has a main script that's not correctly integrated with your project. This could be because you have named your files differently, you have nested your file a layer deeper and causes a script to break, etc.
Check the package.json file of the package the error message tells you "main" is incorrect and see if it is correctly pointing to the app entry in the package.json of the root directory.
Doing this fixed the error for me.
for me none of the above worked but this did:
go to :
node_modules\deprecated-react-native-prop-types\DeprecatedColorPropType.js
find this line :
const normalizeColor = require('#react-native/normalize-color');
and change it to this:
const normalizeColor = require('#react-native/normalize-color/base');
I tried all the solutions above but none worked. so i did yarn install instead of npm and it worked
For me, It was to kill my metro cmd
Deleted my app from the emulator then,
run npx react-native run-android or
if you're using expo run
npm start
Error is gone
kill the already running terminal and start the project by running this command:
npx react-native start it will start your app as expected
I got the same issue.I am using yarn as my package manager. Resolved the issue by following the below steps.
Stop the metro bundler(In my case i closed terminal which terminated metro bundler).
Restart it using yarn start --reset-cache.
Run yarn android.
In my case the error was due to the cache. I followed following steps:
Navigate to android folder
cd android
after that clean the build folder
./gradlew clean
and to generate the apk file
./gradlew assembleRelease -x bundleReleaseJsAndAssets
use this to generate aab
./gradlew bundleRelease -x bundleReleaseJsAndAssets
I hope these commands will help others as well.