Assistance Migrating from Haul

[woodrufs]

Hi All,
Thank you for your work on this library (and Haul)!

I am attempting to transition to this library in an app where we are currently using Haul because of an issue I am having not being able to use flipper (or inspect network requests in Haul's debugger). When I run npx react-native webpack-start, the server starts, but the application errors. I am really struggling to get additional data, but all I can pull up right now is this stack trace which appears to be rooting from my webpack.config.js:

Error loading webpack configuration at "/Users/swoodruff/dev/stormbreaker/apps/plant-floor/webpack.config.js": Error: Cannot find module 'webpack/lib/web/JsonpHelpers'
Require stack:
/Users/swoodruff/dev/stormbreaker/common/temp/node_modules/.pnpm/packages.plexdev.io/react-native-webpack-toolkit/1.0.0_28331a31dd8e7476d616c398e649ea17/node_modules/react-native-webpack-toolkit/dist/webpack/plugins/ReactNativeTarget/ReactNativeChunkLoadingPlugin.js
/Users/swoodruff/dev/stormbreaker/common/temp/node_modules/.pnpm/packages.plexdev.io/react-native-webpack-toolkit/1.0.0_28331a31dd8e7476d616c398e649ea17/node_modules/react-native-webpack-toolkit/dist/webpack/plugins/ReactNativeTarget/ReactNativeTargetPlugin.js

I am using the template webpack.config.js recommended. The only changes I have made were

1. I uncommented the section alias to ensure all react-native* imports are resolved to the same RN dependency. I am working in a mono repo built with rush, if that helps at all.
2. Added a fallback for entry to ./index.js.

Any insight or help is really appreciated. I will include any more information that can be of use... I am feeling so lost right now though, I don't have any more to add.

Thank you in advance!

EDIT: Attaching a screenshot to what I believe my issue is. On line 8, it is requiring the file JsonHelpers, but I do not see that file in node_modules/webpack/lib/web.

[zamotany]

I discovered this issue today and is already shipped with the new release 1.0.1. Use updated installation instructions from: https://github.com/callstack/react-native-webpack-toolkit#installation--setup and update react-native-webpack-toolkit to 1.0.1 and install webpack@5.22.0.

[woodrufs]

@zamotany - thanks so much for the quick reply. I was able to get by this after using the steps you provided. The only other issue I came across was another missing dependency I had to install. After installing babel-loaded, I was up and running.

[zamotany]

I've updated installation instructions to mention babel-loader. Closing this issue for now, feel free to re-open it if anything else pops up regarding migration from Haul.

[woodrufs]

Hey @zamotany ,
I think I am running into a few more issues while trying to remove our Haul packages. I keep getting errors like the following: 'unable to resolve @babel/runtime/helpers/extends'.

✖ [12:23:08.403Z][LoggerPlugin] Error in "../../libraries/components/lib/Balance/BalanceSummary/BalanceSummary.js": Module not found: Error: Can't resolve '@babel/runtime/helpers/interopRequireDefault' in '/Users/swoodruff/dev/stormbreaker/libraries/components/lib/Balance/BalanceSummary'

✖ [12:23:08.403Z][LoggerPlugin] Error in "../../libraries/components/lib/Balance/BalanceSummary/BalanceSummary.js": Module not found: Error: Can't resolve '@babel/runtime/helpers/extends' in '/Users/swoodruff/dev/stormbreaker/libraries/components/lib/Balance/BalanceSummary'

To start, these are the packages I had in my package.json that I am removing after switching to react-native-webpack-toolkit:

    "@haul-bundler/babel-preset-react-native": "0.16.0",
    "@haul-bundler/cli": "0.22.1",
    "@haul-bundler/preset-0.60": "0.18.0",

Instead, I now have

   "react-native-webpack-toolkit": "1.0.1-3",
    "webpack": "5.22.0",
    "terser-webpack-plugin": "~5.1.1",
    "babel-loader": "8.2.2"

The babel.config.js in the root of the app used to look like this:

module.exports = {
  presets: ["module:@haul-bundler/babel-preset-react-native"]
};

Now, it looks like:

module.exports = {
  presets: ["module:metro-react-native-babel-preset"]
};

For what it is worth, our monorepo already has @babel/runtime and it is on version 7.13.10. I am only getting these errors after attempting to remove Haul. If I were to only make the changes mentioned to make react-native-webpack-toolkit work and left all changes that were made to make Haul work for our app, it seems to work. Any idea on what I am missing?

[zamotany]

First, update react-native-webpack-toolkit to 1.1.0. Is @babel/runtime installed inside a package or in the monorepo root?? Is @babel/runtime explicitly defined as dependency in package.json? AFAIK this issue happens also with Metro.

Also can you describe your monorepo structure, which dependency manager are you using (yarn, npm etc)? Are you using Lerna? I'll try to recreate your project or you can create it and send me a link to a repro project.

Resolution errors like this usually suggest that's webpack cannot find or it's not configured to find the module.

[woodrufs]

I updated react-native-webpack-toolkit to 1.1.0 but no luck with just that.
We have two apps in our mono repo. One is an app that is just for storybook while the other is our actual application. Both of these reference @babel/runtime: "7.13.10" as a devDependency. Here is a snippet from our devDependencies list for our main app:

    "@babel/core": "7.13.10",
    "@babel/runtime": "7.13.10",
    "@react-native-community/eslint-config": "2.0.0",
    "@rushstack/heft": "0.25.1",
    "@storybook/react": "5.3.21",
    "@strmbrkr/common-rig": "workspace:*",
    "@strmbrkr/eslint-config": "workspace:*",
    "@types/heft-jest": "1.0.2",
    "@types/jest": "26.0.20",
    "@types/node": "14.14.35",
    "@types/react-native": "0.63.43",
    "@types/react-test-renderer": "17.0.1",
    "@types/react": "16.8.0",
    "babel-jest": "26.6.3",
    "babel-loader": "8.2.2"
    "eslint": "7.22.0",
    "jest": "26.6.3",
    "metro-react-native-babel-preset": "0.65.2",
    "react-native-webpack-toolkit": "1.1.0",
    "react-test-renderer": "17.0.1",
    "terser-webpack-plugin": "~5.1.1",
    "typescript": "4.2.3",
    "webpack": "5.22.0"

A little bit about our structure - We are using rush to manage our monorepo and pnpm as our dependency manager. I wish I could easily send you a repo to reproduce it in, but this is for a company project so I can't link to the repo. If I can't provide enough valuable information for us to figure it out, I will try and create a repo to reproduce this.

[zamotany]

The repro repository would be awesome, but before that there's one thing you can try: https://webpack.js.org/configuration/resolve/#resolvealias and force Webpack to resolve @babel/runtime to wherever it is.

[woodrufs]

@zamotany, I didn't have any luck with the resolve alias. I did create a repo where I hope you can reproduce the issue. The repo is located here. Please use the following steps to reproduce the issue as I have only set this up to happen with this specific build. Also, please note that if you go back a commit you can see that it works when haul and react-native-webpack-toolkit are installed and both are being used. I really appreciate all your time and help with this. Thank you!

[zamotany]

@woodrufs Thanks for the repro project. Unfoortunatelly, I got errors when running rush build:

==[ FAILURE: 2 projects ]======================================================

--[ FAILURE: @strmbrkr/plant-floor ]-------------------------[ 4.34 seconds ]--

Error: Failed to load config "plex-standards" to extend from.
Referenced from: /Users/zamotany/Documents/react-native-webpack-toolkit-babel-error/tools/eslint-config/index.js

--[ FAILURE: @strmbrkr/storybook ]---------------------------[ 9.87 seconds ]--

Error: Failed to load config "plex-standards" to extend from.
Referenced from: /Users/zamotany/Documents/react-native-webpack-toolkit-babel-error/tools/eslint-config/index.js


Projects failed to build.

Regardless, I did try to run rushx start and successfully built the (iOS) bundle.

[woodrufs]

@zamotany - Sorry about that. I obviously missed something that my machine still picked up. I am looking into it. The bundle does build correctly. The error occurs once the app is loaded. Looking into this now.

[zamotany]

I see, so I misunderstood the problem.

So you can build the bundle without any Haul-related dependencies but it fails to run on simulator/device?

[woodrufs]

That is correct. Sorry, I am struggling to get through some eslint errors to make rush build work for you... I think if you opened up a simulator and ran rushx ios-test, you should still be able to see what I am seeing.

[zamotany]

So I just ran rushx ios-test and rushx start and I could see the login screen w/o any errors. 🤔

[woodrufs]

@zamotany,
Here is a bit more info I have put together for this repo to reproduce what I am seeing:

• Commit 3758f4e - This commit reverts back to using Haul and has no references to react-native-webpack-toolkit. Using rush update followed by rush build works. rushx start and then rushx ios-test works as well. The app builds and runs OK
• Commit fe653e1 is where I install react-native-webpack-toolkit and configure it. rush build breaks. Using rush build --verbose, I noticed that adding a webpack.config.js triggers rush's heft task for webpack. This is using an older version of webpack which may be part of the issue? I can't find a way to disable it nor find a way to put my webpack.config.js in a different folder and have npx react-native webpack-start look at a different location for webpack.config.js
  • Just to take note - Make sure you run rush update after switching from the previous commit. This will make sure all references to Haul are removed. You want to use rush update instead of yarn install or npm install . After performing those steps and running rushx start and rushx ios-test, I get the same @babel/runtime errors I was getting in the other repository I am working on:

✖ [19:23:14.554Z][LoggerPlugin] Error in "../../libraries/components/lib/ToastItem/ToastItem.js": Module not found: Error: Can't resolve '@babel/runtime/helpers/getPrototypeOf' in '/Users/swoodruff/dev/personal/rn-monorepo-webpack/libraries/components/lib/ToastItem'
✖ [19:23:14.554Z][LoggerPlugin] Error in "../../libraries/components/lib/helpers/withValidTableRowParams.hoc.js": Module not found: Error: Can't resolve '@babel/runtime/helpers/interopRequireDefault' in '/Users/swoodruff/dev/personal/rn-monorepo-webpack/libraries/components/lib/helpers'
✖ [19:23:14.554Z][LoggerPlugin] Error in "../../libraries/components/lib/helpers/withValidTableRowParams.hoc.js": Module not found: Error: Can't resolve '@babel/runtime/helpers/extends' in '/Users/swoodruff/dev/personal/rn-monorepo-webpack/libraries/components/lib/helpers'

• Commit d5935f1 is where I then attempted to re-add the alias you recommended I try for @babel/runtime. After re-running rushx start and then rushx ios-test, I only see the orange splash screen. This screen looks similar to the login screen, but the splash screen does not have the login button on it. I look at the console, and I still see errors like I do above in the previous bullet point.

So, two remaining thoughts:

1. I can't seem to run rush build after installing the library and including the required webpack.config.js. I didn't catch this at first - Sorry.
2. To respond to your last comment, I am able to see the login screen when I still have all of Haul's libraries installed and am in a state where I think I using both haul and react-native-webpack-toolkit. As soon as I remove haul to only use react-native-webpack-toolkit, like as I did in the most recent commit to the repository we are reproducing the issue in, the app no longer works. It hangs at the splash screen on my end and the webpack server complains about @babel/runtime.

[zamotany]

Thanks for the info, I'll take a closer look at it again tomorrow. FYI you can actually put Webpack config in a subdirectory - RNWT has the same resolution as Webpacka CLI: https://www.github.com/callstack/react-native-webpack-toolkit/tree/main/src%2Fcommands%2Futils%2FgetWebpackConfigPath.ts

[woodrufs]

Wow, I am embarrassed to admit how long I was overlooking how easy it is to get webpack to look at a different folder. I didn't realize I should put it in a folder specifically called .webpack. That fixes thought 1 from my previous comment. Thanks again, have a nice night!

[woodrufs]

Hey @zamotany,
Any chance you have been able to come back and look at this?

[zamotany]

Not yet, can you remind me which issue is still happening?

[woodrufs]

@zamotany,
Here is the comment that is most relevant with a few notes afterwards.

@zamotany,
Here is a bit more info I have put together for this repo to reproduce what I am seeing:

• Commit 3758f4e - This commit reverts back to using Haul and has no references to react-native-webpack-toolkit. Using rush update followed by rush build works. rushx start and then rushx ios-test works as well. The app builds and runs OK

• Commit fe653e1 is where I install react-native-webpack-toolkit and configure it. rush build breaks. Using rush build --verbose, I noticed that adding a webpack.config.js triggers rush's heft task for webpack. This is using an older version of webpack which may be part of the issue? I can't find a way to disable it nor find a way to put my webpack.config.js in a different folder and have npx react-native webpack-start look at a different location for webpack.config.js

  • Just to take note - Make sure you run rush update after switching from the previous commit. This will make sure all references to Haul are removed. You want to use rush update instead of yarn install or npm install . After performing those steps and running rushx start and rushx ios-test, I get the same @babel/runtime errors I was getting in the other repository I am working on:

✖ [19:23:14.554Z][LoggerPlugin] Error in "../../libraries/components/lib/ToastItem/ToastItem.js": Module not found: Error: Can't resolve '@babel/runtime/helpers/getPrototypeOf' in '/Users/swoodruff/dev/personal/rn-monorepo-webpack/libraries/components/lib/ToastItem'
✖ [19:23:14.554Z][LoggerPlugin] Error in "../../libraries/components/lib/helpers/withValidTableRowParams.hoc.js": Module not found: Error: Can't resolve '@babel/runtime/helpers/interopRequireDefault' in '/Users/swoodruff/dev/personal/rn-monorepo-webpack/libraries/components/lib/helpers'
✖ [19:23:14.554Z][LoggerPlugin] Error in "../../libraries/components/lib/helpers/withValidTableRowParams.hoc.js": Module not found: Error: Can't resolve '@babel/runtime/helpers/extends' in '/Users/swoodruff/dev/personal/rn-monorepo-webpack/libraries/components/lib/helpers'

• Commit d5935f1 is where I then attempted to re-add the alias you recommended I try for @babel/runtime. After re-running rushx start and then rushx ios-test, I only see the orange splash screen. This screen looks similar to the login screen, but the splash screen does not have the login button on it. I look at the console, and I still see errors like I do above in the previous bullet point.

So, two remaining thoughts:

1. I can't seem to run rush build after installing the library and including the required webpack.config.js. I didn't catch this at first - Sorry.
2. To respond to your last comment, I am able to see the login screen when I still have all of Haul's libraries installed and am in a state where I think I using both haul and react-native-webpack-toolkit. As soon as I remove haul to only use react-native-webpack-toolkit, like as I did in the most recent commit to the repository we are reproducing the issue in, the app no longer works. It hangs at the splash screen on my end and the webpack server complains about @babel/runtime.

You then showed me how I was not using the alternate webpack config paths appropriately. After I moved the webpack config to a subdirectory to prevent rush from consuming the webpack config file, rush would then build the project successfully. This addressed point 1 in the comment above. Point 2 in this comment is still an issue. The app will not load after I remove haul from the project.

[woodrufs]

@zamotany, if you're still having issues reproducing this in the repo I provided, I can try and create a different repository with the issue. I tried again this morning, and I am still getting the same error. Not trying to be lazy.. Hoping I can help you out with this as your tools are very valuable and appreciated! 😃

[zamotany]

So @woodrufs, I haven't had time to look more into it, but if you could create more minimalistic/barebone repro project, that would be awesome. I suspect this has something to do with the tooling - rush and pnpm, so the repro project should use that as well.

[woodrufs]

@zamotany, I totally get it. I suspect it is the tooling as well. I will try and take some time hopefully within the week to streamline this. A lot of these tools are new to me still, so I am still getting my bearings straight. I think I can give you something that is a little easier to work with. Thank you for the prompt reply.

[FrederickEngelhardt]

@zamotany any headway with things?

[zamotany]

@FrederickEngelhardt Unfortunately no. I don't have experience with this tooling and I'm missing a barebone repro project.

[RafikiTiki]

Closing this due to inactivity, if you need more help @woodrufs feel free to reopen or ping me :)