Comments (14)
WilliamWelsh
commented on June 8, 2024
2
After updating those four files, my packaged Hermes app runs in release now! Even from the Microsoft store as a flight
from react-native-windows.
chrisglein
commented on June 8, 2024
Can I back up one step and ask why you're adding an additional packaging project when the new project template started you out with a UWP app that's already packaged? I'm not understanding the scenario. Would it be possible to add your background task to the UWP project created for you?
Thanks for sharing the steps. Can you share a min repo of the steps you executed so we can get detail on these steps in particular:
- Add a new project - Windows Application Packaging Project (C# UWP)
- Add the test project as a reference in the new packaging project
Hermes in particular has a different version for UWP apps vs. Win32 apps, and if we end up with the wrong version it could cause problems (maybe like what you're seeing here).
from react-native-windows.
WilliamWelsh
commented on June 8, 2024
Can I back up one step and ask why you're adding an additional packaging project when the new project template started you out with a UWP app that's already packaged? I'm not understanding the scenario. Would it be possible to add your background task to the UWP project created for you?
In the new, packaging project, I can add my .NET Framework background process under "Dependencies" just fine, and have UWP run via full trust. If I try to add that same project under "References" in the uwp app it says it's unable to (am I supposed to add it a different way?)
Thanks for sharing the steps. Can you share a min repo of the steps you executed so we can get detail on these steps in particular:
- Add a new project - Windows Application Packaging Project (C# UWP)
- Add the test project as a reference in the new packaging project
Hermes in particular has a different version for UWP apps vs. Win32 apps, and if we end up with the wrong version it could cause problems (maybe like what you're seeing here).
https://github.com/WilliamWelsh/react-native-windows-hermes-fail
from react-native-windows.
tero-paananen
commented on June 8, 2024
We have this kind of project and currently it works with Hermes on release on RNW 0.73.x
I think that solution for you problem is add ContinueOnError="true" flags into react-native-windows/PropertySheets/Bundle.Common.targets into commands Exec and Move
diff --git a/node_modules/react-native-windows/PropertySheets/Bundle.Common.targets b/node_modules/react-native-windows/PropertySheets/Bundle.Common.targets
index 8170719..1124f9a 100644
--- a/node_modules/react-native-windows/PropertySheets/Bundle.Common.targets
+++ b/node_modules/react-native-windows/PropertySheets/Bundle.Common.targets
@@ -19,9 +19,9 @@
<!-- See https://github.com/facebook/react-native/blob/07d090dbc6c46b8f3760dbd25dbe0540c18cb3f3/react.gradle#L190 for reference -->
<Target Name="CompileHermesBytecode" AfterTargets="MakeBundle" Condition="'$(UseBundle)' == 'true' AND '$(UseHermes)' == 'true'">
<Message Importance="High" Text="Running [$(HermesCompilerCommand) -emit-binary -out $(BundleOutputFile).hbc $(BundleOutputFile) $(HermesCompilerFlags) -output-source-map] to precompile bundle file." />
- <Exec Command='$(HermesCompilerCommand) -emit-binary -out "$(BundleOutputFile).hbc" "$(BundleOutputFile)" $(HermesCompilerFlags) -output-source-map' ConsoleToMSBuild="true" WorkingDirectory="$(BundleCommandWorkingDir)" />
- <Move SourceFiles="$(BundleOutputFile).hbc" DestinationFiles="$(BundleOutputFile)" />
- <Move SourceFiles="$(BundleOutputFile).hbc.map" DestinationFiles="$(HermesSourceMap)" />
+ <Exec Command='$(HermesCompilerCommand) -emit-binary -out "$(BundleOutputFile).hbc" "$(BundleOutputFile)" $(HermesCompilerFlags) -output-source-map' ContinueOnError="true" ConsoleToMSBuild="true" WorkingDirectory="$(BundleCommandWorkingDir)" />
+ <Move SourceFiles="$(BundleOutputFile).hbc" ContinueOnError="true" DestinationFiles="$(BundleOutputFile)" />
+ <Move SourceFiles="$(BundleOutputFile).hbc.map" ContinueOnError="true" DestinationFiles="$(HermesSourceMap)" />
<Exec Command='node "$(ReactNativeDir)\scripts\compose-source-maps.js" "$(PackagerSourceMap)" "$(HermesSourceMap)" -o "$(BundleSourceMap)"' ConsoleToMSBuild="true" WorkingDirectory="$(BundleCommandWorkingDir)" />
</Target>
</Project>
\ No newline at end of file
from react-native-windows.
tero-paananen
commented on June 8, 2024
There is our RNW 0.73 patch
diff --git a/node_modules/react-native-windows/Libraries/Components/View/View.windows.js b/node_modules/react-native-windows/Libraries/Components/View/View.windows.js
index 5367fe6..cf1e578 100644
--- a/node_modules/react-native-windows/Libraries/Components/View/View.windows.js
+++ b/node_modules/react-native-windows/Libraries/Components/View/View.windows.js
@@ -191,7 +191,7 @@ const View: React.AbstractComponent<
}
return child;
});
- if (updatedChildren.length == 1) {
+ if (updatedChildren?.length == 1) {
return updatedChildren[0];
} else {
return updatedChildren;
diff --git a/node_modules/react-native-windows/Microsoft.ReactNative.Managed.CodeGen/Microsoft.ReactNative.Managed.CodeGen.csproj b/node_modules/react-native-windows/Microsoft.ReactNative.Managed.CodeGen/Microsoft.ReactNative.Managed.CodeGen.csproj
index 59ed3e1..a6fe347 100644
--- a/node_modules/react-native-windows/Microsoft.ReactNative.Managed.CodeGen/Microsoft.ReactNative.Managed.CodeGen.csproj
+++ b/node_modules/react-native-windows/Microsoft.ReactNative.Managed.CodeGen/Microsoft.ReactNative.Managed.CodeGen.csproj
@@ -15,6 +15,9 @@
<Nullable>enable</Nullable>
<LangVersion>8.0</LangVersion>
+
+ <GenerateTargetFrameworkAttribute>false</GenerateTargetFrameworkAttribute>
+ <GenerateAssemblyInfo>false</GenerateAssemblyInfo>
</PropertyGroup>
<ItemGroup>
diff --git a/node_modules/react-native-windows/Microsoft.ReactNative/Modules/NativeUIManager.cpp b/node_modules/react-native-windows/Microsoft.ReactNative/Modules/NativeUIManager.cpp
index af36d60..685927d 100644
--- a/node_modules/react-native-windows/Microsoft.ReactNative/Modules/NativeUIManager.cpp
+++ b/node_modules/react-native-windows/Microsoft.ReactNative/Modules/NativeUIManager.cpp
@@ -953,7 +953,8 @@ void NativeUIManager::SetLayoutPropsRecursive(int64_t tag) {
const auto hasLayoutChanged = !YogaFloatEquals(left, shadowNode.m_layout.Left) ||
!YogaFloatEquals(top, shadowNode.m_layout.Top) || !YogaFloatEquals(width, shadowNode.m_layout.Width) ||
!YogaFloatEquals(height, shadowNode.m_layout.Height);
- if (hasLayoutChanged) {
+ const auto isValidLayout = !isnan(width) && !isnan(height);
+ if (isValidLayout && hasLayoutChanged) {
React::JSValueObject layout{{"x", left}, {"y", top}, {"height", height}, {"width", width}};
React::JSValueObject eventData{{"target", tag}, {"layout", std::move(layout)}};
pViewManager->DispatchCoalescingEvent(tag, L"topLayout", MakeJSValueWriter(std::move(eventData)));
diff --git a/node_modules/react-native-windows/PropertySheets/Bundle.Common.targets b/node_modules/react-native-windows/PropertySheets/Bundle.Common.targets
index 8170719..1124f9a 100644
--- a/node_modules/react-native-windows/PropertySheets/Bundle.Common.targets
+++ b/node_modules/react-native-windows/PropertySheets/Bundle.Common.targets
@@ -19,9 +19,9 @@
<!-- See https://github.com/facebook/react-native/blob/07d090dbc6c46b8f3760dbd25dbe0540c18cb3f3/react.gradle#L190 for reference -->
<Target Name="CompileHermesBytecode" AfterTargets="MakeBundle" Condition="'$(UseBundle)' == 'true' AND '$(UseHermes)' == 'true'">
<Message Importance="High" Text="Running [$(HermesCompilerCommand) -emit-binary -out $(BundleOutputFile).hbc $(BundleOutputFile) $(HermesCompilerFlags) -output-source-map] to precompile bundle file." />
- <Exec Command='$(HermesCompilerCommand) -emit-binary -out "$(BundleOutputFile).hbc" "$(BundleOutputFile)" $(HermesCompilerFlags) -output-source-map' ConsoleToMSBuild="true" WorkingDirectory="$(BundleCommandWorkingDir)" />
- <Move SourceFiles="$(BundleOutputFile).hbc" DestinationFiles="$(BundleOutputFile)" />
- <Move SourceFiles="$(BundleOutputFile).hbc.map" DestinationFiles="$(HermesSourceMap)" />
+ <Exec Command='$(HermesCompilerCommand) -emit-binary -out "$(BundleOutputFile).hbc" "$(BundleOutputFile)" $(HermesCompilerFlags) -output-source-map' ContinueOnError="true" ConsoleToMSBuild="true" WorkingDirectory="$(BundleCommandWorkingDir)" />
+ <Move SourceFiles="$(BundleOutputFile).hbc" ContinueOnError="true" DestinationFiles="$(BundleOutputFile)" />
+ <Move SourceFiles="$(BundleOutputFile).hbc.map" ContinueOnError="true" DestinationFiles="$(HermesSourceMap)" />
<Exec Command='node "$(ReactNativeDir)\scripts\compose-source-maps.js" "$(PackagerSourceMap)" "$(HermesSourceMap)" -o "$(BundleSourceMap)"' ConsoleToMSBuild="true" WorkingDirectory="$(BundleCommandWorkingDir)" />
</Target>
</Project>
\ No newline at end of file
from react-native-windows.
tero-paananen
commented on June 8, 2024
I did previously issue about this but could not manage to find that anymore. Reason why we need that hack is our project structure - packaging project.
from react-native-windows.
tero-paananen
commented on June 8, 2024
I do not remember fully this now but it was related to somehow managed to copy Hermes compiled binary bundle.
from react-native-windows.
tero-paananen
commented on June 8, 2024
We have somehow NuGet restore issue with packaging project and RNW 0.73.x. I have to call nuget restore from PowerShell to get my project build. Calling Nuget Restore from Visual Studio fails into error that some package.json is missing.
If you use npx react-native run-windows this issue does not exists because run-windows scripts calls NuGet restore.
Here is some kind of packaging project example https://github.com/microsoft/react-native-windows-samples/tree/main/samples/AppServiceDemo I tested about year ago that when enabling Hermes in that example it failed into this same issue and i made issue for that microsoft/react-native-windows-samples#776
from react-native-windows.
WilliamWelsh
commented on June 8, 2024
So how do we move forward with getting this to work in future versions without having to manually patch?
from react-native-windows.
jonthysell
commented on June 8, 2024
Does adding "ContinueOnError" mean you're not actually using hermes bytecode? It sounds like the hermes compiler is complaining about your bundle, so my guess would be it "works" now, but with a regular JS bundle.
from react-native-windows.
tero-paananen
commented on June 8, 2024
Does adding "ContinueOnError" mean you're not actually using hermes bytecode? It sounds like the hermes compiler is complaining about your bundle, so my guess would be it "works" now, but with a regular JS bundle.
Hermes bytecode is in use, see more from here microsoft/react-native-windows-samples#776 (comment)
from react-native-windows.
chrisglein
commented on June 8, 2024
So how do we move forward with getting this to work in future versions without having to manually patch?
As far as this patch: #12708 (comment)
Most of it you could put into a PR to be evaluated. But that part that sets ContinueOnError wouldn't be something we would want to merge to the default template.
If there are JS compilation errors, those will need to be fixed instead of setting ContinueOnError.
from react-native-windows.
chrisglein
commented on June 8, 2024
Closing because workaround exists and this is a nonstandard configuration. For reducing need for patches, we can look at PRs on this. But original issue has been unblocked.
from react-native-windows.
tero-paananen
commented on June 8, 2024
In example package project is Hermes bundle build 2 times like i wrote in the example's issue
Hermes build hermes.exe -emit-binary... is done two times: first with appservicedemo and then with the package appservicedemo.Package when it try to build already builded hermes bundle and fails.
thats why "continue on error" hack is only workaround that i found for this.
from react-native-windows.
Related Issues (20)
- Remove fork in TurboModuleBinding.cpp HOT 1
- Upgrade @react-native non-nightly packages to v0.74.0 HOT 1
- React Native Windows App looks for MainApplication.java file, but my app has MainApplication.kt HOT 6
- Add delegate property to configure React's HttpClient to use a client certificate HOT 2
- Fabric canary app crashes on launch in Release builds HOT 3
- Should Paper/Fabric components share View Managers? HOT 1
- Unable to load bundled asset images using `file://` uri in Fabric
- Convert fabric apps to packaged by default HOT 1
- Can't start a fresh project with version 0.73.8 HOT 3
- Inverted order FlatList with horizontal layout displaying incorrectly on Fabric app HOT 2
- Remove FlatList.windows.js Fork HOT 1
- Fabric TextInput cursor disappears after resize (canary 776) HOT 1
- Fabric TextInput submitKeyEvents don't work consistently (canary 776)
- AutomationChannel's Server should not stop after client disconnects
- [Fabric] Enable rest of LegacyTextInputTest
- [Fabric] OnChangeText will fire twice when first typing in a textInput HOT 1
- Error when including non-UI component projects (async-storage, clipboard) in a Fabric project HOT 2
- Remove the synchronous JS queue call in CompositionRootView::UninitRootView
- I18nManager.localeIdentifier() always returns en-us for unpackaged apps
- An implementation of a batching ui queue for bridgeless need to be implemented
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-windows.