[Webpack5] Other platform code wrongfully included in bundle

Issue Description

When using the FlipTransition class the app fails to compile. Using SlideTransition or FadeTransition causes no issues.

ERROR in ./app/views/main-view.ts 10:0-82
Module not found: Error: Can't resolve '@nativescript/core/ui/transition/flip-transition' in '/Users/someuser/Projects/my-app/app/views'
resolve '@nativescript/core/ui/transition/flip-transition' in '/Users/someuser/Projects/my-app/app/views'
  Parsed request is a module
  using description file: /Users/someuser/Projects/my-app/package.json (relative path: ./app/views)
    resolve as module
      looking for modules in /Users/someuser/Projects/my-app/node_modules
        existing directory /Users/someuser/Projects/my-app/node_modules/@nativescript/core
          using description file: /Users/someuser/Projects/my-app/node_modules/@nativescript/core/package.json (relative path: .)
            using description file: /Users/someuser/Projects/my-app/node_modules/@nativescript/core/package.json (relative path: ./ui/transition/flip-transition)
              no extension
                /Users/someuser/Projects/my-app/node_modules/@nativescript/core/ui/transition/flip-transition doesn't exist
              .ios.ts
                /Users/someuser/Projects/my-app/node_modules/@nativescript/core/ui/transition/flip-transition.ios.ts doesn't exist
              .ts
                /Users/someuser/Projects/my-app/node_modules/@nativescript/core/ui/transition/flip-transition.ts doesn't exist
              .ios.js
                /Users/someuser/Projects/my-app/node_modules/@nativescript/core/ui/transition/flip-transition.ios.js doesn't exist
              .js
                /Users/someuser/Projects/my-app/node_modules/@nativescript/core/ui/transition/flip-transition.js doesn't exist
              .ios.css
                /Users/someuser/Projects/my-app/node_modules/@nativescript/core/ui/transition/flip-transition.ios.css doesn't exist
              .css
                /Users/someuser/Projects/my-app/node_modules/@nativescript/core/ui/transition/flip-transition.css doesn't exist
              .ios.scss
                /Users/someuser/Projects/my-app/node_modules/@nativescript/core/ui/transition/flip-transition.ios.scss doesn't exist
              .scss
                /Users/someuser/Projects/my-app/node_modules/@nativescript/core/ui/transition/flip-transition.scss doesn't exist
              .ios.json
                /Users/someuser/Projects/my-app/node_modules/@nativescript/core/ui/transition/flip-transition.ios.json doesn't exist
              .json
                /Users/someuser/Projects/my-app/node_modules/@nativescript/core/ui/transition/flip-transition.json doesn't exist
              as directory
                /Users/someuser/Projects/my-app/node_modules/@nativescript/core/ui/transition/flip-transition doesn't exist
      /Users/someuser/Projects/my-app/app/views/node_modules doesn't exist or is not a directory
      /Users/someuser/Projects/my-app/app/node_modules doesn't exist or is not a directory

Reproduction

import { FlipTransition } from '@nativescript/core/ui/transition/flip-transition';

let flipTransitionFront = new FlipTransition("right", duration, null);

“@nativescript/core”: “~8.1.5”, “@nativescript/android”: “~8.1.1”, “@nativescript/ios”: “~8.1.0”, “@nativescript/types”: “~8.1.1”, “@nativescript/webpack”: “~5.0.1”, “typescript”: “4.3.5”

Relevant log output (if applicable)

No response

Environment

No response

• I have searched the existing issues as well as StackOverflow and this has not been posted before
• This is a bug report
• I agree to follow this project’s Code of Conduct

[rigor789]

@manijak as a quick test, can you add the following to your webpack config:

// at the top
const { ContextExclusionPlugin } = require('webpack')


// in the config part...
webpack.chainWebpack(config => {
  if(webpack.Utils.platform.getPlatformName() === 'ios') {
    config
      .plugin('ContextExclusionPlugin|.android.ts')
      .use(ContextExclusionPlugin, [new RegExp(`\.android\.ts$`)]);
  }
})

And let me know if that fixes the issue?

[rigor789]

@manijak cool, yeah this confirms to me what the issue is - you can use that until we push a fix in the configs…

The core flavors work by using require.context to include all files in the app in the bundle. The require.context ignores anything in App_Resources etc, but seems like it doesn’t ignore “other” platform specific code. The proper fix will need to be in the base configs - making the “other” platform dynamically ignored.

We can probably export the platforms object, and get the keys, remove current platform, and then generate a regex that excludes all other platform files (not just <platform>.ts): https://github.com/NativeScript/NativeScript/blob/37cc612263b8904f09ba936f597a52c8688a0d5a/packages/webpack5/src/helpers/platform.ts#L18-L23