No Bundle URL Present

I’m trying to complete my first tutorial here https://www.raywenderlich.com/485-react-native-tutorial-building-ios-apps-with-javascript and I’m having a rough time.

23

I’ve navigated to the file I’d like to use as my app directory and I’ve run “react-native init PropertyFinder”

I’ve tried googling this exact problem and from what I can tell the solutions seem to all be different. I’m very new.

Links I’ve reviewed with confusion:
https://stackoverflow.com/questions/41351739/main-jsbundle-foundation-and-security-missing-in-the-project-causing-error

https://github.com/facebook/react-native/issues/12754

I tried this solution here:
https://stackoverflow.com/questions/42610070/what-is-the-meaning-of-no-bundle-url-present-in-react-native

I then paired it with this solution here:
https://www.youtube.com/watch?v=Pd3Qe4ngeUY

Which ended up creating content in the main.jsbundle file however when I continued the tutorial and updated the app.js file then refreshed, the simulator did not reflect any changes. I then used command f in the random filled main.jsbundle to find the message that was displayed on the simulator and I could change the message from there however that is not constructive to the tutorial as I’d like to be able to follow along.

I’m willing to read, I’m motivated, I’m just burnt out for the night on this one. Any help is wonderfully appreciated.

Update: When I download the project directly, I’m still left without a main.jsbundle.

Respectfully,
Dave

@cabernathy Can you please help with this when you get a chance? Thank you - much appreciated! :]

@taylordigital that’s bad that you’re getting stuck at the very beginning. This is one of those errors that is hard to debug, especially as it works for me. (I just tried)

Try running the project using the following command:

react-native run-ios

Otherwise, looking for help in a forum like Stackoverflow may be better as what you’re seeing isn’t specific to this tutorial. There were a lot of different answers in the last Stackoverflow post you shared. Did you try them all?

By the way, I couldn’t play the video to see the solution. What did you run to get the bundle built?

1 Like

@cabernathy, thanks for taking the time to respond.

In terms of the unplayable video, the creator has apparently deleted his entire account. I’m unsure why. Thankfully I wrote the instructions down and emailed them to myself.

The instructions were:
Delete the empty main.jsbundle
create a new empty file, title it main.jsbundle
Open terminal
go to the directory of app
run comment:
react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios

main.jsbundle should populate in Xcode. Run the app, app should now display properly. However this did not work for me. The main.jsbundle populated with a lot of stuff, but the app did not update when I continued throughout the tutorial.

Mistakes were made: I made the mistake of installing Node before homebrew. The tutorial first links Node.js and says “time to get it” so I got excited and downloaded it before moving on to the next step… This is where I feel my problems started. I have NO IDEA how to uninstall or start over with homebrew. I wish I would have read the full documentation prior to installing anything but I got excited.

Can I pay someone to go over this with me? I need to learn react and have this working on my specific macbook pro and this one issue is becoming extremely time consuming and discouraging. I’m very thankful for any input from the community and several podcasts have spoken very highly of RayWenderlich tutorials. I’m going to keep searching and I’ll post back here if I find a solution.

@cabernathy Do you have any feedback about this? Thank you - much appreciated! :]

Ok. I decided to do something a bit drastic but it worked. I backed up my all my files and then restored my macbook pro to factory settings. I then reinstalled the OS and followed the tutorial step by step other than adding a step directly after installing homebrew. I used brew doctor and I used it at least a dozen times. Each time presenting another warning. I would target each warning until fixed. Most of the warnings were telling me something needed to be updated. So, after many updates and restarts, I have finally made it to running the app successfully. I can now move on to part 2. Thanks for your time!

1 Like

@taylordigital Really glad you fixed it! :]

1 Like

@cabernathy

Can we dive deeper into the section called Adding Navigation? I’m getting an error when I replace the App class definition with the given code.

What does the final App.js file look like after this step before we build out the search page? I’m getting an error any time I try to replace this line:

export default class App extends Component {

with

class SearchPage extends Component<{}> {

I’m not understanding the instructions fully. Thank you for any input.

edit: I see at the bottom of the tutorial you offer the complete project. Can you still explain what you did to replace the first line with the second? Do I completely cut it out? Thanks for holding my hand on this one.

@cabernathy Can you please help with this when you get a chance? Thank you - much appreciated! :]

1 Like

I’m happy to explain @taylordigital. Once again, thanks for being patient and going to such lengths to get to this stage. I’ve often also got stuck with Homebrew vs. other methods of installing Node.js. There are many ways to get into a bind but I’m happy you got past that hurdle.

Before the step you’re asking about, you should have this code in the file:

export default class App extends Component<{}> { 
   // A bunch of stuff
}

Change the first line, so essentially you have:

class SearchPage extends Component<{}> {
  // A bunch of stuff
}

You’re essentially swapping out the previous App class with a SearchPage class temporarily.

1 Like

@cabernathy

I’m still getting an error. Can you check that I’m doing this correctly? Everything works perfectly until the Adding Navigation step.

Edit: I’ve taken a screencast recording of everything I did to get to this point if you’re interested in me posting. However, it will be about 45 minutes long without editing. I will edit it down as long as you trust that I followed the instructions verbatim haha!

17%20AM

@cabernathy Can you please help with this when you get a chance? Thank you - much appreciated! :]

Thanks for sharing the screenshot. It helped. You’ve embedded a class within the other. The App class is inside the SearchPage class, which is incorrect. Pull them out separately.

1 Like

@cabernathy: What does this look like? I’m doing as you stated and still getting an error.

Edit: This is clearly a different error now, so I think we can celebrate getting past the previous one! Thank you for the added guidance! :):smile:

I’ve now deleted the entire project (100th time) and starting over but this has been wonderful repetitious practice! haha!

Can you send me a screenshot of your code at this step and a shot of the simulator? The error on the simulator states NavigatorIOS is deprecated and even provides a link! Navigating Between Screens · React Native

Thank you for your time!56%20AM

When I visit the link and run npm install --save react-navigation or yarn add react-navigation I get over 20 warnings about unmet peer dependencies.

As a new user I can only place one image per post.

When I visit the link and run npm install --save react-navigation or yarn add react-navigation I get over 20 warnings about unmet peer dependencies.

11%20AM

I navigated the terminal to my react project file PropertyFinder and performed the following steps here:
https://reactnavigation.org/docs/en/getting-started.html

I did steps 1 through 3, the 4th appears to be only for android right now. I still get the same error. I closed bundler, simulator, terminal, and xcode and reopened the project to make sure I was getting a fresh attempt.

@cabernathy Do you have any feedback about this? Thank you - much appreciated! :]

1 Like

It looks like they’ve removed React Navigation. You may want to run this tutorial with the version it was written for at the time (0.50).

react-native init PropertyFinder --version react-native@0.50.0

This topic was automatically closed after 166 days. New replies are no longer allowed.