question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. Itย collects links to all the places you might be looking at while hunting down a tough bug.

And, if youโ€™re still stuck at the end, weโ€™re happy to hop on a call to see how we can help out.

JS and CSS files not found after parcel build

See original GitHub issue

๐Ÿ› 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

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:3
  • Comments:15 (4 by maintainers)

github_iconTop GitHub Comments

52reactions
DeMoorJaspercommented, Jan 2, 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

9reactions
DeMoorJaspercommented, Jan 2, 2018

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

parcel did not inject js and css code to the resulted html
I expected the output html to include the code within the js,css files. But the result was that it looks like it only...
Read more >
CSS - Parcel
To use CSS modules, create a file with the .module.css extension, and import it from a JavaScript file with a namespace import. Then,...
Read more >
CLI - Parcel
The parcel CLI is the most common way to use Parcel. It supports three different commands: serve, watch, and build.
Read more >
JavaScript - Parcel
The most traditional file type for web bundlers is JavaScript. Parcel supports both CommonJS and ES6 module syntax for importing files. It also...
Read more >
Building a web app with Parcel
Next, you can start adding dependencies to your HTML file, such as a JavaScript or CSS file. For example, you could create a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found