4

I have been experiencing node issues for resolving my path for my Create React App.

Issue:

Assets (chunk.js) files are resolving to relative path rather than absolute path.

When I visit the website from root folder (example.com) and hit the /games/ URL it's working fine. However, if I refresh, it's appending /games into the URL.

For example:

http://movies-finder.surge.sh/movies/419704

^ Visit the page and refresh the page.

Correct Link:

https://example.com/static/js/main.b9f8ee12.chunk.js

Incorrect Link: (This is happening when user Refreshes the page)

https://example.com/games/static/js/main.e50e1c49.chunk.js

I just want to make sure, I don't encounter /games when my assets are being accessed.

(There is no need for /games/) hence broken :(

Folder Structure:

-/
 - server.js
 - public
    - index.html
 - package.json
 - Build

Package.json:

{
  "name": "games-finder",
  "version": "0.1.2",
  "private": true,
  "homepage": ".",
  "proxy": "http://localhost:3001/",
  "dependencies": {
    // dependencies
  },
  "devDependencies": {
    // dev dependencies for the project.
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "server": "node-env-run server.js --exec nodemon | pino-colada",
    "dev": "run-p server start",
    "heroku-dev": "run-p server start"
  }
}

server.js:

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = process.env.PORT || 3001;
const path = require('path');
app.use(bodyParser.urlencoded({ extended: false }));
app.use(pino);

app.get('/api/greeting', (req, res) => {
  const name = req.query.name || 'World';
  res.send(JSON.stringify({ greeting: `Hello ${name}!` }));
});

if (process.env.NODE_ENV === 'production') {

  // Serve any static files
  app.use(express.static('build'));

  // Handle React routing, return all requests to React app
  app.get('*', (req, res) => {
   res.sendFile(path.resolve(__dirname, 'build', 'index.html'));
  });
}

app.listen(port, () => console.log(`Listening on port ${port}`));

Please help me identify the issue. I've spent like couple days trying to debug the issue.

I just want to make sure, I don't encounter /games when my assets are being accessed.

1
  • Please share a github repo. It's too hard to narrow down the issue without a mcve. Commented Jun 10, 2020 at 2:07

1 Answer 1

2
+50

This happens because of "homepage": "." in your package.json, try to remove this line.

Detailed description here https://stackoverflow.com/a/58508562/9173730

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.