From 6c09015c1afe3ac2d932dad5ed158165fd548c87 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Roma=C5=84czyk?= Date: Tue, 16 Apr 2024 20:40:34 +0200 Subject: [PATCH] chore: update `webpack.config` templates (#556) * feat: use createRequire in mjs template * refactor: move dirname to top * fix: add missing default for platform in cjs template * fix: adjust repack path in trasnformation rules * chore: adjust config in TesterApp to match template * refactor: use resolve by itself to avoid accidental require usage * chore: add changeset * chore: update typedoc in getInitializationEntries --- .changeset/sharp-stingrays-wave.md | 5 +++++ packages/TesterApp/webpack.config.mjs | 14 ++++++++------ .../webpack/utils/getInitializationEntries.ts | 5 +++-- templates/webpack.config.cjs | 4 ++-- templates/webpack.config.mjs | 16 +++++++++------- 5 files changed, 27 insertions(+), 17 deletions(-) create mode 100644 .changeset/sharp-stingrays-wave.md diff --git a/.changeset/sharp-stingrays-wave.md b/.changeset/sharp-stingrays-wave.md new file mode 100644 index 000000000..765b295e5 --- /dev/null +++ b/.changeset/sharp-stingrays-wave.md @@ -0,0 +1,5 @@ +--- +"@callstack/repack": patch +--- + +Update webpack.config templates diff --git a/packages/TesterApp/webpack.config.mjs b/packages/TesterApp/webpack.config.mjs index 6e30dd2e7..0e8af9904 100644 --- a/packages/TesterApp/webpack.config.mjs +++ b/packages/TesterApp/webpack.config.mjs @@ -1,7 +1,11 @@ -import path from 'path'; +import { createRequire } from 'node:module'; +import path from 'node:path'; import TerserPlugin from 'terser-webpack-plugin'; import * as Repack from '@callstack/repack'; +const dirname = Repack.getDirname(import.meta.url); +const { resolve } = createRequire(import.meta.url); + /** * More documentation, installation, usage, motivation and differences with Metro is available at: * https://github.com/callstack/repack/blob/main/README.md @@ -20,7 +24,7 @@ import * as Repack from '@callstack/repack'; export default (env) => { const { mode = 'development', - context = Repack.getDirname(import.meta.url), + context = dirname, entry = './index.js', platform = process.env.PLATFORM, minimize = mode === 'production', @@ -28,10 +32,8 @@ export default (env) => { bundleFilename = undefined, sourceMapFilename = undefined, assetsPath = undefined, - reactNativePath = new URL('./node_modules/react-native', import.meta.url) - .pathname, + reactNativePath = resolve('react-native'), } = env; - const dirname = context; if (!platform) { throw new Error('Missing platform'); @@ -156,7 +158,7 @@ export default (env) => { /node_modules(.*[/\\])+pretty-format/, /node_modules(.*[/\\])+metro/, /node_modules(.*[/\\])+abort-controller/, - /node_modules(.*[/\\])+@callstack\/repack/, + /node_modules(.*[/\\])+@callstack[/\\]repack/, ], use: 'babel-loader', }, diff --git a/packages/repack/src/webpack/utils/getInitializationEntries.ts b/packages/repack/src/webpack/utils/getInitializationEntries.ts index f658b718b..098d7bfaf 100644 --- a/packages/repack/src/webpack/utils/getInitializationEntries.ts +++ b/packages/repack/src/webpack/utils/getInitializationEntries.ts @@ -29,11 +29,12 @@ export interface InitializationEntriesOptions { * ```ts * import * as Repack from '@callstack/repack'; * + * const { resolve } = createRequire(import.meta.url); + * * export default (env) => { * const { * devServer, - * reactNativePath = new URL('./node_modules/react-native', import.meta.url) - * .pathname, + * reactNativePath = resolve('react-native'), * } = env; * * return { diff --git a/templates/webpack.config.cjs b/templates/webpack.config.cjs index 74ed6ba1e..41118bb8e 100644 --- a/templates/webpack.config.cjs +++ b/templates/webpack.config.cjs @@ -22,7 +22,7 @@ module.exports = (env) => { mode = 'development', context = __dirname, entry = './index.js', - platform, + platform = process.env.PLATFORM, minimize = mode === 'production', devServer = undefined, bundleFilename = undefined, @@ -157,7 +157,7 @@ module.exports = (env) => { /node_modules(.*[/\\])+pretty-format/, /node_modules(.*[/\\])+metro/, /node_modules(.*[/\\])+abort-controller/, - /node_modules(.*[/\\])+@callstack\/repack/, + /node_modules(.*[/\\])+@callstack[/\\]repack/, ], use: 'babel-loader', }, diff --git a/templates/webpack.config.mjs b/templates/webpack.config.mjs index 18313bebc..627595ce1 100644 --- a/templates/webpack.config.mjs +++ b/templates/webpack.config.mjs @@ -1,7 +1,11 @@ -import path from 'path'; +import { createRequire } from 'node:module'; +import path from 'node:path'; import TerserPlugin from 'terser-webpack-plugin'; import * as Repack from '@callstack/repack'; +const dirname = Repack.getDirname(import.meta.url); +const { resolve } = createRequire(import.meta.url); + /** * More documentation, installation, usage, motivation and differences with Metro is available at: * https://github.com/callstack/repack/blob/main/README.md @@ -20,7 +24,7 @@ import * as Repack from '@callstack/repack'; export default (env) => { const { mode = 'development', - context = Repack.getDirname(import.meta.url), + context = dirname, entry = './index.js', platform = process.env.PLATFORM, minimize = mode === 'production', @@ -28,16 +32,14 @@ export default (env) => { bundleFilename = undefined, sourceMapFilename = undefined, assetsPath = undefined, - reactNativePath = new URL('./node_modules/react-native', import.meta.url) - .pathname, + reactNativePath = resolve('react-native'), } = env; - const dirname = Repack.getDirname(import.meta.url); if (!platform) { throw new Error('Missing platform'); } - /** + /** * Using Module Federation might require disabling hmr. * Uncomment below to set `devServer.hmr` to `false`. * @@ -159,7 +161,7 @@ export default (env) => { /node_modules(.*[/\\])+pretty-format/, /node_modules(.*[/\\])+metro/, /node_modules(.*[/\\])+abort-controller/, - /node_modules(.*[/\\])+@callstack\/repack/, + /node_modules(.*[/\\])+@callstack[/\\]repack/, ], use: 'babel-loader', },