Unable to run my ACE app after deployment

Hello !
i developed an app with ACE using React + JSX , when i run my app locally with ngrok it works as expected , now i deployed my app on Heroku and i installed it on my instance but i can’t run it , i got this when i inspect the Heroku logs :

2021-01-11T08:44:24.301934+00:00 app[web.1]: Error: Could not load the component dashboard.jsx. Did you run `npm build to compile your jsx files?
2021-01-11T08:44:24.301935+00:00 app[web.1]: at View.ssrEngine [as engine] (/app/server-side-rendering.js:65:25)
2021-01-11T08:44:24.301936+00:00 app[web.1]: at View.render (/app/node_modules/express/lib/view.js:135:8)
2021-01-11T08:44:24.301936+00:00 app[web.1]: at tryRender (/app/node_modules/express/lib/application.js:640:10)
2021-01-11T08:44:24.301937+00:00 app[web.1]: at Function.render (/app/node_modules/express/lib/application.js:592:3)
2021-01-11T08:44:24.301937+00:00 app[web.1]: at ServerResponse.render (/app/node_modules/express/lib/response.js:1012:7)
2021-01-11T08:44:24.301938+00:00 app[web.1]: at /app/routes/index.js:14:13
2021-01-11T08:44:24.301938+00:00 app[web.1]: at Layer.handle [as handle_request] (/app/node_modules/express/lib/router/layer.js:95:5)
2021-01-11T08:44:24.301939+00:00 app[web.1]: at next (/app/node_modules/express/lib/router/route.js:137:13)
2021-01-11T08:44:24.301939+00:00 app[web.1]: at requestHandler (/app/node_modules/atlassian-connect-express/lib/middleware/request.js:122:5)
2021-01-11T08:44:24.301940+00:00 app[web.1]: at /app/node_modules/atlassian-connect-express/lib/middleware/authentication.js:312:9
2021-01-11T08:44:24.301940+00:00 app[web.1]: at processTicksAndRejections (internal/process/task_queues.js:97:5)

this is my route file

export default function routes(app, addon) {
   

    app.get('/', (req, res) => {
        res.redirect('/atlassian-connect.json');
    });

   
    app.get('/myapp',  addon.authenticate(), (req, res) => {
     
        res.render(
          'dashboard.jsx',
          {
            title: 'Atlassian Connect'
           
          }
        );

    });
}

from app.js file :

const devEnv = app.get('env') === 'development';
app.use(morgan(devEnv ? 'dev' : 'combined'));

// Configure Handlebars
const viewsDir = path.join(__dirname, 'views');
const handlebarsEngine = hbs.express4({partialsDir: viewsDir});
app.engine('hbs', handlebarsEngine);
app.set('view engine', 'hbs');
app.set('views', viewsDir);

// Configure jsx (jsx files should go in views/ and export the root component as the default export)
addServerSideRendering(app, handlebarsEngine);

any help about what i m missing please

As the first log line says, did you run npm build to compile your jsx files to .js files, and did include those files in what you deployed to Heroku?

@jhazelwood thank you for your response

did you run npm build to compile your jsx files to .js files

yes i did
this screenshot from heroku build log:

How odd. For whatever reason, server-side-rendering.js is unable to require views/node/dashboard.js (the .jsx file compiled for node) as a module. I recommend adding some logging to that file around line 43 to see what path it’s trying to require. You could also try hard-coding the path to the server-side react template file, e.g. ./node/dashboard.js to see if that works.

@hamzabouallegue
I have the same problem.
Did you resole it? Can you share with me.
Thank you very much!

I upgrade my nodejs’s version from 12 to 18. Then it works.

1 Like