Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Webpack 5 - platform and screen-size qualifier not usable at the same time anymore #9706

Closed
@felixkrautschuk

Description

@felixkrautschuk

Issue Description

In one of our app we need different layouts for Android phones and tablets and iOS phone and tablets for some parts of the UI, so we have something like this:

  • template.android.xml
  • template.android.minWH600.xml
  • template.ios.xml
  • template.ios.minWH600.xml

While this was working as expected with @nativescript/core 8.1.5 and @nativescript/webpack 4.1.0, it is not correctly working anymore after upgrading to @nativescript/webpack 5.0.0.

When building the project for Android or iOS, I see the following warning:

WARNING in ./app/ sync .(xml|js|s?css)$ ./snippets/test1.minWH600.xml
Module not found: Error: Can't resolve './snippets/test1.minWH600.xml' in '/Users/felixk/Projects/ns-8-wp-5-test/app'
@ ./app/@nativescript_webpack_virtual_entry_javascript 3:16-89

The result:

  • Android phone shows the correct layout
  • Android tablet shows the correct layout
  • iPhone shows the correct layout
  • iPad shows the layout of Android tablet ??

I tried swapping the qualifiers to the following: template.android.minWH600.xml -> template.minWH600.android.xml
The result is the same, except that I do not see the warning (provided above) during the build anymore.


In another situation, we need to show a special layout only for iPads, so we have something like this:

  • template.xml -> for Android phones & tablets + iPhone
  • template.minWH600.ios.xml -> iPad

The result:

  • Android phone shows the correct layout
  • Android tablet shows the layout of iPad
  • iPhone shows the correct layout
  • iPad shows the correct layout

Reproduction

Sample app to reproduce:
ns-8-wp-5-test.zip

Relevant log output (if applicable)

No response

Environment

Command does not work for some reaon, so here is the content of package.json:

{
  "name": "ns-8-wp-5-test",
  "main": "app/app.js",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@nativescript/core": "^8.1.5"
  },
  "devDependencies": {
    "@nativescript/android": "8.1.1",
    "@nativescript/ios": "8.1.0",
    "@nativescript/webpack": "~5.0.0"
  }
}

And the default webpack.config.json:

const webpack = require("@nativescript/webpack");

module.exports = (env) => {
	webpack.init(env);

	// Learn how to customize:
	// https://docs.nativescript.org/webpack

	return webpack.resolveConfig();
};

Ia am working with latest NativeScript CLI 8.1.5.

Please accept these terms

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions