nativescript-cli
nativescript-cli copied to clipboard
NativeScript
Upgrade app from NS7 to NS8 getting a ton of errors from web pack
Mac OS Catalina 10.15.7 NS 8.0.3 Xcode 12.4
Plugins
Dependencies:
@nativescript/core ~8.0.0 @proplugins/nativescript-drop-down ^9.0.2 nativescript-intl ^4.0.2 │ nativescript-iqkeyboardmanager 1.5.1 nativescript-ui-dataform 5.0.0 nativescript-ui-listview 7.0.0
Dev Dependencies:
@nativescript/ios 8.0.0 @nativescript/webpack ~5.0.0-beta.0
NS Doctor
No issues were detected. ✔ Your ANDROID_HOME environment variable is set and points to correct directory. ✔ Your adb from the Android SDK is correctly installed. ✔ The Android SDK is installed. ✔ A compatible Android SDK for compilation is found. ✔ Javac is installed and is configured properly. ✔ The Java Development Kit (JDK) is installed and is configured properly. ✔ Xcode is installed and is configured properly. ✔ xcodeproj is installed and is configured properly. ✔ CocoaPods are installed. ✔ CocoaPods update is not required. ✔ CocoaPods are configured properly. ✔ Your current CocoaPods version is newer than 1.0.0. ✔ Python installed and configured correctly. ✔ The Python 'six' package is found. ✔ Xcode version 12.4.0 satisfies minimum required version 10. ✔ Getting NativeScript components versions information... ✔ Component nativescript has 8.0.2 version and is up to date. ✔ Component @nativescript/core has 8.0.7 version and is up to date. ✔ Component @nativescript/ios has 8.0.0 version and is up to date. ✖ Component @nativescript/android is not installed.
Upgrade an app from NS7 to NS8 and ran in to a ton of problems.
webpack 5.38.1 compiled with 1355 errors and 754 warnings in 137099 ms Webpack compilation complete. Watching for file changes. Updating runtime package.json with configuration values...
Errors such as
WARNING in ./node_modules/memfs/lib/process.js 20:15-33 Module not found: Error: Can't resolve 'process' in '/Users/nick/Documents/NativeScript/Projects/WFSL/node_modules/memfs/lib' Did you mean './process'? Requests that should resolve in the current directory need to start with './'. Requests that start with a name are treated as module requests and resolve within module directories (/Users/nick/Documents/NativeScript/Projects/WFSL/node_modules, node_modules). If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "process": require.resolve("process/browser") }' - install 'process' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "process": false } @ .// sync .(xml|js|s?css)$ memfs/lib/process.js memfs/lib/process.js @ ./@nativescript_webpack_virtual_entry_javascript 3:16-89
WARNING in ./node_modules/memfs/lib/volume.js 282:34-52 Module not found: Error: Can't resolve 'url' in '/Users/nick/Documents/NativeScript/Projects/WFSL/node_modules/memfs/lib'
ERROR in ./platforms/ios/build/Debug-iphonesimulator/WFSL.app/app/app/images/wfsl-logo.jpg 1:0 Module parse failed: Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders (Source code omitted for this binary file) @ ./platforms/ios/build/Debug-iphonesimulator/WFSL.app/app/ sync ^./.*$ ./app/images/wfsl-logo.jpg @ ./platforms/ios/build/Debug-iphonesimulator/WFSL.app/app/runtime.js 553:27-73 562:25-72 1019:20-62 @ .// sync .(xml|js|s?css)$ ./platforms/ios/build/Debug-iphonesimulator/WFSL.app/app/runtime.js @ ./@nativescript_webpack_virtual_entry_javascript 3:16-89
ERROR in ./platforms/ios/WFSL/app/platforms/ios/build/Debug-iphonesimulator/WFSL.app/app/node_modules/highlight.js/styles/pojoaque.jpg 1:0 Module parse failed: Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders (Source code omitted for this binary file) @ ./platforms/ios/WFSL/app/ sync ^./.*$ ./platforms/ios/build/Debug-iphonesimulator/WFSL.app/app/node_modules/highlight.js/styles/pojoaque.jpg @ ./platforms/ios/WFSL/app/runtime.js 553:27-73 562:25-72 1019:20-62 @ .// sync .(xml|js|s?css)$ ./platforms/ios/WFSL/app/runtime.js @ ./@nativescript_webpack_virtual_entry_javascript 3:16-89
ERROR in bundle Module not found: Error: Can't resolve '/Users/nick/Documents/NativeScript/Projects/WFSL/app.js' in '/Users/nick/Documents/NativeScript/Projects/WFSL'
The above file is in the WFSL/app folder not under WFSL as indicated above why is this now an issue.
Cannot find any details regarding loaders for png or jpg files for Webpack.
I've done ns clean
webpack.config.js file is
` const webpack = require("@nativescript/webpack");
module.exports = (env) => {
webpack.init(env);
// Learn how to customize:
// https://docs.nativescript.org/webpack
return webpack.resolveConfig();
}; `
Why is upgrading NS version so problematic. NS5 to NS6 I had issues. NS6 to NS7 I had issues and now NS7 to NS8. There never appears to be a clean migration.
Updated my webpack.config.js to
const webpack = require("@nativescript/webpack");
module.exports = (env) => { webpack.init(env); // Learn how to customize: // https://docs.nativescript.org/webpack resolve: { fallback: { util: require.resolve("util/") assert: false browserify: false } } return webpack.resolveConfig(); };
errors gone but now get
webpack is watching the files...
<--- Last few GCs --->
[45885:0x1046a0000] 177013 ms: Mark-sweep (reduce) 4029.0 (4099.8) -> 4028.7 (4103.8) MB, 953.5 / 0.0 ms (average mu = 0.258, current mu = 0.066) allocation failure scavenge might not succeed [45885:0x1046a0000] 178002 ms: Mark-sweep (reduce) 4029.6 (4103.3) -> 4029.5 (4104.1) MB, 986.6 / 0.0 ms (average mu = 0.148, current mu = 0.003) allocation failure scavenge might not succeed
<--- JS stacktrace --->
FATAL ERROR: MarkCompactCollector: young object promotion failed Allocation failed - JavaScript heap out of memory
1: 0x1012d78f5 node::Abort() (.cold.1) [/usr/local/bin/node]
2: 0x1000a5869 node::Abort() [/usr/local/bin/node]
3: 0x1000a59cf node::OnFatalError(char const*, char const*) [/usr/local/bin/node]
4: 0x1001e7377 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
5: 0x1001e7313 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
6: 0x100394205 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/usr/local/bin/node]
7: 0x1003f0163 v8::internal::EvacuateNewSpaceVisitor::Visit(v8::internal::HeapObject, int) [/usr/local/bin/node]
8: 0x1003d79cb void v8::internal::LiveObjectVisitor::VisitBlackObjectsNoFail<v8::internal::EvacuateNewSpaceVisitor, v8::internal::MajorNonAtomicMarkingState>(v8::internal::MemoryChunk*, v8::internal::MajorNonAtomicMarkingState*, v8::internal::EvacuateNewSpaceVisitor*, v8::internal::LiveObjectVisitor::IterationMode) [/usr/local/bin/node]
9: 0x1003d7515 v8::internal::FullEvacuator::RawEvacuatePage(v8::internal::MemoryChunk*, long*) [/usr/local/bin/node]
10: 0x1003d7256 v8::internal::Evacuator::EvacuatePage(v8::internal::MemoryChunk*) [/usr/local/bin/node]
11: 0x1003f4b8e v8::internal::PageEvacuationTask::RunInParallel(v8::internal::ItemParallelJob::Task::Runner) [/usr/local/bin/node]
12: 0x1003aec02 v8::internal::ItemParallelJob::Task::RunInternal() [/usr/local/bin/node]
13: 0x1003af088 v8::internal::ItemParallelJob::Run() [/usr/local/bin/node]
14: 0x1003d92c5 void v8::internal::MarkCompactCollectorBase::CreateAndExecuteEvacuationTasks<v8::internal::FullEvacuator, v8::internal::MarkCompactCollector>(v8::internal::MarkCompactCollector*, v8::internal::ItemParallelJob*, v8::internal::MigrationObserver*, long) [/usr/local/bin/node]
15: 0x1003d8ec6 v8::internal::MarkCompactCollector::EvacuatePagesInParallel() [/usr/local/bin/node]
16: 0x1003c46f7 v8::internal::MarkCompactCollector::Evacuate() [/usr/local/bin/node]
17: 0x1003c1f8b v8::internal::MarkCompactCollector::CollectGarbage() [/usr/local/bin/node]
18: 0x1003948cb v8::internal::Heap::MarkCompact() [/usr/local/bin/node]
19: 0x100390eb9 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/usr/local/bin/node]
20: 0x10038ed00 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/local/bin/node]
21: 0x10039d3ea v8::internal::Heap::AllocateRawWithLightRetrySlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/usr/local/bin/node]
22: 0x10039d471 v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/usr/local/bin/node]
23: 0x1003668fe v8::internal::FactoryBasev8::internal::Factory::NewRawTwoByteString(int, v8::internal::AllocationType) [/usr/local/bin/node]
24: 0x10077dd8d v8::internal::IncrementalStringBuilder::Extend() [/usr/local/bin/node]
25: 0x1004ad2ad v8::internal::JsonStringifier::SerializeString(v8::internal::Handlev8::internal::String) [/usr/local/bin/node]
26: 0x1004aecdd v8::internal::JsonStringifier::Result v8::internal::JsonStringifier::Serialize_
Hi, any help appreciated, up against it now to get my app up and running.
Have tried export NODE_OPTIONS=--max-old-space-size=8192 but didn't make any difference, error is the same.
The first issue is that webpack removed the default polyfills - we are looking at configuring them out of the box to make things simpler, but until then you need to provide the polyfills yoursel.
The second issue is hard to tell without a test project that shows the issue - could be related to the way you set up the polyfills/fallback stuff - the example config you've shown above looks incomplete/invalid js.
This is all very confusing to me. Although I use Nativescript I am a basic user and these constant changes completely disrupt my development process. Can you please advise what I need to do to the web.config.js file to make it work and where the fallback stuff is wrong. I cannot find any examples on the web. I was proud of myself making Nativescript work on my Mac and compiling both iOS and Android apps natively without CircleCi. Most apps are for enterprise, now it’s broken again after the latest update. My apps run on iOS and Android so presume I do not need the polyfills. Don’t really understand what they are and why they were removed. Getting errors from jpg and png files seems such a basic error that just shouldn’t happen.
I understand the frustration, the polyfill stuff is not something we changed however and is just as annoying for us.
Polyfills are just regular javascript modules that implement missing features - stuff like the Buffer object or the utils module etc. Webpack used to automatically include these, and they removed that in webpack5.
I'm not able to advise what to change without a project I can run/test - if you want to send your actual project, you can do so in private by zipping it up (after running ns clean to make the zip file smaller) and sending it to [email protected] referencing this issue.
Thanks @rigor789 I will get the project to you ASAP. I will send a basic app for the purposes of seeing what's wrong. I have 3 other apps that are also broken, but hopefully any updates to the basic app will give me enough to go one to fix the others.
@mrwrighty could you solve you problems from the upgrade? I did a small series on upgrading NS versions recently: https://www.mynethome.de/2021/06/10/upgrade-to-nativescript-8/
I was able together the project to compile. My main issue now is I cannot get images to display. I have downloaded the login example from NativeScript marketplace and this copies the images to the assets output, but I cannot see where this is coded. I have tried various options in my webpack.config.js and still cannot get images to copy out to the assets output folder. This is currently my webpack.config.js file
` const webpack = require('@nativescript/webpack')
module.exports = (env) => { webpack.init(env); // // output: { // assetModuleFilename: "images/[hash][ext][query]", // }
// module:{
// rules:[
// {
// test: /\.(jpg|JPG|jpeg|png|gif|mp3|svg|ttf|woff2|woff|eot)$/gi,
// use: {
// loader: "file-loader",
// options: {
// name: "[name].[hash].[ext]",
// outputPath: "assets/imgs"
// }
// }
// },
// ]
// }
return webpack.resolveConfig();
}; `
You can see what I have tried but does not work. Really struggling with this.
@mrwrighty hav you seen this documentation on the webpack config and the copy rule in particular? https://docs.nativescript.org/webpack.html#examples-of-configurations
Yes I have. I have been able to fix the image issue but I have no idea why. I downloaded an example from Nativescript Marketplace
https://play.nativescript.org/?template=play-tsc&id=uQmH4X&v=1
This project included some images so did a test build and it worked. I then migrated the project to NS8, updated the package.json file and left the default basic webpack.config.json file.
I then replaced the app folder with my project contents, recompiled and my images are now showing in my app for both Android and iso
Was appPath set correctly in your nativescript.config.ts? That could throw things off, since that's what the "context" is for copies - ie. the base path it copies relative from.
I don’t think the app would compile or run if that was the case although I might be mistaken. It was certainly an issue during my testing, but pretty sure didn’t cause the missing images. Will check tomorrow when back in the office.
Hi @mrwrighty Did you ever solve this issue? I'm currently in the same predicament and one of my dependencies have quite a few polyfills, sadly. If you have any tips or tricks they're very welcome.
Guys, any updates on this? I also have to use the polyfills, but then everything crashes :/
