microsoft/rnx-kit

Export errors on using rnx-kit

AnimeshBhargava opened this issue · 8 comments

AnimeshBhargava commented

What happened?

In our iOS app we use Metro as default for bundling our js code. Our current bundle is 7.3mb in size and we are looking at optimising bundle size. One thing we wanted to try was tree shaking which isn't available with Metro. So we are trying it with https://github.com/microsoft/rnx-kit/tree/main/packages/metro-serializer-esbuild. I did suggested changes to metro.config and babel.config as following but running into issues as attached in screenshot.

Metro.config.js
const { makeMetroConfig } = require('@rnx-kit/metro-config');
const { MetroSerializer, esbuildTransformerConfig } = require('@rnx-kit/metro-serializer-esbuild');

module.exports = makeMetroConfig({
serializer: {
customSerializer: MetroSerializer(),
},
transformer: esbuildTransformerConfig,
});

babel.config.js
const env = process.env.BABEL_ENV || process.env.NODE_ENV;
module.exports = {
presets: [
[
'module:metro-react-native-babel-preset',
{
disableImportExportTransform: env === 'production' && process.env['RNX_METRO_SERIALIZER_ESBUILD'],
},
],
],
plugins: ['react-native-reanimated/plugin'],
};

Affected Package

@rnx-kit/metro-config

Version

1.3.7

Which platforms are you seeing this issue on?

  • Android
  • iOS
  • macOS
  • Windows

System Information

System:
    OS: macOS 13.4.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 312.67 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.15.0/bin/yarn
    npm: 9.5.0 - ~/.nvm/versions/node/v18.15.0/bin/npm
    Watchman: 2023.07.10.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: Not Found
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
    Android SDK: Not Found
  IDEs:
    Android Studio: 2021.3 AI-213.7172.25.2113.9014738
    Xcode: 14.2/14C18 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.16.1 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0 
    react-native: 0.71.6 => 0.71.6 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to Reproduce

Make the suggested changes in babel.config.js and metro.config.js with a react native app.

Code of Conduct

  • I agree to follow this project's Code of Conduct
tido64 commented

Hi @AnimeshBhargava,

This is occurring because you're trying to import a type. When tsc transpiles your .ts into .js, types are stripped out. For example (playground):

export type MyType = { field: boolean; };

Is transpiled to:

export {};

I am guessing that in your consuming code, if you have something like:

import { MyType } from "./commonTypes"

Which is causing esbuild to complain because the transpiled commonTypes.js is mostly empty. You need to fix your code by using import type instead:

import type { MyType } from "./commonTypes"

If you're using ESLint, adding this rule will help you fix all the issues: https://typescript-eslint.io/rules/consistent-type-imports

AnimeshBhargava commented

@tido64 I am still seeing the issue after making above suggested change.
Something to note that 'import { MyType } from "./abc' was present at multiple places which lint fixed but the errors are specific only to react-native-reanimated library which we import. It is mentioned in plugin too in babel.config.js
✘ [ERROR] No matching export in "node_modules/react-native-reanimated/src/reanimated2/layoutReanimation/animationBuilder/commonTypes.ts" for import "AnimationConfigFunction"

node_modules/react-native-reanimated/src/reanimated2/layoutReanimation/animationBuilder/index.ts:6:118:
  6 │ ...itAnimationFunction, AnimationConfigFunction, IEntryAnimationBui...
    ╵                         ~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/react-native-reanimated/src/reanimated2/layoutReanimation/animationBuilder/commonTypes.ts" for import "IEntryAnimationBuilder"

node_modules/react-native-reanimated/src/reanimated2/layoutReanimation/animationBuilder/index.ts:6:143:
  6 │ ...ationConfigFunction, IEntryAnimationBuilder, IExitAnimationBuild...
AnimeshBhargava commented

2.14.4

tido64 commented

Looks like the import type fix is only in 2.14.0. It got reverted somehow in 2.24.1. The 3.x series all have the fix, so it's probably accidental.

Update: It looks like the published 2.14.0 is also missing the fix:

react-native-reanimated 2.14.0

So it looks like the next suggestion is to use https://www.npmjs.com/package/patch-package and patch it locally.

AnimeshBhargava commented

As per suggestion from @tido64 the change wasn't published. So made the patch to fix it locally and it worked.

kelset commented

@AnimeshBhargava I think it might be ideal to submit an issue to the reanimated repo to let them know about this accidental regression so that they can publish a new version that re-adds that in and remove the need for you to have a local patch

  • 👍1