repack
repack copied to clipboard
Published
20 hours ago •
callstack
callstack
File main.69c5466ca3d44b608e7e.hot-update.json for android not found in compilation assets
Environment
React Native: 0.69.0 Re.Pack: 3.0.0-next.2 React: 18 webpack: ^5.73.0
Description
I keep getting this error from the dev server while trying out Re.pack v3.
ℹ [13:07:05.383Z][DevServer] Successfully run: /Users/ammarahmed/Library/Android/sdk/platform-tools/adb reverse tcp:8081 tcp:8081
⇢ [13:07:06.152Z][LoggerPlugin] Compiling android: 65% building (8/8 entries 1872/1872 dependencies 1981/274 modules)
⇢ [13:07:07.995Z][LoggerPlugin] Compiling android: 98% emitting (after emit)
ℹ [13:07:08.683Z][LoggerPlugin] Bundle built { time: 2654 }
ℹ [13:07:09.625Z][Console] [HMRClient] Bundle rebuilt {"name": "", "time": 2654}
ℹ [13:07:09.628Z][Console] [HMRClient] Checking for updates on the server...
✖ [13:07:09.671Z][DevServer] File main.69c5466ca3d44b608e7e.hot-update.json for android not found in compilation assets {
reqId: 'req-2j',
stack: 'Error: File main.69c5466ca3d44b608e7e.hot-update.json for android not found in compilation assets\n' +
' at Compiler.getAsset (/Users/ammarahmed/Repos/notesnook-mobile/node_modules/@callstack/repack/dist/webpack/Compiler.js:147:29)\n' +
' at Object.getAsset (/Users/ammarahmed/Repos/notesnook-mobile/node_modules/@callstack/repack/dist/commands/start.js:113:81)\n' +
' at Object.handler (file:///Users/ammarahmed/Repos/notesnook-mobile/node_modules/@callstack/repack-dev-server/dist/plugins/compiler/compilerPlugin.js:62:47)\n' +
' at preHandlerCallback (/Users/ammarahmed/Repos/notesnook-mobile/node_modules/fastify/lib/handleRequest.js:126:28)\n' +
' at preValidationCallback (/Users/ammarahmed/Repos/notesnook-mobile/node_modules/fastify/lib/handleRequest.js:109:5)\n' +
' at handler (/Users/ammarahmed/Repos/notesnook-mobile/node_modules/fastify/lib/handleRequest.js:72:7)\n' +
' at handleRequest (/Users/ammarahmed/Repos/notesnook-mobile/node_modules/fastify/lib/handleRequest.js:20:5)\n' +
' at runPreParsing (/Users/ammarahmed/Repos/notesnook-mobile/node_modules/fastify/lib/route.js:451:5)\n' +
' at Object.routeHandler [as handler] (/Users/ammarahmed/Repos/notesnook-mobile/node_modules/fastify/lib/route.js:409:7)\n' +
' at Router.lookup (/Users/ammarahmed/Repos/notesnook-mobile/node_modules/find-my-way/index.js:378:14)',
type: 'Error'
}
ℹ [13:07:09.673Z][DevServer] GET 404 /android/main.69c5466ca3d44b608e7e.hot-update.json request completed { responseTime: 2.4995120000094175 }
⚠ [13:07:09.686Z][Console] [HMRClient] Cannot find update - full reload needed
ℹ [13:07:10.013Z][DevServer] GET 200 /index.bundle?platform=android&dev=true&minify=false&app=com.streetwriters.notesnook&modulesOnly=false&runModule=true request completed { responseTime: 320.184015000239 }
Webpack Config
/* eslint-disable @typescript-eslint/no-var-requires */
const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');
const Repack = require('@callstack/repack');
/**
* More documentation, installation, usage, motivation and differences with Metro is available at:
* https://github.com/callstack/repack/blob/main/README.md
*
* The API documentation for the functions and plugins used in this file is available at:
* https://re-pack.netlify.app/
*/
/**
* Webpack configuration.
* You can also export a static object or a function returning a Promise.
*
* @param env Environment options passed from either Webpack CLI or React Native CLI
* when running with `react-native start/bundle`.
*/
module.exports = env => {
const {
mode = 'development',
context = __dirname,
entry = './index.js',
platform,
minimize = mode === 'production',
devServer = undefined,
bundleFilename = undefined,
sourceMapFilename = undefined,
assetsPath = undefined,
reactNativePath = require.resolve('react-native')
} = env;
if (!platform) {
throw new Error('Missing platform');
}
/**
* Depending on your Babel configuration you might want to keep it.
* If you don't use `env` in your Babel config, you can remove it.
*
* Keep in mind that if you remove it you should set `BABEL_ENV` or `NODE_ENV`
* to `development` or `production`. Otherwise your production code might be compiled with
* in development mode by Babel.
*/
process.env.BABEL_ENV = mode;
return {
mode,
/**
* This should be always `false`, since the Source Map configuration is done
* by `SourceMapDevToolPlugin`.
*/
devtool: false,
context,
/**
* `getInitializationEntries` will return necessary entries with setup and initialization code.
* If you don't want to use Hot Module Replacement, set `hmr` option to `false`. By default,
* HMR will be enabled in development mode.
*/
entry: [
...Repack.getInitializationEntries(reactNativePath, {
hmr: devServer && devServer.hmr
}),
entry
],
resolve: {
/**
* `getResolveOptions` returns additional resolution configuration for React Native.
* If it's removed, you won't be able to use `<file>.<platform>.<ext>` (eg: `file.ios.js`)
* convention and some 3rd-party libraries that specify `react-native` field
* in their `package.json` might not work correctly.
*/
...Repack.getResolveOptions(platform)
/**
* Uncomment this to ensure all `react-native*` imports will resolve to the same React Native
* dependency. You might need it when using workspaces/monorepos or unconventional project
* structure. For simple/typical project you won't need it.
*/
// alias: {
// 'react-native': reactNativePath,
// },
},
/**
* Configures output.
* It's recommended to leave it as it is unless you know what you're doing.
* By default Webpack will emit files into the directory specified under `path`. In order for the
* React Native app use them when bundling the `.ipa`/`.apk`, they need to be copied over with
* `Repack.OutputPlugin`, which is configured by default inside `Repack.RepackPlugin`.
*/
output: {
clean: true,
path: path.join(__dirname, 'build/generated', platform),
filename: 'index.bundle',
chunkFilename: '[name].chunk.bundle',
publicPath: Repack.getPublicPath({ platform, devServer })
},
/**
* Configures optimization of the built bundle.
*/
optimization: {
/** Enables minification based on values passed from React Native CLI or from fallback. */
minimize,
/** Configure minimizer to process the bundle. */
minimizer: [
new TerserPlugin({
test: /\.(js)?bundle(\?.*)?$/i,
/**
* Prevents emitting text file with comments, licenses etc.
* If you want to gather in-file licenses, feel free to remove this line or configure it
* differently.
*/
extractComments: false,
terserOptions: {
format: {
comments: false
}
}
})
],
chunkIds: 'named'
},
module: {
/**
* This rule will process all React Native related dependencies with Babel.
* If you have a 3rd-party dependency that you need to transpile, you can add it to the
* `include` list.
*
* You can also enable persistent caching with `cacheDirectory` - please refer to:
* https://github.com/babel/babel-loader#options
*/
rules: [
{
test: /\.[jt]sx?$/,
include: [
/node_modules(.*[/\\])+react/,
/node_modules(.*[/\\])+@react-native/,
/node_modules(.*[/\\])+@react-navigation/,
/node_modules(.*[/\\])+@react-native-community/,
/node_modules(.*[/\\])+@expo/,
/node_modules(.*[/\\])+pretty-format/,
/node_modules(.*[/\\])+metro/,
/node_modules(.*[/\\])+abort-controller/,
/node_modules(.*[/\\])+@callstack[/\\]repack/,
/node_modules(.*[/\\])+pretty-format/,
/node_modules(.*[/\\])+@react-native-masked-view\/masked-view/,
/node_modules(.*[/\\])+toggle-switch-react-native/,
/node_modules(.*[/\\])+rn-fetch-blob/,
/node_modules(.*[/\\])+notes-core/,
/node_modules(.*[/\\])+@microsoft/,
/node_modules(.*[/\\])+@msgpack/,
/node_modules(.*[/\\])+liqe/
],
use: {
loader: 'babel-loader',
options: {
configFile: false,
cacheDirectory: path.join(__dirname, 'node_modules/.webpack-cache'),
babelrc: false,
presets: ['module:metro-react-native-babel-preset'],
plugins: [
'react-native-reanimated/plugin',
'@babel/plugin-transform-named-capturing-groups-regex'
]
}
}
},
/**
* Here you can adjust loader that will process your files.
*
* You can also enable persistent caching with `cacheDirectory` - please refer to:
* https://github.com/babel/babel-loader#options
*/
{
test: /\.[jt]sx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
/** Add React Refresh transform only when HMR is enabled. */
configFile: false,
cacheDirectory: path.join(__dirname, 'node_modules/.webpack-cache'),
babelrc: false,
presets: [
['module:metro-react-native-babel-preset', { disableImportExportTransform: true }]
],
plugins:
devServer && devServer.hmr
? ['module:react-refresh/babel', 'react-native-reanimated/plugin']
: [
'react-native-reanimated/plugin',
`@babel/plugin-transform-named-capturing-groups-regex`,
'transform-remove-console'
]
}
}
},
/**
* This loader handles all static assets (images, video, audio and others), so that you can
* use (reference) them inside your application.
*
* If you wan to handle specific asset type manually, filter out the extension
* from `ASSET_EXTENSIONS`, for example:
* ```
* Repack.ASSET_EXTENSIONS.filter((ext) => ext !== 'svg')
* ```
*/
{
test: Repack.getAssetExtensionsRegExp(
Repack.ASSET_EXTENSIONS.filter(ext => ext !== 'svg')
),
use: {
loader: '@callstack/repack/assets-loader',
options: {
platform,
devServerEnabled: Boolean(devServer),
/**
* Defines which assets are scalable - which assets can have
* scale suffixes: `@1x`, `@2x` and so on.
* By default all images are scalable.
*/
scalableAssetExtensions: Repack.SCALABLE_ASSETS
}
}
},
{
test: /\.svg$/,
use: [
{
loader: '@svgr/webpack',
options: {
native: true,
dimensions: false
}
}
]
}
]
},
plugins: [
/**
* Configure other required and additional plugins to make the bundle
* work in React Native and provide good development experience with
* sensible defaults.
*
* `Repack.RepackPlugin` provides some degree of customization, but if you
* need more control, you can replace `Repack.RepackPlugin` with plugins
* from `Repack.plugins`.
*/
new Repack.RepackPlugin({
context,
mode,
platform,
devServer,
output: {
bundleFilename,
sourceMapFilename,
assetsPath
},
extraChunks: [
{
type: 'local',
include: /.*/
}
]
})
]
};
};
Could you update @callstack/repack to 3.0.0-next.5 and try again? If the problem persists, open this URL - http://localhost:8081/api/android/assets then copy & paste the body here.
I've met the same issue before and it seems like a bug related to output: { clean: true } in webpack.config.js, you can find some details here: https://github.com/callstack/repack/issues/161
@ammarahm-ed please see if the issue mentioned above by @joe06102 can help you with your problem.
Closing due to inactivity.
