Documentation inconsistencies and errors migrating an existing RN app

[simarmol]

Environment

I've had the same errors on M1 and intel Macs as well as Windows, on both ios simulators, android emulators, and iOS and android devices. For brevity I will post my latest general info.
OS: Mac 11.5.1 Big Sur, M1 chip
Device: iOS Simulator
Package manager: yarn v1 (no workspaces/symlinks)
Relevant versions:

    "react-native": "0.63.3",
    "@babel/core": "^7.8.4",
    "@babel/runtime": "^7.8.4",
    "@callstack/repack": "^2.0.0-beta.7",
    "babel-loader": "^8.2.2",
    "typescript": "^3.7.5",
    "webpack": "^5.49.0",
    "webpack-cli": "^4.7.2"
    "terser-webpack-plugin": "^5.1.4",

Other info: I'm running all these commands from the VS Code integrated terminal. Never built from XCode/Android Studio.

Description

I've tried setting up both this and Haul a few times and never succeeded. I have an existing react native project that I try to set up repack with. I would just like to verify these are actual mistakes and not issues with my env.

Webpackconfig missing

repack/README.md

Line 120 in d6002af

5. Now you can build your app for production or run development server with `npx react-native webpack-start` and develop your app.

My error:

error Option "--webpackConfig" is missing. Run CLI with --verbose flag for more details.
Error: Option "--webpackConfig" is missing

My webpack.config.js is in the root, next to my package.json and such. Trying to pass the path to it as an argument doesn't seem to do anything.

Issues starting the bundler

repack/templates/webpack.config.js

Lines 15 to 18 in d6002af

	* This is the Webpack configuration file for your React Native project.
	* It can be used in 2 ways:
	* - by running React Native CLI eg: `npx react-native start` or `npx react-native bundle`
	* - by running Webpack CLI eg: `npx webpack-cli -c webpack.config.js`

Error 1:

$ webpack-cli -c webpack.config.js
[webpack-cli] Failed to load '/reporoot/rnApp/webpack.config.js' config
[webpack-cli] TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined

Not sure what's up here. I am using the plain template from the repo for the webpack config. More fallbacks need to be set up I guess?

Error 2

Running npx react-native start as the first line suggests just started the metro bundler for me.

Bundler stuck at 10%

So now that I have the bundler running, I connect my iOS emulator and it just seems to get stuck. Stays there forever, or at least for several hours.

ℹ [01:57:50.455Z][DevServerProxy] Hermes device connected { deviceId: 0 } 
ℹ [01:57:51.403Z][DevServer@ios] Server listening at http://127.0.0.1:60608 
ℹ [01:57:51.439Z][webpack-dev-middleware] wait until bundle finished: /index.bundle?platform=ios&dev=true&minify=false 
⠸ Running: (ios) building 10% 

I also had this issue before Hermes was enabled.

Android build fails due to kotlin error in repack

> Task :callstack_repack:compileDebugKotlin FAILED
/node_modules/@callstack/repack/android/src/main/java/com/callstack/nativepack/ChunkManagerModule.kt: (89, 49): Type mismatch: inferred type is String? but String was expected

FAILURE: Build failed with an exception.

I hadn't seen this one before. New issue? My Gradle is 6.2. Build config is debug.

Some relevant looking versions from my gradle files:

        buildToolsVersion = "29.0.2"
        minSdkVersion = 21
        compileSdkVersion = 29
        targetSdkVersion = 29
        supportLibVersion = "28.0.0"
        androidXCore = "1.0.2"
        googlePlayServicesVersion = '16.0.0'
        ext.kotlinVersion = '1.4.10'

        classpath 'com.android.tools.build:gradle:4.0.1'

repack does not start automatally on ios/android build

react-native run ios and react-native run android do not launch repack for me. The metro bundler still launches for me. I did make the native changes, or so I thought. Did I miss something?

Reproducible Demo

Have to go make one still. I don't suppose there's a sample project for repack somewhere?

[zamotany]

error Option "--webpackConfig" is missing. Run CLI with --verbose flag for more details.
Error: Option "--webpackConfig" is missing

This is probably a bug on our end. Can you let me know which version of @react-native-community/cli are you using?

Issues starting the bundler

Error 1

The Webpack config needs to know for which platform to generate the bundle and there are multiple ways to pass that infor to webpack.config.js. In the default template it's by process.env.PLATFORM so you should run it by PLATFORM=<platform> webpack-cli -c webpack.config.js in your case. The docs doesn't mention that, since I don't know how people are passing the platform - it can be hardcoded or passed as a command line option, it can be red from .env file and so on.

Error 2

It should have been npx react-native webpack-start and npx react-native webpack-bundle in the comment, which is a bug on our end.

Bundler stuck at 10%

Not sure why the issue is happening. I suspect Webpack has a problem on some files. It's difficult to debug what's the root cause so I recommend to create a repro project where the same issue can be observed.

Android build fails due to kotlin error in repack

Likely caused due to newer Kotlin version. ChunkManagerModule.kt must be adjusted to make it pass.

repack does not start automatally on ios/android build

Running Metro is hardcoded into the React Native CLI, so there's little we can do in that regard. The only option I see for the time being is to create custom Node.js script or bash script to run Re.Pack in separate terminal window and then run react-native start with --noPackager option.

[dingziqi]

error Option "--webpackConfig" is missing. Run CLI with --verbose flag for more details.
Error: Option "--webpackConfig" is missing

same error with @react-native-community/cli@5.0.1-alpha.1

[simarmol]

I'm on 5.0.1-alpha.2 apparently.

error Option "--webpackConfig" is missing. Run CLI with --verbose flag for more details.
Error: Option "--webpackConfig" is missing

This is probably a bug on our end. Can you let me know which version of @react-native-community/cli are you using?

I'm on 5.0.1-alpha.2 apparently. Not sure why.

[MateWW]

@dingziqi @scmarmol I've prepared a fresh project with RePack and it works for me with both CLI versions.
Could you please check it on your side?

https://github.com/MateWW/Repack-reproduction

[simarmol]

@dingziqi @scmarmol I've prepared a fresh project with RePack and it works for me with both CLI versions.
Could you please check it on your side?

https://github.com/MateWW/Repack-reproduction

Hm, also working for me. I guess something is wrong on my end, but I have yet to figure out what.

[zamotany]

The error:

$ webpack-cli -c webpack.config.js
[webpack-cli] Failed to load '/reporoot/rnApp/webpack.config.js' config
[webpack-cli] TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined

got fixed in #80

The error:

> Task :callstack_repack:compileDebugKotlin FAILED
/node_modules/@callstack/repack/android/src/main/java/com/callstack/nativepack/ChunkManagerModule.kt: (89, 49): Type mismatch: inferred type is String? but String was expected

FAILURE: Build failed with an exception.

should no longer be an issue as it was addressed in #75

If Webpack is stuck at 10% it's likely configuration error on your end. For troubleshooting I suggest to run react-native webpack-bundle --dev false --platform <platform> --entry-file ./index.js --bundle-output ./main.jsbundle and see if that one passes. If it's stuck as well, it's configuration issue, if not please open a separate issue.