Parcel: JS and CSS files not found after parcel build

[haquezameer]

🐛 bug report

parcel build index.html generates the dist folder with all the files, but launching index.html from inside the dist results in can not find css and the js files.

🎛 Configuration (.babelrc, package.json, cli command)

.babelrc:-

{
  "presets": [
        "env",
        "react"
    ]
}

package.json

{
"name": "referraly-frontend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "parcel index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "material-ui": "^0.20.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-router-dom": "^4.2.2",
    "typeface-roboto": "0.0.45"
  },
  "devDependencies": {
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "parcel-bundler": "^1.3.1"
  }
}

cli command : parcel build index.html

🤔 Expected Behavior

Produces the build folder with the correct bundles instead of reporting missing css and js files in the browser console.

😯 Current Behavior

Errors in browser console on launching index.html from the build folder dist.

💁 Possible Solution

change src in script and link tags to remove errors.
eg:- change src="/dist/cfb47e75612b85db2daa42a5bbad3b67.js" to
src="./cfb47e75612b85db2daa42a5bbad3b67.js"

But still, only half of the page is displayed

🔦 Context

Trying to produce the production build for a test deployment.

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | ^1.3.1
| Node | v8.6.0
| npm/Yarn | 5.5.1
| Operating System | Ubuntu 16.04

[DeMoorJasper]

Change "start": "parcel index.html"
to "start": "parcel index.html --public-url /"

[haquezameer]

@DeMoorJasper still does not solves the issue.
npm run start now gives a 404 error and parcel build index.html still results in css and js file not found.
Please reopen the issue if you think its a bug. Also, please comment if any additional info is required. :+1:

[DeMoorJasper]

ow my bad, i misread the start command.
U should add a build command like: parcel build index.html --public-url /
And change the start command back to what u originally had...

[haquezameer]

parcel build index.html --public-url / results in the same errors on launching index.html.

[DeMoorJasper]

Sorry i forgot a dot try parcel build index.html --public-url ./
this is also documented on the doc site: https://parceljs.org/production.html

[haquezameer]

Ok @DeMoorJasper that solves the wrong src, sorry might have skipped that part when going through docs :sweat_smile: However, getting the following errors now:

I think that is not a parcel issue? Since, I am using react-router and history does not work with file:// url's maybe thats why I am getting those errors?

[DeMoorJasper]

This is a react-router issue, just has to do with filesystem not being a valid url, it should work fine if u test it on an apache,nginx,.. server

[haquezameer]

@DeMoorJasper Thanks for helping :smile:

[grrunnz]

But the default for --public-url should be ./ instead of ./dist/ since the index.html is in the dist folder.

[IsaacHub]

Sorry i forgot a dot try parcel build index.html --public-url ./
this is also documented on the doc site: https://parceljs.org/production.html

Now it's right here https://parceljs.org/cli.html#set-the-public-url-to-serve-on

[avalanche1]

Sorry i forgot a dot try parcel build index.html --public-url ./
this is also documented on the doc site: https://parceljs.org/production.html

@DeMoorJasper, I'm sorry, but I don't see that in the docs. So I had to google this issues :(

[Nagasai20]

Can i know what is the solution for this ? why it was closed ?

[TheOddler]

Can i know what is the solution for this ? why it was closed ?

For me the sollution seemed to be to add --public-url ./ to my parcel commands. So: parcel src/index.js --target electron --public-url ./

[DRocksCoding]

Can i know what is the solution for this ? why it was closed ?

For me the sollution seemed to be to add --public-url ./ to my parcel commands. So: parcel src/index.js --target electron --public-url ./

This worked for me too.
I was getting 404 files not found when dropping the dist folder content on my website server.
I changed my build commands like you said:
"scripts": { "dev": "parcel src/index.html", "build": "parcel build src/index.html --public-url ./" }