search

microsoft / rnx-kit

Modern, scalable tools. Exceptional developer experience.
https://microsoft.github.io/rnx-kit/
MIT License
1.53k stars 97 forks source link

build faild: No matching export in for import #2864

Closed YOEL311 closed 11 months ago

YOEL311 commented 11 months ago

What happened?

my metro config.js

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

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig();
  return makeMetroConfig({
    serializer: {
      customSerializer: MetroSerializer(),
    },
    transformer: {
      ...esbuildTransformerConfig,
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: false,
        },
      }),
    },
    resolver: {
      assetExts: assetExts.filter((ext) => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg', 'd.ts'],
    },
  });
})();

my 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'],
      },
    ],
    '@babel/preset-typescript',
  ],
  plugins: [
    [
      '@babel/plugin-transform-react-jsx',
      {
        runtime: 'automatic',
      },
    ],
    [
      'module:react-native-dotenv',
      {
        moduleName: '@env',
        path: '.env',
        blacklist: null,
        whitelist: ['AES_KEY'],
        safe: false,
        allowUndefined: false,
      },
    ],
    [
      'babel-plugin-root-import',
      {
        rootPathPrefix: '~',
        rootPathSuffix: 'src',
      },
    ],
    'react-native-reanimated/plugin',
  ],
};

when i try to build my project i got errors like this

my cmd

npx  react-native bundle --entry-file index.js --platform ios --dev false --verbose --bundle-output index.ios.jsbundle --reset-cache

errors

    ╵                ~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/react-native-svg/src/elements/Svg.tsx" for import "SvgProps"

    node_modules/react-native-svg/src/ReactNativeSVG.ts:10:14:
      10 │ import Svg, { SvgProps } from './elements/Svg';
         ╵               ~~~~~~~~

✘ [ERROR] No matching export in "node_modules/react-native-svg/src/elements/Path.tsx" for import "PathProps"

    node_modules/react-native-svg/src/ReactNativeSVG.ts:11:15:
      11 │ import Path, { PathProps } from './elements/Path';
         ╵                ~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/react-native-svg/src/elements/G.tsx" for import "GProps"

    node_modules/react-native-svg/src/ReactNativeSVG.ts:12:12:
      12 │ import G, { GProps } from './elements/G';
         ╵             ~~~~~~

✘ [ERROR] No matching export in "node_modules/react-native-svg/src/elements/Text.tsx" for import "TextProps"

    node_modules/react-native-svg/src/ReactNativeSVG.ts:13:15:
      13 │ import Text, { TextProps } from './elements/Text';
         ╵                ~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/react-native-svg/src/elements/TSpan.tsx" for import "TSpanProps"

    node_modules/react-native-svg/src/ReactNativeSVG.ts:14:16:
      14 │ import TSpan, { TSpanProps } from './elements/TSpan';
         ╵                 ~~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/react-native-svg/src/elements/TextPath.tsx" for import "TextPathProps"

    node_modules/react-native-svg/src/ReactNativeSVG.ts:15:19:
      15 │ import TextPath, { TextPathProps } from './elements/TextPath';
         ╵                    ~~~~~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/react-native-svg/src/elements/Use.tsx" for import "UseProps"

    node_modules/react-native-svg/src/ReactNativeSVG.ts:16:14:
      16 │ import Use, { UseProps } from './elements/Use';

✘ [ERROR] No matching export in "node_modules/react-native-reanimated/src/reanimated2/animation/spring.ts" for import "SpringAnimation"

    node_modules/react-native-reanimated/src/reanimated2/animation/index.ts:6:21:
      6 │ export { withSpring, SpringAnimation } from './spring';
        ╵                      ~~~~~~~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/react-native-reanimated/src/reanimated2/animation/decay.ts" for import "DecayAnimation"

    node_modules/react-native-reanimated/src/reanimated2/animation/index.ts:7:20:
      7 │ export { withDecay, DecayAnimation } from './decay';
        ╵                     ~~~~~~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/react-native-reanimated/src/reanimated2/hook/useAnimatedStyle.ts" for import "AnimatedStyleResult"

    node_modules/react-native-reanimated/src/reanimated2/hook/index.ts:6:27:
      6 │ export { useAnimatedStyle, AnimatedStyleResult } from './useAnimatedStyle';
        ╵                            ~~~~~~~~~~~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/react-native-reanimated/src/reanimated2/hook/useAnimatedGestureHandler.ts" for import "GestureHandlerEvent"

    node_modules/react-native-reanimated/src/reanimated2/hook/index.ts:7:36:
      7 │ export { useAnimatedGestureHandler, GestureHandlerEvent, GestureHandlers } from './useAnimatedGestureHandler';
        ╵                                     ~~~~~~~~~~~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/react-native-reanimated/src/reanimated2/hook/useAnimatedGestureHandler.ts" for import "GestureHandlers"

    node_modules/react-native-reanimated/src/reanimated2/hook/index.ts:7:57:
      7 │ export { useAnimatedGestureHandler, GestureHandlerEvent, GestureHandlers } from './useAnimatedGestureHandler';
        ╵                                                          ~~~~~~~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/react-native-reanimated/src/reanimated2/hook/useAnimatedReaction.ts" for import "AnimatedReactionWorkletFunction"

    node_modules/react-native-reanimated/src/reanimated2/hook/index.ts:8:30:
      8 │ export { useAnimatedReaction, AnimatedReactionWorkletFunction } from './useAnimatedReaction';
        ╵                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/react-native-reanimated/src/reanimated2/hook/useAnimatedScrollHandler.ts" for import "ScrollHandler"

    node_modules/react-native-reanimated/src/reanimated2/hook/index.ts:10:35:
      10 │ export { useAnimatedScrollHandler, ScrollHandler, ScrollHandlers } from './useAnimatedScrollHandler';
         ╵                                    ~~~~~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/react-native-reanimated/src/reanimated2/hook/useAnimatedScrollHandler.ts" for import "ScrollHandlers"

    node_modules/react-native-reanimated/src/reanimated2/hook/index.ts:10:50:
      10 │ export { useAnimatedScrollHandler, ScrollHandler, ScrollHandlers } from './useAnimatedScrollHandler';
         ╵                                                   ~~~~~~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/react-native-reanimated/src/reanimated2/hook/useDerivedValue.ts" for import "DerivedValue"

    node_modules/react-native-reanimated/src/reanimated2/hook/index.ts:11:26:
      11 │ export { useDerivedValue, DerivedValue } from './useDerivedValue';
         ╵                           ~~~~~~~~~~~~

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

    node_modules/react-native-reanimated/src/reanimated2/layoutReanimation/animationBuilder/index.ts:6:9:
      6 │ export { LayoutAnimation, AnimationFunction, EntryAnimationsValues, ExitAnimationsValues, EntryExitAnimationFu...
        ╵          ~~~~~~~~~~~~~~~

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

    node_modules/react-native-reanimated/src/reanimated2/layoutReanimation/animationBuilder/index.ts:6:26:
      6 │ export { LayoutAnimation, AnimationFunction, EntryAnimationsValues, ExitAnimationsValues, EntryExitAnimationFu...
        ╵                           ~~~~~~~~~~~~~~~~~

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

    node_modules/react-native-reanimated/src/reanimated2/layoutReanimation/animationBuilder/index.ts:6:45:
      6 │ export { LayoutAnimation, AnimationFunction, EntryAnimationsValues, ExitAnimationsValues, EntryExitAnimationFu...
        ╵                                              ~~~~~~~~~~~~~~~~~~~~~

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

    node_modules/react-native-reanimated/src/reanimated2/layoutReanimation/animationBuilder/index.ts:6:68:
      6 │ ..., AnimationFunction, EntryAnimationsValues, ExitAnimationsValues, EntryExitAnimationFunction, AnimationConf...
        ╵                                                ~~~~~~~~~~~~~~~~~~~~

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

    node_modules/react-native-reanimated/src/reanimated2/layoutReanimation/animationBuilder/index.ts:6:90:
      6 │ ...yAnimationsValues, ExitAnimationsValues, EntryExitAnimationFunction, AnimationConfigFunction, IEntryAnimati...
        ╵                                             ~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [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 │ ...ationsValues, EntryExitAnimationFunction, AnimationConfigFunction, IEntryAnimationBuilder, IExitAnimationBu...
        ╵                                              ~~~~~~~~~~~~~~~~~~~~~~~

✘ [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 │ ...nimationFunction, AnimationConfigFunction, IEntryAnimationBuilder, IExitAnimationBuilder, LayoutAnimationsV...
        ╵                                               ~~~~~~~~~~~~~~~~~~~~~~

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

    node_modules/react-native-reanimated/src/reanimated2/layoutReanimation/animationBuilder/index.ts:6:167:
      6 │ ...ionConfigFunction, IEntryAnimationBuilder, IExitAnimationBuilder, LayoutAnimationsValues, LayoutAnimationFu...
        ╵                                               ~~~~~~~~~~~~~~~~~~~~~

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

    node_modules/react-native-reanimated/src/reanimated2/layoutReanimation/animationBuilder/index.ts:6:190:
      6 │ ...ryAnimationBuilder, IExitAnimationBuilder, LayoutAnimationsValues, LayoutAnimationFunction, ILayoutAnimatio...
        ╵                                      
         ╵           

                                      ~~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/react-native-blob-util/utils/uri.js" for import "URIUtil"

    node_modules/react-native-blob-util/index.js:33:9:
      33 │ export { URIUtil } from './utils/uri';
         ╵          ~~~~~~~

✘ [ERROR] No matching export in "node_modules/react-native-blob-util/utils/uuid.js" for import "getUUID"

    node_modules/react-native-blob-util/index.js:35:9:
      35 │ export { getUUID } from './utils/uuid';

Affected Package

@rnx-kit/metro-serializer-esbuild

Version

"0.1.33",

Which platforms are you seeing this issue on?

System Information

System:
    OS: macOS 13.4.1
    CPU: (10) arm64 Apple M2 Pro
    Memory: 120.98 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.16.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.5.1 - /usr/local/bin/npm
    Watchman: 2023.09.25.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.12.1 - /opt/homebrew/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
    Android SDK:
      API Levels: 23, 26, 28, 29, 30, 31, 33, 34
      Build Tools: 30.0.2, 30.0.3, 33.0.0, 34.0.0
      System Images: android-34 | Google APIs ARM 64 v8a
      Android NDK: 22.1.7171670
  IDEs:
    Android Studio: 2022.2 AI-222.4459.24.2221.10121639
    Xcode: 14.2/14C18 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.19 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.1.0 => 18.1.0 
    react-native: 0.70.9 => 0.70.9 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to Reproduce

build react native app with above config

Code of Conduct

tido64 commented 11 months ago

Hi, which version of react-native-svg are you using? This should be fixed in 13.3.0: https://github.com/software-mansion/react-native-svg/commit/f7343013be2b0583afb20fa60e3ee1ade967e810

YOEL311 commented 11 months ago

this my dependencies

 "dependencies": {
    "@formatjs/intl-getcanonicallocales": "2.0.5",
    "@formatjs/intl-locale": "3.0.11",
    "@formatjs/intl-numberformat": "8.3.3",
    "@formatjs/intl-pluralrules": "5.1.8",
    "@react-native-async-storage/async-storage": "1.17.11",
    "@react-native-clipboard/clipboard": "1.9.0",
    "@react-native-community/blur": "4.0.0",
    "@react-native-community/cameraroll": "4.1.2",
    "@react-native-community/datetimepicker": "3.4.3",
    "@react-native-cookies/cookies": "6.2.1",
    "@react-native-firebase/analytics": "11.4.1",
    "@react-native-firebase/app": "11.4.1",
    "@react-native-firebase/remote-config": "11.4.1",
    "@react-navigation/bottom-tabs": "6.5.3",
    "@react-navigation/material-top-tabs": "6.6.2",
    "@react-navigation/native": "6.1.2",
    "@react-navigation/stack": "6.3.11",
    "@shopify/flash-list": "1.4.3",
    "axios": "0.21.1",
    "core-js": "3.6.5",
    "crypto-js": "4.0.0",
    "d3-path": "2.0.0",
    "d3-scale": "3.2.3",
    "d3-shape": "2.0.0",
    "dayjs": "1.11.6",
    "deprecated-react-native-prop-types": "2.3.0",
    "eventemitter3": "4.0.7",
    "fbjs": "3.0.4",
    "formik": "2.2.5",
    "i18next": "22.4.5",
    "immer": "9.0.1",
    "intl-pluralrules": "1.3.1",
    "lodash": "4.17.20",
    "lottie-ios": "3.4.0",
    "lottie-react-native": "5.1.4",
    "qs": "6.9.4",
    "react": "18.1.0",
    "react-content-loader": "6.1.0",
    "react-i18next": "11.15.3",
    "react-native": "0.70.9",
    "react-native-a11y": "0.4.2",
    "react-native-appsflyer": "6.4.0",
    "react-native-autoheight-webview": "1.6.5",
    "react-native-base64": "0.2.1",
    "react-native-blob-util": "0.14.0",
    "react-native-code-push": "8.0.2",
    "react-native-date-picker": "4.2.9",
    "react-native-document-picker": "8.1.2",
    "react-native-dotenv": "3.2.0",
    "react-native-fs": "2.18.0",
    "react-native-gesture-handler": "2.9.0",
    "react-native-get-random-values": "1.7.1",
    "react-native-image-picker": "4.10.0",
    "react-native-image-resizer": "1.4.5",
    "react-native-keyboard-controller": "1.5.8",
    "react-native-linear-gradient": "2.8.3",
    "react-native-mask-text": "0.13.1",
    "react-native-pager-view": "6.2.0",
    "react-native-pdf": "6.7.1",
    "react-native-reanimated": "2.14.4",
    "react-native-redash": "18.1.0",
    "react-native-safe-area-context": "3.4.1",
    "react-native-screens": "3.20.0",
    "react-native-share": "7.9.1",
    "react-native-sqlite-storage": "6.0.1",
    "react-native-svg": "12.4.4",
    "react-native-tab-view": "3.5.1",
    "react-native-uuid": "2.0.1",
    "react-native-vector-icons": "9.2.0",
    "react-native-view-shot": "3.5.0",
    "react-native-walkme-sdk": "2.2.5",
    "react-native-webview": "11.17.1",
    "react-query": "3.39.2",
    "react-redux": "7.2.6",
    "redux": "4.0.5",
    "redux-thunk": "2.3.0",
    "reselect": "4.0.0",
    "tough-cookie": "4.1.2",
    "utf8": "3.0.0",
    "yup": "0.32.8",
    "zustand": "4.1.1"
  },
  "devDependencies": {
    "@babel/core": "7.16.7",
    "@babel/helper-get-function-arity": "^7.16.7",
    "@babel/plugin-transform-react-jsx": "7.12.17",
    "@babel/preset-env": "7.16.0",
    "@babel/preset-typescript": "7.12.7",
    "@babel/runtime": "7.8.4",
    "@react-native-community/eslint-config": "1.1.0",
    "@react-navigation/devtools": "^6.0.15",
    "@testing-library/react-native": "7.0.2",
    "@types/crypto-js": "4.0.1",
    "@types/d3-scale": "3.2.2",
    "@types/d3-shape": "2.0.0",
    "@types/jest": "26.0.20",
    "@types/lodash": "4.14.162",
    "@types/mocha": "8.2.0",
    "@types/node": "18.11.9",
    "@types/qs": "6.9.5",
    "@types/react": "18.0.2",
    "@types/react-native": "0.70.9",
    "@types/react-native-base64": "0.1.0",
    "@types/react-native-share": "3.3.0",
    "@types/react-native-sqlite-storage": "5.0.0",
    "@types/redux-mock-store": "1.0.2",
    "@types/tough-cookie": "^4.0.2",
    "@types/utf8": "3.0.0",
    "@typescript-eslint/eslint-plugin": "4.33.0",
    "@typescript-eslint/parser": "4.33.0",
    "babel-jest": "25.1.0",
    "babel-plugin-dotenv-import": "2.2.0",
    "babel-plugin-root-import": "6.5.0",
    "eslint": "^7.16.0",
    "eslint-import-resolver-custom-alias": "1.2.0",
    "eslint-plugin-import": "2.28.1",
    "eslint-plugin-justinanastos": "1.3.1",
    "eslint-plugin-prettier": "3.1.4",
    "eslint-plugin-react": "7.20.6",
    "eslint-plugin-react-hooks": "4.1.2",
    "eslint-plugin-react-native-a11y": "3.3.0",
    "eslint-plugin-reanimated": "2.0.0",
    "eslint-plugin-simple-import-sort": "^10.0.0",
    "husky": "4.3.0",
    "jest": "26.6.3",
    "lint-staged": "10.3.0",
    "metro-react-native-babel-preset": "0.72.3",
    "patch-package": "6.2.2",
    "postinstall": "0.7.0",
    "prettier": "2.7.1",
    "promise-polyfill": "8.2.1",
    "react-native-codegen": "0.0.7",
    "react-native-flipper": "0.163.0",
    "react-native-flipper-performance-plugin": "0.4.0",
    "react-native-svg-transformer": "0.14.3",
    "react-query-native-devtools": "4.0.0",
    "react-test-renderer": "18.1.0",
    "redux-devtools-extension": "2.13.8",
    "redux-flipper": "2.0.2",
    "redux-mock-store": "1.5.4",
    "run-when-changed": "^2.1.0",
    "ts-jest": "26.5.0",
    "ts-prune": "0.10.3",
    "ts-unused-exports": "7.0.1",
    "typescript": "4.9.4"
  },
YOEL311 commented 11 months ago

Hey @tido64 Thanks for your response i need to upgrade the version of react-native-svg , react-native-reanimated, but what about the react-native-blob-util?

✘ [ERROR] No matching export in "node_modules/react-native-blob-util/utils/uri.js" for import "URIUtil"

    node_modules/react-native-blob-util/index.js:33:9:
      33 │ export { URIUtil } from './utils/uri';
         ╵          ~~~~~~~

✘ [ERROR] No matching export in "node_modules/react-native-blob-util/utils/uuid.js" for import "getUUID"

    node_modules/react-native-blob-util/index.js:35:9:
      35 │ export { getUUID } from './utils/uuid';
         ╵          ~~~~~~~
tido64 commented 11 months ago

I don't know which version of react-native-blob-util you're using, but there is no URIUtil in ./utils/uri: https://github.com/RonRadtke/react-native-blob-util/blob/master/utils/uri.js

As for getUUID, it is defined but default exported: https://github.com/RonRadtke/react-native-blob-util/blob/master/utils/uuid.js

That line should instead read:

export getUUID from './utils/uuid';

Or simply not default exported. In any case, both are real errors that should be filed and fixed upstream.

YOEL311 commented 11 months ago

OK @tido64 Before adding your library, my bundle size was 30. It is now 25. Can I further reduce my bundle size? Maybe a different configuration will reduce more?

tido64 commented 11 months ago

If you're confident you can investigate resolution issues, you can try adding module to resolverMainFields in your metro.config.js. That will tell Metro to always pick ESM and potentially help esbuild tree shake more. Otherwise, try enabling the metafile option in the plugin. This will produce a JSON file you can upload to esbuild's Bundle Size Analyzer.