NativeScript / NativeScript/nativescript-cli

Upgrade app from NS7 to NS8 getting a ton of errors from web pack

Open
#5,539 14 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
1.1k
Forks
204
Avg merge
1d 9h
Merged PRs (30d)
8

Description

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with webpack.config.js and reproduce the NS7-to-NS8 build using the reported dependencies and app.js path. Review the listed memfs, image-loader, and app.js resolution failures; done means the migration builds without the reported webpack errors.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, webpack
Domain
build-system, cli, mobile-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
18/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.