I'm trying to use the new Blazor Javascript isolation feature. I'm importing my own JS file as per the example ExampleJsInterop.cs. It works until I try to import an NPM module from within my script. In my package.json I have set up a dependency on interactjs, and in my script I have added import interact from 'interactjs'; at the top.
I'm getting a Failed to resolve module specifier "interactjs" error. I'm not sure how to get past that.
Previously I was using Webpack to bundle my script and dependencies together into a single file that is added into my index.html as a tag. This was working fine, but I'm not sure how to continue using NPM packages with JS isolation.
Thanks!
A bit late, but I've just finished solving a similar issue.
The npm files are installed to the hidden node_modules folder. This isn't available to your script when you are running your app, unless you do something to make it available. however, even if you copied the interactjs file into your scripts folder it would still not work if it was an npm file. Those are meant to run in nodejs not a browser. So you would still need to use your bundler. I tried webpack, but had some issues with certain files so ended up with snowpack instead. I just finished a bunch of articles on javascript interop - part 4 deals with npm
I forgot that I left this question open for almost a year!
I ended up solving it using Snowpack to bundle the NPM package into the Blazor wwwroot folder. Credit goes to this article for pointing me in the right direction: https://nbarraud.github.io/js-in-blazor.html
It's simple issue but I don't know how to do it. I'm looking for some references, but there are problems.
I'm using react-native : 0.60.5. Hence there is no eject method or command.
The project was not created with expo.
After I referenced How to Rename A React Native App and error Unrecognized command "eject", then I follow the process below.
change the app.json's name and diplayName field to name which I want to change
remove android/ and ios/ directory
use react-native upgrade --legacy true
But there is no change on the project name and app name.
Is there any way to change the project and app name? Thanks.
Please check the below steps :
if you want to change both the app name and the package name (i.e. rename the entire app), the following steps are necessary:
Make sure you don't have anything precious (non-generated, manually
copied resources) in the android/ and ios/ subfolders.
Delete both the android/ and ios/ folder.
Change the "name" entry in your package.json to the new name.
Change the app name in both your index.android.js and index.ios.js:
AppRegistry.registerComponent('NewAppName', () => App);
Run react-native upgrade to re-generate the platform subfolders.
If you have linked resources (like custom fonts etc.) run
react-native link.
If you have other generated resources (like app icons) run the
scripts to generate them (e.g. yo).
Finally, uninstall the old app on each device and run the new one.
Hope it helps. feel free for doubts
for android edit strings.xml file which located in res/values/
string name="app_name">APP_NAME</string
I had a very hard time with this and this is what I did - hopefully it helps someone. Literally took me 15 minutes
https://www.npmjs.com/package/react-native-rename install react-native-rename and rename your app to whatever you need using the instructions provided for the package
Important part would be to use this:
npx react-native-rename "YourProjectName" -b com.yourporjectnamehere - because this is needed for android to work correctly
find in your project every file and folder name that will contain your previous name - for me it was mostly in ios folder. I had to rename all the folders and some of the files inside. just replace the part with your previous name with your current name
find all occurrences of your previous name left inside the project with the whole project search in your editor and replace them with the new name.
To make it work for ios
Delete Pods inside the ios folder
Delete node_modules
go to ios folder with your terminal and do pod install
do npm install in your original directory again
make sure all the caches are deleted for your ios simulator with yarn start --reset-cache
To make it work for android
Make sure that under android/app/src/com/yourprojectnamehere/ the folder contains MainApplication.java and MainActivity.java files and that the project name inside are updated
./gradlew clean inside android folder in terminal
Delete node_modules
npm install
react-native run-android and everything should be working
I know its a lot of steps, but from what I have found renaming react native app is not actually as easy as you might have thought
I have added dygraphs to a large, existing project which was created with create-react-app. Everything runs well, I am importing dygraphs using the common syntax:
import Dygraph from 'dygraphs';
However when I try to build my project with npm run build the ES6 bits of dygraphs cause the build to fail:
Creating an optimized production build...
Failed to compile.
Failed to minify the code from this file:
..dev/node_modules/dygraphs/src/dygraph-utils.js:325
Read more here: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build-fails-to-minify
Following the link and looking at line 325 the minifier is tripping over the ES6 => operator. Looking under node_modules/dygraphs, there are src and src-es5 directories. I renamed src to src-es6 and created a symlink:
src -> src-es5
Everything runs and builds just fine using this method but it doesnt seem like the best solution. The link provided suggests ejecting from the create-react-app rig and handling the build myself but that is not an option.
Any suggestions on a more proper way to handle this? Is there a specific way to import Dygraph from the es5 src directory instead?
I can confirm that the workaround as suggested by #danvk works fine.
All you need to do is go to package.json at location - node_modules/dygraphs/package.json and change module value from index to index.es5 and the build works just fine.
It's a bit of a hack, till the time this gets resolved. There is already a ticket opened for this
Using gradle-plugin 3.0.0
Gradle distribution 4.1.0
react-native 0.50
Linux fedora 27
app name is u1b.
Project structure
/proj/mob/rn.common (this is where node_modules is and all my js related stuff)
/proj/mob/a/u1b -- is where the android app is.
the project structure is different than the one normally created by boiler plate react-native create app script (because my node_modules is not just one level up from the android app).
But not clear if this is an issue or not.
I have been building my android with react-native library, in debug mode.
Now its time to start building release.
But I am running into a problem
bash gradlew assembleRelease errors out :
> Task :app:bundleReleaseJsAndAssets
Scanning folders for symlinks in /home/v/devel/mine/proj/mob/rn.common/node_modules (12ms)
Scanning folders for symlinks in /home/v/devel/mine/proj/mob/rn.common/node_modules (9ms)
Loading dependency graph, done.
warning: the transform cache was reset.
bundle: start
bundle: finish
bundle: Writing bundle output to: /home/v/tmp/u1b/app/intermediates/assets/release/index.android.bundle
bundle: Done writing bundle output
bundle: Copying 18 asset files
bundle: Done copying assets
/home/v/tmp/u1b/app/intermediates/res/merged/release/drawable-mdpi/src_jsapp_img_material_ic_local_library_black_48dp_android_drawablexxhlack_48dp.png: **error: Invalid filename. Unable to add.**
The image file it is looking at is, indeed not there. However I have no idea how that file name is constructed and, why it something is looking for it.
my gradle.properties contains a flag to switch to old apk due to a bug
# https://github.com/react-community/react-navigation/issues/1976
android.enableAapt2=false
could somebody shed a light on how the image names are decided and what might be causing the error
thank you
Resolved.
I figured out how the offending file name was constructed, and then I was able to mitigate what seemed to be 'too deep of a path for image file'.
Basically the file name below
src_jsapp_img_material_ic_local_library_black_48dp_android_drawablexxhblack_48dp.png
was concatenation of a path where the file resided in my javascript folder (starting from same level where node_modules are )
my index.android.js referes to a static icon file
icon: require('./src/js.app/img/material/ic_local_library_black_48dp/android/drawable-xxhdpi/ic_local_library_black_48dp.png'),
When the bundler constructed that offending file name, It was basically appending elements of the path to the file together, with some 'mangling'. Like removing a dot (so js.app became jsapp)
I just copied that file over to a higher level directory (to reduce the length of the release-constructed file name)
And then the release build started working.
The length of the offending file name was about 177 characters long. Not sure why it created problem for the release build. I suspect this is a limitation of android tools, not facebook's problem. I switched back and forth between buildTools 25.0.3 and 26.0.2 (that also meant switching android plugin versions .. .and that whole thing took quite a bit of time). But the problem was in either of the buildtools versions.
So I just figured deep directory structures for js static resource (eg images) is a problem for now. So better use smaller directory depths.
I'm getting this error when trying to compile my React Native android app.
The Android app can't resolve BuildConfig.DEBUG.
:app:processDebugJavaRes UP-TO-DATE
:app:compileDebugJavaWithJavac
/Users/amirsharif/mobile-rappad/android/app/src/main/java/com/rappadmobile/MainActivity.java:29: error: cannot find symbol
.setUseDeveloperSupport(BuildConfig.DEBUG)
^
symbol: variable BuildConfig
location: class MainActivity
>1 error
:app:compileDebugJavaWithJavac FAILED
I can temporarily resolve it by simply setting it to true.
This might've happened after I changed an application name (since that's something I've also been trying to do).
I probably have to change something with Gradle so it generates the right kind of files again.
/**
* Automatically generated file. DO NOT MODIFY
*/
package com.app;
public final class BuildConfig {
public static final boolean DEBUG = Boolean.parseBoolean("true");
public static final String APPLICATION_ID = "com.rappadmobile";
public static final String BUILD_TYPE = "debug";
public static final String FLAVOR = "";
public static final int VERSION_CODE = 1;
public static final String VERSION_NAME = "1.0";
}
I had the same issue and it was resolved by simply adding following import statement in MainApplication.java:
import com.facebook.react.BuildConfig;
The way android knows where to find certain files, and how to connect certain files, is by using fields set in AndroidManifest.xml. Since the default setup of a React Native project, references everything with .(name-of-resource), this means that everything will be resolved with regarding to the package name set in the <manifest> tag. So for everything to work out of the box, and everything to be generated as expected, the path to MainActivity.java, should be the same as the package name.
example:
your apps package name:
com.mycompanyname.myappname
location of MainActivity.java: android/app/src/main/java/com/mycompanyname/myappname/MainActivity.java
I rebuilt the project with react-native upgrade.
My issue was then that I had old files that were referencing the old package names (because I changed the name of the app in package.json). Once deleting those, I resolved the issue.
In your MainActivity.java, you can check the first line is package com.YOU_APP_NAME;
If this line does not exist, you should add this.
A combination of some answers helped me, summary:
Make sure your java package names are correct (MainApplication.java etc.)
update the package name in the gradle build file
update the package name in the manifest file
update the package name in the BUCK file
make sure the path to you javascript sources is a folder structure that matches your package name
In my case, I changed the package name in both the BUCK file and Manifest file.
In the BUCK file, change as following.
android_build_config(
name = "build_config",
package = "NEW_PACKAGE_NAME",
)
android_resource(
name = "res",
package = "NEW_PACKAGE_NAME",
res = "src/main/res", )
If you renamed your bundle identifier you will likely need to change:
Your android/app/src/main/....../MainApplication.java package and imports.
Even though I used react-native-rename npm package, it did not take care of some files MainApplication.java and MainActivity.java.
Upgrading react-native solved this error -
react-native upgrade
Now build again -
react-native run-android
Delete the old files that might be there in android/app/src/main/java/com
Just keep the file with the new name of the app. Then do react-native upgrade.
My case was that I renamed the package in one place(AndroidManifest.xml)
Ex:
The original: com.example
Changed it to: com.example.app
Renaming it again solved the problem
I experienced this while following https://dev.to/karanpratapsingh/quick-guide-for-updating-package-name-in-react-native-3ei3. I was renaming my application from com.company_app to com.mycompany.myapp, apparently, there were some files that I still needed to update but was not included in the guide I was following, I think the guide is only for general, like a fresh react-native app, I solved this by doing a global search for com.company_app and just replacing each one to com.mycompany.myapp whenever it makes sense.
Seems like you have updated your package name in all files but failed to change the name of folder which we will same as your package name.
android < src < main < java < com < "middlen_package_name" <
"last_package_name".
ex: com.yourapp.gameapp;
Run the app again but if it still shows this error then ,
check if there is a folder with old package name. Delete this and rebuild again.
Happy Coding.
Check if you have missed installing the react-native-gesture-handler.
with yarn
yarn add react-native-gesture-handler
or with npm
npm install --save react-native-gesture-handler
Then
react-native link react-native-gesture-handler
I fixed it by following these steps:
Android Version:
From Terminal go to android folder and run this command:
gradlew clean
From main project folder delete this folder:
node_modules
From menu file:
Invalidate caches and restart IDE
Find your MainActivity.java file and add this import line:
import com.facebook.react.BuildConfig;
In terminal, go to android folder and run this:
gradlew
in terminal, go to main root and run this:
yarn install
Now you can start the metro and run the app.
P.S.: Make sure that into the MainActivity.java file the bundleID name is correct. You will find it into the first row. Then, make sure that the MainActivity.java file is located into the correct path like this:
project_name/Android/App/src/main/java/1/2/3/MainActivity.java where 1/2/3 must be the name of your bundleID, for example, com/bundle/id