0

How can I get Parceljs to work with react? I'm using their example from their repo but it wont work.

https://github.com/parcel-bundler/examples

After I run 'npm start' it works and renders the page on localhost as expected but it will not work when I click the outputted file in /dist. So the page is just blank when I try to load it from dist/index.html. I also tried the production command from their website so it would stop watching the files but that also resulted in the dist folder loading a blank page.

How can I do this? Any help would be great. Essentially I want to be able to access the buddled files without localhost.

Thank you.

nameless
  • 59
  • 3
  • 9

1 Answers1

0

You're running the index files locally and the index.html is expecting the the css file and the js file to be at the root. When you're opening your file locally it is trying to find under C://

To get around this issue you have to edit the index.html unfortunately after you have compiled it. Here are three ways to get over the issue, method three focuses on fixing your issue but I would recommend methods one and two.

Method One

  • Install http-server by running npm install -g http-server
  • Go to your project dist folder via the terminal / cmd
  • Type http-server
  • Your project will open up in your default web browser

Method Two

  • Upload your application to a web server
  • Your application should run

Method Three (Not recommended)

  • Add the NPM script "production": "parcel build index.html"
  • Run production build by cd to your project and type npm run production
  • Go into your dist folder and open up the index.html in an editor
  • Edit the css file path from href="/main.--------.css" to href="./main.--------.css">
  • Edit the js file path from src="/main.--------.js" to href="./main.--------.js">

(NOTE: The React Add-on will not detect React when it is being opened locally, but the application will work fine.)

Win
  • 5,498
  • 2
  • 15
  • 20
  • Thank you! How come this isn't in the docs or anything? Just assumed knowledge, as for uploading to a web server, would github pages work? Thanks again, made my day. – nameless Aug 25 '18 at 23:51
  • 1
    @Win @nameless A slight change to method 3: just use `--public-url ./` option when builing the project with parcel. It'll do the replacing for you. – T90 Apr 11 '20 at 17:24