Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Webpack5] Other platform code wrongfully included in bundle #9682

Closed
3 tasks done
manijak opened this issue Nov 24, 2021 · 5 comments · Fixed by #9686
Closed
3 tasks done

[Webpack5] Other platform code wrongfully included in bundle #9682

manijak opened this issue Nov 24, 2021 · 5 comments · Fixed by #9686
Labels
bug webpack

Comments

@manijak
Copy link

@manijak manijak commented Nov 24, 2021

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
@manijak manijak added the bug-pending-triage label Nov 24, 2021
@Archez
Copy link
Contributor

@Archez Archez commented Nov 29, 2021

There is no flip transition implementation for iOS as it is built into the iOS ViewController. If you import it into a common file or a .ios.(js|ts) file, webpack will fail to resolve the module. This means if you want to use the flip transition directly in your code, you can only import the flip transition from a .android.(js|ts) file.

NativeScript core code only uses the flip transition internally for the NavigationEntry transition when switching views on android.

@manijak
Copy link
Author

@manijak manijak commented Nov 29, 2021 •
edited

I understand, the above was just an example. In my case this fails even if the code is located in the view-flipper.android.ts file. The strange part is that I am running a iOS build, but it still fails here for some reason. The code worked fine prior to NS v8.x

@rigor789
Copy link
Member

@rigor789 rigor789 commented Nov 29, 2021

@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?

@manijak
Copy link
Author

@manijak manijak commented Nov 29, 2021

It sure did. Thanks! So this basically ignores the android parts of a "plugin" while building for iOS platform?

@rigor789
Copy link
Member

@rigor789 rigor789 commented Nov 29, 2021

@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 .ts):

NativeScript/packages/webpack5/src/helpers/platform.ts

Lines 18 to 23 in 37cc612

const platforms: {
[name: string]: INativeScriptPlatform;
} = {
android: AndroidPlatform,
ios: iOSPlatform,
};

@rigor789 rigor789 added bug webpack and removed bug-pending-triage labels Nov 30, 2021
rigor789 added a commit that referenced this issue Nov 30, 2021
@rigor789
fix(webpack): exclude other platforms from require.context
d2a28f4 
fixes #9682
@rigor789 rigor789 mentioned this issue Nov 30, 2021
Merged
5 tasks
@rigor789 rigor789 changed the title Usage of FlipTransition causes compilation error Other platform code inclu Nov 30, 2021
@rigor789 rigor789 changed the title Other platform code inclu [Webpack5] Other platform code wrongfully included in bundle Nov 30, 2021
rigor789 added a commit that referenced this issue Feb 18, 2022
@rigor789
fix(webpack): exclude other platforms from require.context (#9686)
cb7bd2a 
fixes #9682
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug webpack
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(webpack): exclude other platforms from require.context NativeScript/NativeScript
3 participants
@rigor789 @manijak @Archez