ignite icon indicating copy to clipboard operation
ignite copied to clipboard

esbuild: Moving to @rnx-kit/metro-serializer-esbuild

Open jamonholmgren opened this issue 1 year ago • 2 comments

This is an experimental PR, demoing Ignite using @rnx-kit/metro-serializer-esbuild.

Main benefits:

  • Tree shaking (smaller JS bundles)
  • Faster compilation (maybe?)

More info is here: https://github.com/microsoft/rnx-kit/issues/1743

This is not ready to merge, as we need to test out the changes recommended by @tido64 and @afoxman in that thread, and also figure out if this will work with the Expo/Vanilla unification efforts (#1983). Also make sure it works on Expo web.

jamonholmgren avatar Jul 22 '22 18:07 jamonholmgren

We're going to hold off on pushing this into v8 (Maverick), but can revisit post-Maverick release. cc @tido64 @afoxman

jamonholmgren avatar Aug 11 '22 01:08 jamonholmgren

We can try @rnx-kit/[email protected]. The issue is now fixed.

ecreeth avatar Aug 22 '22 17:08 ecreeth

Updated this branch, and updated past @rnx-kit/[email protected].

Getting a cryptic build error that I'm not getting on master


Reproducible steps

In ignite directory

cd boilerplate
yarn install
yarn start
yarn ios

Simulator output

Screen Shot 2022-11-22 at 5 27 26 PM

yarn ios output

➜  boilerplate git:(rnx-kit-esbuild) ✗ yarn ios
yarn run v1.22.19
$ react-native run-ios
info Found Xcode workspace "HelloWorld.xcworkspace"
info Building (using "xcodebuild -workspace HelloWorld.xcworkspace -configuration Debug -scheme HelloWorld -destination id=EB879DB3-0643-4C14-9F28-71C879883890")
success Successfully built the app
2022-11-22 17:28:08.361 xcodebuild[56638:1782885] Requested but did not find extension point with identifier Xcode.IDEKit.ExtensionSentinelHostApplications for extension Xcode.DebuggerFoundation.AppExtensionHosts.watchOS of plug-in com.apple.dt.IDEWatchSupportCore
2022-11-22 17:28:08.361 xcodebuild[56638:1782885] Requested but did not find extension point with identifier Xcode.IDEKit.ExtensionPointIdentifierToBundleIdentifier for extension Xcode.DebuggerFoundation.AppExtensionToBundleIdentifierMap.watchOS of plug-in com.apple.dt.IDEWatchSupportCore
--- xcodebuild: WARNING: Using the first of multiple matching destinations:
{ platform:iOS Simulator, id:dvtdevice-DVTiOSDeviceSimulatorPlaceholder-iphonesimulator:placeholder, name:Any iOS Simulator Device }
{ platform:iOS Simulator, id:6E1C3CCB-9DCA-442C-A939-5B600D3343C0, OS:15.5, name:iPhone 8 }
{ platform:iOS Simulator, id:B928C239-4174-4985-A6C3-5BF84DDDB1A0, OS:15.5, name:iPhone 8 Plus }
{ platform:iOS Simulator, id:76B47B7D-137F-40F2-9140-586FF9709A3A, OS:15.5, name:iPhone 11 }
{ platform:iOS Simulator, id:00049CD8-CD76-4A5A-92CF-5B63ACB9B001, OS:15.5, name:iPhone 11 Pro }
{ platform:iOS Simulator, id:5D67ED71-E53F-4B7C-A55B-A9C42CB3C651, OS:15.5, name:iPhone 11 Pro Max }
{ platform:iOS Simulator, id:6899559E-F18D-45E6-86F0-9526BEBC4F3D, OS:15.5, name:iPhone 12 }
{ platform:iOS Simulator, id:B58A56DE-4A43-464F-B50E-BE7CF9BFE371, OS:15.5, name:iPhone 12 Pro }
{ platform:iOS Simulator, id:3E5C2AE6-E279-4FBC-9D1A-0F10113D2D40, OS:15.5, name:iPhone 12 Pro Max }
{ platform:iOS Simulator, id:7FB2BEBD-713D-4139-8CA7-3DACC2B9C582, OS:15.5, name:iPhone 12 mini }
{ platform:iOS Simulator, id:EB879DB3-0643-4C14-9F28-71C879883890, OS:15.5, name:iPhone 13 }
{ platform:iOS Simulator, id:6B1EE194-DBDC-442C-A644-8FA8D3CC5C73, OS:15.5, name:iPhone 13 Pro }
{ platform:iOS Simulator, id:B0A520DC-66F9-4996-9A54-3BB47B867A44, OS:15.5, name:iPhone 13 Pro Max }
{ platform:iOS Simulator, id:AC7C8D9B-CCC6-4BBD-828E-CE4CCF8261C9, OS:15.5, name:iPhone 13 mini }
{ platform:iOS Simulator, id:03ED2AC9-124E-4FF3-9C5A-4F29FB3F109F, OS:15.5, name:iPhone SE (3rd generation) }
{ platform:iOS Simulator, id:1491DD81-80B1-4F48-AB7A-ADA360FA36AA, OS:15.5, name:iPod touch (7th generation) }
{ platform:macOS, arch:arm64, variant:Designed for [iPad,iPhone], id:00006001-000C68243C04401E }
{ platform:iOS, id:dvtdevice-DVTiPhonePlaceholder-iphoneos:placeholder, name:Any iOS Device }
{ platform:iOS Simulator, id:44863323-18A6-404C-AF5F-4C27F8164CCA, OS:15.5, name:iPad (9th generation) }
{ platform:iOS Simulator, id:A2BA173E-B775-436F-B031-A6CD595BD575, OS:15.5, name:iPad Air (5th generation) }
{ platform:iOS Simulator, id:0EC836CB-4915-4EA6-93CE-E73F167E5E19, OS:15.5, name:iPad Pro (9.7-inch) }
{ platform:iOS Simulator, id:59140F8D-AD0A-48D3-B8D0-97DC37A3DB9C, OS:15.5, name:iPad Pro (11-inch) (3rd generation) }
{ platform:iOS Simulator, id:AB23D9DD-6C0F-4F81-BEB1-CD1325BA0F8B, OS:15.5, name:iPad Pro (12.9-inch) (5th generation) }
{ platform:iOS Simulator, id:DCAF7560-6E18-4E12-B624-091F56943625, OS:15.5, name:iPad mini (6th generation) }
info Installing "/Users/joshuayoes/Library/Developer/Xcode/DerivedData/HelloWorld-bqhwxjdhmfoghtghcplopzwwglsb/Build/Products/Debug-iphonesimulator/HelloWorld.app"
info Launching "com.helloworld"
success Successfully launched the app on the simulator
✨  Done in 5.26s.

npx ignite-cli doctor output

npx ignite-cli doctor
System
  platform           darwin                                                  
  arch               arm64                                                   
  cpu                10 cores      Apple M1 Max                              
  directory          boilerplate   /Users/joshuayoes/Code/ignite/boilerplate 

JavaScript (and globally-installed packages)
  node                      16.16.0                                   /Users/joshuayoes/.asdf/installs/nodejs/16.16.0/bin/node 
  npm                       7.24.2                                    /Users/joshuayoes/Code/ignite/node_modules/.bin/npm      
    eas-cli                 2.7.0                                                                                              
    expo-cli                6.0.6                                                                                              
    react-devtools-inline   4.26.1                                                                                             
    react-devtools          4.26.0                                                                                             
    sharp-cli               2.1.1                                                                                              
  yarn                      1.22.19                                   /Users/joshuayoes/.asdf/installs/nodejs/16.16.0/bin/yarn 
  pnpm                      7.5.2                                     /Users/joshuayoes/.asdf/installs/nodejs/16.16.0/bin/pnpm 
                            <no pnpm global package info available>                                                            
  expo                      46.0.17                                   managed                                                  

Ignite
  ignite-cli         8.4.2        /Users/joshuayoes/.npm/_npx/e31027f3785124a8/node_modules/.bin/ignite      
  ignite src         build        /Users/joshuayoes/.npm/_npx/e31027f3785124a8/node_modules/ignite-cli/build 

Android
  java               11.0.16.1    /Users/joshuayoes/.asdf/shims/java    
  android home       -            /Users/joshuayoes/Library/Android/sdk 

iOS
  xcode              13.4.1     
  cocoapods          1.11.3       /Users/joshuayoes/.asdf/shims/pod 

Tools
  git                git version 2.37.3   /opt/homebrew/bin/git

joshuayoes avatar Nov 23 '22 02:11 joshuayoes

Maybe related to transform? https://app.circleci.com/pipelines/github/infinitered/ignite/2345/workflows/1a9dcabd-0e60-4e66-888c-a45b52413157/jobs/2923

yarn run v1.22.18
$ jest
PASS src/tools/demo.test.ts (6.496 s)
PASS src/tools/packager.test.ts (6.564 s)
PASS test/vanilla/ignite-help.test.ts (13.407 s)
PASS test/vanilla/ignite-remove-demo.test.ts (13.847 s)
PASS test/vanilla/ignite-generate.test.ts (17.333 s)
FAIL test/vanilla/ignite-new.test.ts (163.38 s)
  ● ignite new › ignite new Foo --debug --packager=npm --yes --use-cache › should be able to use `generate` command and have pass output pass npm run test, npm run lint, and npm run compile scripts

    Command failed: cd /tmp/ignite-2b3598c3647caa65c46ae0008d3b291c/Foo && npm run test && cd /mnt/ramdisk/repo
    FAIL app/services/api/apiProblem.test.ts
      ● Test suite failed to run

        Jest encountered an unexpected token

        This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

        By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

        Here's what you can do:
         • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
         • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
         • If you need a custom transformation specify a "transform" option in your config.
         • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

        You'll find more details and examples of these config options in the docs:
        https://jestjs.io/docs/en/configuration.html

        Details:

        /tmp/ignite-2b3598c3647caa65c46ae0008d3b291c/Foo/node_modules/react-native/jest/setup.js:384
        import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
        ^^^^^^

        SyntaxError: Cannot use import statement outside a module

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
      FAIL app/models/Episode.test.ts
        ● Test suite failed to run
          Jest encountered an unexpected token
          This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
          By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
          Here's what you can do:
           • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
           • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
           • If you need a custom transformation specify a "transform" option in your config.
           • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
          You'll find more details and examples of these config options in the docs:
          https://jestjs.io/docs/en/configuration.html
          Details:
          /tmp/ignite-2b3598c3647caa65c46ae0008d3b291c/Foo/node_modules/react-native/jest/setup.js:384
          import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
          ^^^^^^
          SyntaxError: Cannot use import statement outside a module
      FAIL app/models/ModTest.test.ts
        ● Test suite failed to run
          Jest encountered an unexpected token
          This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
          By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
          Here's what you can do:
           • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
           • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
           • If you need a custom transformation specify a "transform" option in your config.
           • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
          You'll find more details and examples of these config options in the docs:
          https://jestjs.io/docs/en/configuration.html
          Details:
          /tmp/ignite-2b3598c3647caa65c46ae0008d3b291c/Foo/node_modules/react-native/jest/setup.js:384
          import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
          ^^^^^^
          SyntaxError: Cannot use import statement outside a module
      FAIL app/utils/storage/storage.test.ts
        ● Test suite failed to run
          Jest encountered an unexpected token
          This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
          By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
          Here's what you can do:
           • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
           • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
           • If you need a custom transformation specify a "transform" option in your config.
           • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
          You'll find more details and examples of these config options in the docs:
          https://jestjs.io/docs/en/configuration.html
          Details:
          /tmp/ignite-2b3598c3647caa65c46ae0008d3b291c/Foo/node_modules/react-native/jest/setup.js:384
          import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
          ^^^^^^
          SyntaxError: Cannot use import statement outside a module
      FAIL test/i18n.test.ts
        ● Test suite failed to run
          Jest encountered an unexpected token
          This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
          By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
          Here's what you can do:
           • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
           • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
           • If you need a custom transformation specify a "transform" option in your config.
           • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
          You'll find more details and examples of these config options in the docs:
          https://jestjs.io/docs/en/configuration.html
          Details:
          /tmp/ignite-2b3598c3647caa65c46ae0008d3b291c/Foo/node_modules/react-native/jest/setup.js:384
          import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
          ^^^^^^
          SyntaxError: Cannot use import statement outside a module
      Test Suites: 5 failed, 5 total
      Tests:       0 total
      Snapshots:   0 total
      Time:        2.294 s
      Ran all test suites.

Test Suites: 1 failed, 5 passed, 6 total
Tests:       1 failed, 23 passed, 24 total
Snapshots:   18 passed, 18 total
Time:        164.196 s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Exited with code exit status 1

joshuayoes avatar Nov 23 '22 02:11 joshuayoes

Going to close this PR since we are migrating more towards Expo by default

joshuayoes avatar Dec 20 '23 21:12 joshuayoes