ignite
ignite copied to clipboard
esbuild: Moving to @rnx-kit/metro-serializer-esbuild
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.
We're going to hold off on pushing this into v8 (Maverick), but can revisit post-Maverick release. cc @tido64 @afoxman
We can try @rnx-kit/[email protected]
. The issue is now fixed.
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](https://user-images.githubusercontent.com/37849890/203452940-a97df434-3430-4ab0-87e4-40c5702be64e.png)
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
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
Going to close this PR since we are migrating more towards Expo by default