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.

Sign up for GitHub

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

breaking: Update cli-plugin-metro to use defaults in app metro.config.js (RN 0.72) #1875

Merged
merged 1 commit into from
Mar 23, 2023
Merged

breaking: Update cli-plugin-metro to use defaults in app metro.config.js (RN 0.72) #1875

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions packages/cli-plugin-metro/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,7 @@
"metro": "0.76.0",
"metro-config": "0.76.0",
"metro-core": "0.76.0",
"metro-react-native-babel-transformer": "0.76.0",
"metro-resolver": "0.76.0",
"metro-runtime": "0.76.0",
"readline": "^1.3.0"
},
"devDependencies": {
Expand Down
1 change: 0 additions & 1 deletion packages/cli-plugin-metro/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ export type {MetroConfig} from 'metro-config';
export {
Config,
ConfigLoadingContext,
getDefaultConfig,
default as loadMetroConfig,
} from './tools/loadMetroConfig';
export {
Expand Down
17 changes: 0 additions & 17 deletions packages/cli-plugin-metro/src/tools/__tests__/loadMetroConfig-test.ts
View file
Open in desktop

This file was deleted.

66 changes: 9 additions & 57 deletions packages/cli-plugin-metro/src/tools/loadMetroConfig.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,8 @@
/**
* Configuration file of Metro.
*/
import path from 'path';
import {ConfigT, InputConfigT, loadConfig} from 'metro-config';
import type {Config} from '@react-native-community/cli-types';
import {reactNativePlatformResolver} from './metroPlatformResolver';

const INTERNAL_CALLSITES_REGEX = new RegExp(
[
'/Libraries/Renderer/implementations/.+\\.js$',
'/Libraries/BatchedBridge/MessageQueue\\.js$',
'/Libraries/YellowBox/.+\\.js$',
'/Libraries/LogBox/.+\\.js$',
'/Libraries/Core/Timers/.+\\.js$',
'/Libraries/WebSocket/.+\\.js$',
'/Libraries/vendor/.+\\.js$',
'/node_modules/react-devtools-core/.+\\.js$',
'/node_modules/react-refresh/.+\\.js$',
'/node_modules/scheduler/.+\\.js$',
'/node_modules/event-target-shim/.+\\.js$',
'/node_modules/invariant/.+\\.js$',
'/node_modules/react-native/index.js$',
'/metro-runtime/.+\\.js$',
'^\\[native code\\]$',
].join('|'),
);

export type {Config};

export type ConfigLoadingContext = Pick<
Expand All @@ -34,9 +11,9 @@ export type ConfigLoadingContext = Pick<
>;

/**
* Default configuration
* Get the config options to override based on RN CLI inputs.
*/
export const getDefaultConfig = (ctx: ConfigLoadingContext): InputConfigT => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's check if this is not used by Windows/macOS teams. cc @tido64 @Saadnajmi

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can't find any references to this function in react-native-windows/-macos. Nor do we use it in rnx-kit. I'd say it's safe to remove it, but I'll let @Saadnajmi verify as well.

Copy link

@jonthysell jonthysell Mar 30, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@tido While this particular function isn't used, the answer is yes, this overall PR breaks RNW. :) All of our PRs are blocked because we test changes by creating a new app with the CLI and verifying it builds/bundles.

See: microsoft/react-native-windows#11437

We currently have a (hopefully temporary) workaround here: microsoft/react-native-windows#11438

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It should've been fixed in: #1889. Is this still happening as in 11.0.1?

function getOverrideConfig(ctx: ConfigLoadingContext): InputConfigT {
const outOfTreePlatforms = Object.keys(ctx.platforms).filter(
(platform) => ctx.platforms[platform].npmPackageName,
);
Expand All @@ -55,9 +32,7 @@ export const getDefaultConfig = (ctx: ConfigLoadingContext): InputConfigT => {
{},
),
),
resolverMainFields: ['react-native', 'browser', 'main'],
platforms: [...Object.keys(ctx.platforms), 'native'],
unstable_conditionNames: ['import', 'require', 'react-native'],
},
serializer: {
// We can include multiple copies of InitializeCore here because metro will
Expand All @@ -73,33 +48,9 @@ export const getDefaultConfig = (ctx: ConfigLoadingContext): InputConfigT => {
),
),
],
getPolyfills: () =>
require(path.join(ctx.reactNativePath, 'rn-get-polyfills'))(),
},
server: {
port: Number(process.env.RCT_METRO_PORT) || 8081,
},
symbolicator: {
customizeFrame: (frame) => {
const collapse = Boolean(
frame.file && INTERNAL_CALLSITES_REGEX.test(frame.file),
);
return {collapse};
},
},
transformer: {
allowOptionalDependencies: true,
babelTransformerPath: require.resolve(
'metro-react-native-babel-transformer',
),
assetRegistryPath: 'react-native/Libraries/Image/AssetRegistry',
asyncRequireModulePath: require.resolve(
'metro-runtime/src/modules/asyncRequire',
huntie marked this conversation as resolved.
Show resolved Hide resolved
),
},
watchFolders: [],
};
};
}

export interface ConfigOptionsT {
maxWorkers?: number;
Expand All @@ -113,17 +64,18 @@ export interface ConfigOptionsT {
}

/**
* Loads Metro Config and applies `options` on top of the resolved config.
* Load Metro config.
*
* This allows the CLI to always overwrite the file settings.
* Allows the CLI to override certain defaults in the base `metro.config.js`
* based on dynamic user options in `ctx`.
*/
export default function loadMetroConfig(
ctx: ConfigLoadingContext,
options?: ConfigOptionsT,
): Promise<ConfigT> {
const defaultConfig = {...getDefaultConfig(ctx)};
const overrideConfig = getOverrideConfig(ctx);
if (options && options.reporter) {
defaultConfig.reporter = options.reporter;
overrideConfig.reporter = options.reporter;
}
return loadConfig({cwd: ctx.root, ...options}, defaultConfig);
return loadConfig({cwd: ctx.root, ...options}, overrideConfig);
}
13 changes: 0 additions & 13 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8908,19 +8908,6 @@ [email protected]:
babel-plugin-transform-flow-enums "^0.0.2"
react-refresh "^0.4.0"

[email protected]:
version "0.76.0"
resolved "https://registry.yarnpkg.com/metro-react-native-babel-transformer/-/metro-react-native-babel-transformer-0.76.0.tgz#8c8872f0d3a0ec9dad2480df53c92c10eac92c79"
integrity sha512-mLyUiGq2qPoEwV3oncD82HOtM4wAl8YmXtGY17D4iqH6/5pE32lRnDDYt0WnJYACZDs3RB3MhTjGCM7rJNwn/A==
dependencies:
"@babel/core" "^7.20.0"
babel-preset-fbjs "^3.4.0"
hermes-parser "0.8.0"
metro-babel-transformer "0.76.0"
metro-react-native-babel-preset "0.76.0"
metro-source-map "0.76.0"
nullthrows "^1.1.1"

[email protected]:
version "0.76.0"
resolved "https://registry.yarnpkg.com/metro-resolver/-/metro-resolver-0.76.0.tgz#3fa778adbab30859023a89e7a1241f4eb68171f2"
Expand Down