-1

Thanks in advance for helping.

I am trying to import a react component named "App" but got error in browser. May i please get your help to check & advise?

My app works when using the "npm start" command. But I got below error when hosting app on heroku.

Error from chrome browser:

Uncaught ReferenceError: App is not defined
at <anonymous>:20:33
at i (babel.min.js:24:29679)
at r (babel.min.js:24:30188)
at e.src.n.<computed>.l.content (babel.min.js:24:30503)
at XMLHttpRequest.n.onreadystatechange (babel.min.js:24:29946)

Index.js : I am using requireJS syntax to import the modules. I have added the requireJS script tag in "head" section of my index.html.

define(function (require) {
    var React = require('react');
    var createRoot = require('react-dom/client');
    var App = require('./form.js');
});


const container = document.getElementById('app');
const root = createRoot(container);
root.render(<App />);     <---- error occurs here

form.js : I haven't included code in function "App" since too long.

define(function (require) {
  var React = require('react');
  var useState = require('react');
  var axios  = require('axios');
  var MapContainer = require('react-leaflet');
  var TileLayer = require('react-leaflet');
  var Marker = require('react-leaflet');
  var Popup = require('react-leaflet');

});


function App() {
////code goes here////
}

export default App;
Jackie Chan
  • 1
  • 2
  • Only reference `App` (and other variables defined only inside the callback) *inside* the callback, because that's where their scope lies – CertainPerformance May 05 '22 at 23:46
  • Hi Certain, thanks for reply. Sorry i am newbie to Javascript. May i pls ask how should i amend above code so that i am referencing App inside the callback? – Jackie Chan May 06 '22 at 15:31
  • Move the part that references App - that is `function App() {` - inside the (only) callback there is – CertainPerformance May 06 '22 at 15:43
  • Hi Certain, a callback means a function within function right? But in above form.js, there is only the App function? – Jackie Chan May 06 '22 at 17:15
  • Sorry to bother again. Is it possible to give an example? To be honest, i am not sure why moderator closed my post saying is duplicate. Above is a simple React app and i really don't see how it is a problem with variable scope... – Jackie Chan May 07 '22 at 07:37

0 Answers0