I've a problem with babel-plugin-macros, currently I created a component package with twin.macro, the compiler shows a success message, and the npm publish command too. But, if I install the library and use on my project shows the next error:
MacroError: The macro you imported from "undefined" is being executed
outside the context of compilation with babel-plugin-macros. This
indicates that you don't have the babel plugin "babel-plugin-macros"
configured correctly. Please see the documentation for how to
configure babel-plugin-macros properly:
https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/user.md
The libraries babel-macros-plugin and tailwind already been setup in the project
I go this same error because we changed some files to .tsx and forgot to update the babel extensions.
Related
So I have package 1 that I wrote in Typescript that contains mocha tests and I'm pretty sure that it works as it should. I push all the code to the git provider and pull it via npm on package 2. When I start React with Typescript on package 2, I get the following:
I tried adding webpack.config.js, various tsconfig.json configuration changes and multiple npm commands that are connected to cache cleaning and reinstalling but nothing works. This error is just plain weird because, from what I know, there shouldn't be any compilation errors regarding class variables.
FIX
This was a very quick fix. So, in short, if the provider with which you started your Typescript application doesn't provide you with webpack or babel file you will have to transpile any module from node_modules into Javascript that you try to import. In this case I just transpiled package 1 and package 2 worked perfectly.
I am working on a react app with a couple of colleagues, and after the latest pull I am no longer able to compile the app, but my colleagues are not having any issues.
On my end the app fails to compile because some #material-ui components are displayed as missing in the node_modules/#material-ui directory. However, when I search the folder, I see the files there, they are just shown in typescript format instead of js. However, when comparing my working directory with a colleague's it appears there are also files completely missing on my end that exists on theirs.
For example, when the app fails to compile I see this:
Failed to Compile
./node_modules/#material-ui/core/TextField/TextField.js
Module not found: Can't resolve '../FilledInput' in
'..../node_modules/#material-ui/core/TextField'
When I search this folder, the file is there but labelled 'FilledInput.d.ts'.
Has anyone encountered something like this? I have recompiled the app, and deleted the branch and recloned from remote but the issue remains.
Thanks
Have you tried removing node_modules and installing dependencies again?
Does npm install give any peer dependency warnings? Does this help?
npm i #material-ui/core --save
I am trying to compile my first React Native project, and it all works fine from the CLI, until I try to install a new library.
After installing any library, I get various errors, culminating in this:
error: bundling failed: Error: While trying to resolve module `react` from file `/Users/myname/Desktop/Projects/ProjectName/App.js`, the package `/Users/myname/Desktop/Projects/ProjectName/node_modules/react/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/myname/Desktop/Projects/ProjectName/node_modules/react/index.js`. Indeed, none of these files exist:
I have, indeed, confirmed that those files exist.
What is going on here? I'm constantly having these errors as I am trying to use React Native, even when rebuilding the app multiple times and trying over.
Do the following steps:
Stop metro bundler
Delete node_modules folder
cd into your project folder and run:
'npm install'
I am working on react native push notification and configuring fcm in my build.gradle file
I am getting error
> Task :react-native-device-info:compileReleaseJavaWithJavac
Note: E:\IOOLABS\Projects\mobeApp\mobeApp\node_modules\react-native-device-info\android\src\main\java\com\learnium\RNDeviceInfo\RNDeviceModule.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
> Task :react-native-fcm:compileReleaseJavaWithJavac
Note: E:\IOOLABS\Projects\mobeApp\mobeApp\node_modules\react-native-fcm\android\src\main\java\com\evollu\react\fcm\SendNotificationTask.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
> Task :react-native-i18n:compileReleaseJavaWithJavac
Note: E:\IOOLABS\Projects\mobeApp\mobeApp\node_modules\react-native-i18n\android\src\main\java\com\AlexanderZaytsev\RNI18n\RNI18nModule.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
> Task :react-native-video:compileReleaseJavaWithJavac
Note: E:\IOOLABS\Projects\mobeApp\mobeApp\node_modules\react-native-video\android\src\main\java\com\brentvatne\react\ReactVideoViewManager.java uses unchecked or unsafe operations.
Note: Recompile with -Xlint:unchecked for details.
here it is app/build.gradle configuration
dependencies {
compile project(':react-native-fcm')
compile 'com.google.firebase:firebase-core:10.0.1' //this decides your firebase SDK version
compile 'com.google.firebase:firebase-messaging:10.0.1'
compile project(':react-native-config')
compile project(':react-native-sound')
compile project(':react-native-vector-icons')
compile project(':react-native-video')
compile project(':react-native-file-chooser')
compile project(':react-native-audio')
compile project(':react-native-image-picker')
compile project(':react-native-i18n')
compile project(':react-native-device-info')
compile fileTree(include: ['*.jar'], dir: 'libs')
compile 'com.android.support:appcompat-v7:23.0.1'
compile 'com.facebook.react:react-native:+'
}
and android build.gradle file is
dependencies {
classpath 'com.android.tools.build:gradle:2.3.2'
// PLEASE DO NOT CHANGE GRADLE VERSION
classpath 'com.google.gms:google-services:3.2.1'
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
help me how to resolve it
This is the conflict of android jar library.
It is common error.
You need exclude module or something?
I can't answer your question, because It is few information about your error.
What I want to say is react-native-device-info and react-native-fcm very often conflict!. (the two library use same jar file.)
try search exclude module or force in build.gradle.
And, react-native-firebase is better fcm library than react-native-fcm.
Try it.
Read it!
How to solve Google Play Services version collision in gradle dependencies
https://medium.com/#suchydan/how-to-solve-google-play-services-version-collision-in-gradle-dependencies-ef086ae5c75f
Welcome to React Native!!!
did you try jetify ?
First, use Android Studio's refactoring tool to convert your app re: the Android developer docs
npm install --save-dev jetifier
npx jetify
npx react-native run-android (your app should correctly compile and work)
Call npx jetify run in the postinstall target of your package.json (Any time your dependencies update you have to jetify again)
For more informations :
jetify
I want to contribute to an open source React Component and I'd like to use a fork of the project in my webpack bundle.
I am using yarn and I tried to install my fork using
yarn add github:Startouf/react-coverflow
However, when webpack tries to compile my bundle, it raises weird errors
ERROR in ./~/react-coverflow/main.js
Module not found: Error: Can't resolve './dist/react-coverflow' in '/Users/Cyril/dev/MyApp/client/node_modules/react-coverflow'
Did I miss something ?
EDIT : when I use the released package from npm, the node module folder contains
LICENSE README.md dist main.js package.json
When I use my fork, it seems like the project isn't compiled and contains
LICENSE README.md package.json src webpack.config.js
Makefile main.js site test
Seems like I'm missing a step... I though doing yarn add with a github fork would automatically make a release but seems like I'm wrong ?
Unfortunately, using a repository directly as source can result in execution error. This is because it's not bundled at all, while the package expects an prebuilt version existing in dist. The bundling scripts are often executed before publishing releases to npm.
Some workarounds are:
execute the prepublish step in the target directory (this depends on
what the project uses)
of course, using the published version is the best. create your own package on npm and upload it.
References: npm issue
The package should be updated to include a prepare step.
A prepare step does exactly what you want in all cases.
https://stackoverflow.com/a/57503862/4612476
You can add the prepare script in package.json#scripts yourself that runs the build. Npm and Yarn will then automatically run the prepare script on install directly from GitHub. You can then treat it like any other package and it will always just workâ˘.
Don't forget the package.json#files section. See the linked answer for more details.