Using Parcel creates the mess in client side code

[kptdobe]

git clone https://github.com/kptdobe/helix-bootstrap-grayscale.git
cd helix-bootstrap-grayscale
hlx up

Check the console logs when page is rendered in a browser - multiple JS errors "jquery is not defined":

jquery.min.757d216f.js:39 Uncaught Error: Cannot find module 'jquery'
    at newRequire (jquery.min.757d216f.js:39)
    at newRequire (bootstrap.bundle.min.d09379f2.js:23)
    at localRequire (bootstrap.bundle.min.d09379f2.js:54)
    at bootstrap.bundle.min.js:6
    at Object.parcelRequire.dist/vendor/bootstrap/js/bootstrap.bundle.min.js (bootstrap.bundle.min.js:6)
    at newRequire (bootstrap.bundle.min.d09379f2.js:48)
    at parcelRequire.dist/vendor/bootstrap/js/bootstrap.bundle.min.js (bootstrap.bundle.min.d09379f2.js:80)
    at bootstrap.bundle.min.d09379f2.js:106

A quick first investigation leads to parcel-bundler/parcel#333
window.$ and window.jQuery are not set because Parcel "protects" the window object. I tried the various workaround proposed (like setting something like window.$ = window.jQuery = parcelRequire('dist/vendor/jquery/jquery.min.js');) and those leads to new dependency issues like require('jquery') fires a jquery module does not exist.

Parcel clearly breaks some simple client side code while it should be completely invisible...

@tripodsan @trieloff

[tripodsan]

I don't think you can mix the projects like this. the bootstrap-grayscale comes already with a bundler, gulp. so either use that, or refactor the code so that it works with parcel.

IMO, the client source files should be outside of dist and you should have a distinct webroot.

[tripodsan]

I rearranged some code to support both:

kptdobe/helix-bootstrap-grayscale@master...tripodsan:parcel-support

important is the .hlx/strain.yaml that defines the static root to be webroot. I think this is important to reduce the mess.

you can now choose to use the absolute URLs in the html, and just use gulp to produce the files in webroot/dist, or to use the relative URLs, use gulp to produce the files in client and let parcel copy them to webroot/dist. see my https://github.com/tripodsan/helix-bootstrap-grayscale/blob/parcel-support/README.md#build-with-parcel

[kptdobe]

Ah... I just realized I was testing on my 42-sectionizer branch. I had already realized the initial setup was wrong and I had already moved the dist folder inside the src folder and let parcel pick up what it needs from there.
The only major difference with your changes is that you changed the gulpfile.js. I need to understand if this would have fixed the issue in my context.

Sorry for the confusion.

[kptdobe]

In any case, I think we should really make it clear on what is supposed to be in webroot, webroot/dist, src, client... and when we need to edit the strain.yaml (which is still in the wrong place).

[kptdobe]

Ok, I revisited the issue. I agree, my example was a mess.
Here is a simplified version that illustrates the pb:

git clone https://github.com/kptdobe/helix-jquery-issue
cd helix-jquery-issue
hlx up

-> this leads to a JS error: "Uncaught ReferenceError: $ is not defined"

The code is working fine when ran on a standard http server:

# use you favorite http server or just install http-server:
npm install http-server -g
cd src
http-server -p 8080
open http://localhost:8080/test.html

-> this renders "Hello World"

test.html and html.htl are exactly the same sources and very basic jquery example. test.html would certainly be the start point before I move it to an htl version of it.
The Parcel transformation changes the JS code and bundle it into a require which is a fundamental shift and the web dev must be aware of that.

I did not use any other bundler or extra magic.

Finding the right way to make it work is almost impossible without knowing the internals. I need to adapt the code to something like:

const $ = parcelRequire('jquery-3.3.1.min.js');
$("#box").html('Hello world');

Or did I miss something ?

[tripodsan]

hmm... I don't think they transform the inline scripts... but I'll have a look.