parcel: JS and CSS files not found after parcel build

🐛 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. js_not_found

💁 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 half_page

🔦 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

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 3
Comments: 17 (4 by maintainers)

Most upvoted comments

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

+57

DeMoorJasper on Jan 2, 2018

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

DeMoorJasper on Jan 2, 2018

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

grrunnz on Jan 24, 2018

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

This link should now be -> https://parceljs.org/features/production/

Sambuxc on Nov 20, 2023

I couldn’t properly deploy a project (parcel bundler) on gh-pages. For me it was completely new subject, but finally I have found this post and now the code works just fine, thanks!

 "scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html --public-url ./",
    "deploy": "rm -rf dist/ && npm run build && gh-pages -d dist"
  },

SzymonRojek on Mar 30, 2021

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

haquezameer on Jan 2, 2018