Comments (25)
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 [email protected]
.
from repack.
@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.
from repack.
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
from repack.
Closing this due to inactivity, if you need more help @woodrufs feel free to reopen or ping me :)
from repack.
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.
from repack.
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?
from repack.
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.
from repack.
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.
from repack.
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.
from repack.
@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!
from repack.
@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.
from repack.
@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.
from repack.
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?
from repack.
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.
from repack.
So I just ran rushx ios-test
and rushx start
and I could see the login screen w/o any errors. 🤔
from repack.
@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
. Usingrush update
followed byrush build
works.rushx start
and thenrushx 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. Usingrush build --verbose
, I noticed that adding awebpack.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 mywebpack.config.js
in a different folder and havenpx react-native webpack-start
look at a different location forwebpack.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 userush update
instead ofyarn install
ornpm install
. After performing those steps and runningrushx start
andrushx ios-test
, I get the same@babel/runtime
errors I was getting in the other repository I am working on:
- Just to take note - Make sure you run
✖ [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-runningrushx start
and thenrushx 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:
- I can't seem to run
rush build
after installing the library and including the requiredwebpack.config.js
. I didn't catch this at first - Sorry. - 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
andreact-native-webpack-toolkit
. As soon as I removehaul
to only usereact-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
.
from repack.
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!
from repack.
Hey @zamotany,
Any chance you have been able to come back and look at this?
from repack.
Not yet, can you remind me which issue is still happening?
from repack.
@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
. Usingrush update
followed byrush build
works.rushx start
and thenrushx ios-test
works as well. The app builds and runs OKCommit fe653e1 is where I install
react-native-webpack-toolkit
and configure it.rush build
breaks. Usingrush build --verbose
, I noticed that adding awebpack.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 mywebpack.config.js
in a different folder and havenpx react-native webpack-start
look at a different location forwebpack.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 userush update
instead ofyarn install
ornpm install
. After performing those steps and runningrushx start
andrushx 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-runningrushx start
and thenrushx 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:
- I can't seem to run
rush build
after installing the library and including the requiredwebpack.config.js
. I didn't catch this at first - Sorry.- 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
andreact-native-webpack-toolkit
. As soon as I removehaul
to only usereact-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.
from repack.
@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! 😃
from repack.
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.
from repack.
@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.
from repack.
@zamotany any headway with things?
from repack.
@FrederickEngelhardt Unfortunately no. I don't have experience with this tooling and I'm missing a barebone repro project.
from repack.
Related Issues (20)
- [ScriptManager] Failed to load script: [ScriptDownloadFailure] HOT 1
- JWTDecode version conflicts with other package HOT 1
- How to set repack in react 18.2.0 and react-native 0.73.6 HOT 2
- Adjust the description of `start` and `bundle` commands HOT 1
- Release App Crashing on Codepush update Install HOT 9
- Unable to start server HOT 11
- build .apk file ??? HOT 2
- How to config repack to run index.js code when run ScriptManager.loadScript in native side HOT 1
- Bug in `invalidateScripts` leading to app crash HOT 3
- Add docs for `@callstack/repack-init`
- Unable to find MiniApp.container.bundle for iOS in compilation assets HOT 3
- Apk bundling error HOT 12
- has anyone integrated @storybook/react-native v7.x successfully with re.pack HOT 1
- [Docs] Module Resolution HOT 1
- Vendored Device class is broken when it comes to debugging HOT 3
- [Docs] Tree-shaking benchmark of RN app HOT 1
- Brotli decompression HOT 1
- RePack with rn_nodeify HOT 2
- Apk not launching HOT 5
- ERROR while setting up code signing HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from repack.