Question 237006 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – problems with npm run build

My projects runs correctly while i am using npm run dev, but when i finished it, and use the command npm run build all the relatives routes were incorrect at dist folder (files routes like .js and .css, images, etc), and my app doesnt’t start by the "/".
pd: I’m using react-router dom.

I change all relatives routes but i’cant get it start for the root, the app start for the route: dist/index.html

I try to change the .js file in the dist folder but has a lot of code and I don’t know what i must change

Tags:

2

Answers


  1. 0

    Sorry for posting this as an answer, I can’t post it as a comment because I do not have enough reputation. With only the provided information I can advise you to check your base/basename in your vite config and in the browser props.

    If you are using BrowserRouter from react-router-dom, make sure that you have configured the basename correctly, both in your vite.config.js and where you render the BrowserRouter in your code. The 2 values should match.

    Example:

    App

    import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter basename="/my-app">
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

    vite.config.js

    export default {
  base: '/my-app/',
  ...other config options
};
    Login or Signup to reply.
  2. 0

    -Check your package.json file to make sure that the "homepage" field is set to the correct URL where your app will be hosted. For example, if you plan to host your app at https://example.com/my-app/, then your "homepage" field should be set to "https://example.com/my-app/&quot;.

    {
  "name": "my-app",
  "homepage": "https://example.com/my-app/",
  // ...
}

    -Make sure that your BrowserRouter component in index.js has the correct basename prop set to the same URL as your "homepage" field in package.json. For example:

    import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter basename={process.env.PUBLIC_URL}>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

    -Check that your relative paths in your code are correct and relative to the root of your app. For example, if you have an image file located at public/images/logo.png, you can reference it in your code like this:

    <img src={`${process.env.PUBLIC_URL}/images/logo.png`} alt="Logo" />

    -If you are still having issues with relative paths, you can try using absolute paths instead. One way to do this is by creating a src/config.js file with the following content:

    const PUBLIC_URL = process.env.PUBLIC_URL;

export const APP_ROUTES = {
  HOME: `${PUBLIC_URL}/`,
  ABOUT: `${PUBLIC_URL}/about`,
  // ...
};

    -Then, you can import this file in your components and use the absolute paths like this:

    import { APP_ROUTES } from '../config';

<Link to={APP_ROUTES.ABOUT}>About</Link>

    I hope these steps help you resolve your issue with relative paths in your React project!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search