Parcel renders a 404 page

Question

I've a typescript project I'm migrating from react-script to parcel.

However after running parcel, the project builds, but the url renders a 404 page not found html...

Here are the config files :

package.json :

{
  "name": "my-project",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@blueprintjs/core": "^3.45.0",
    "@emotion/react": "^11.4.0",
    "@emotion/styled": "^11.3.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^16.9.3",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-router-dom": "^5.1.7",
    "axios": "^0.21.4",
    "cross-env": "^7.0.3",
    "dotenv": "^10.0.0",
    "pullstate": "^1.22.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "reselect": "^4.0.0",
    "spinners-react": "^1.0.4",
    "ts-loader": "^9.2.6",
    "typescript": "^4.4.3",
    "use-axios-client": "^2.0.0",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "cross-env NODE_ENV=local parcel ./src/index.tsx -p 3000",
    "build": "parcel build"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "devDependencies": {
    "@babel/core": "latest",
    "@babel/preset-env": "^7.12.7",
    "@babel/preset-typescript": "latest",
    "@parcel/transformer-inline-string": "2.0.0-rc.0",
    "@parcel/transformer-svg-react": "^2.0.0-nightly.1739",
    "@parcel/config-default": "latest",
    "css-loader": "^6.3.0",
    "file-loader": "^6.2.0",
    "parcel": "^2.0.0-rc.0",
    "prettier": "2.3.1"
  }
}

tsconfig.json :

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "strict": true,
    "noImplicitReturns": true,
    "noImplicitAny": true,
    "module": "es6",
    "moduleResolution": "node",
    "target": "es5",
    "allowJs": true,
    "jsx": "react",
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true
  },
  "include": [
    "./src/**/*"
  ],
  "exclude": [
    "dist",
    "node_modules"
  ],
}

.parcelrc :

{
    "extends": "@parcel/config-default",
    "transformers": {
      "bundle-text:*": ["...", "@parcel/transformer-inline-string"],
      "jsx:*.svg": ["...", "@parcel/transformer-svg-react"]
    }
}

As I'm new to build tools - and parcel as well, I'm not sure what I did wrong here...

Answer 1

Your start script should target the .html file that you want to serve instead of .ts files directly. Parcel works a bit different from bundlers like webpack in that it can resolve dependencies from html directly.

So your start script would look like this:

cross-env NODE_ENV=local parcel ./src/index.html -p 3000

...and your index.html file would have a line like this:

<script type="module" src="index.tsx"></script>

See this example in the getting started docs