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.

Bắt đầu với webpack.config.js và tái hiện bản build NS7-to-NS8 bằng các dependency đã nêu cùng đường dẫn app.js. Xem xét các lỗi phân giải được liệt kê đối với memfs, image-loader và app.js; công việc được xem là hoàn tất khi migration build thành công mà không có các lỗi webpack đã nêu.