Deployement app using Parcel JS

Hello,

I am having trouble deployement a simple app using parcel js.
I used the command: parcel build index.html
I have 1 html file that includes 1 js file.:

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

This js file imports 2 js files:

import Select from './js/select.js';
import Tile from './js/tile.js';
import {destinations} from './data/destinations.js';

After the build, I opened the index.html file and get 2 errors in the console:

error: 1
Blocage d’une requête multiorigines (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur file:///destinations.1c7ea528.js. Raison : la requête CORS n’utilise pas http.

error 2
L’URI de la source du module n’est pas autorisé dans ce document : « file:///destinations.1c7ea528.js ».

The errors are in French but I think you get the idea, something about CORS.

Here is the package.jon file:

{
  "name": "destinations",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "js": "^0.1.0",
    "partials": "^0.1.0",
    "reset.css": "^2.0.2",
    "sass": "^1.26.5",
    "typography.css": "^0.1.0"
  },
  "devDependencies": {
    "cssnano": "^4.1.10"
  }
}

Can anyone try to help me figure this out ?

Thanks a lot

Are you using script type="module"?

Hi @DanCouper

Yes I am. I added this attribute while developping because it was the only way (I found) to include other js scripts. I wanted to create separate files to organize the code.

So the reason you’re getting this error is because of browser security. What it’s trying to do when you just open the index file is that it is trying to resolve the module paths to your local filesystem (that’s the file:/// protocol). Browsers will not allow you to do this.

The solution (which is always what you need to do with modules) is to run it on a server. There are loads of options for this (Parcel has one built in I assume? I don’t use Parcel though), for example try running:

npx servor <path to folder with that index file> --browse

Which starts the servor package, spins it up and opens a browser

If you’re on a Mac (or Python is installed on your machine), just use the Python server, run

python -m SimpleHTTPServer

In the root folder where that index file is

I tried but got this error:
The extension “React Developer Tools” is not allowed to access about:neterror?e=connectionFailure&u=http%3A//localhost%3A8080/&c=UTF-8&d=Firefox%20ne%20peut%20%C3%A9tablir%20de%20connexion%20avec%20le%20serveur%20%C3%A0%20l%E2%80%99adresse%20localhost%3A8080.

I used Parcel thinking it was easy to use. The API makes it look easy, but it’s not.
Here’s the doc: https://parceljs.org/production.html

Do you know another bundler to enjoy es6 features ?

I’m gonna try to deploy it used Netlify. If I can get it work on there, that’s all I care for anyway.

There’s seems to be a problem with the path.
I typed: npx servor index.html --browse
But the path seems correct to me since index.html is at the root of the folder

What I’m saying applies universally: this is browser security. You can’t pull in files on the local filesystem because if that were allowed, it would be an attack vector.

There is no issue using ES6 modules in browsers, but you need to run the resulting HTML page in a server environment for it to all work. However, there may be issues just trying to use many NPM modules in that way (React is often an issue here)

One thing that may be interesting is Snowpack. It will allow you to develop using modules, and optionally deploy the same way, and it wraps non-conformant NPM packages to allow them to always work as ES6 modules. It isn’t as plug-and-play as Parcel though. I haven’t used it, so I can’t vouch for how good it is, but it’s got a lot of press in the last week or so when v2 of it was released.

Your options are going to either be that, or not use ES6 modules in the bundle (eg tell Parcel to just build a single file, and not use script type “module”)

Thanks!

I was able to deploy using Netlify.
It’s not as intuitive and easy as the docs make it seems. I expect Parcel to take care of everything. That’s what build is supposed to do. I never had that problem with React. I don’t think I’ll be using Parcel again.