How to bundle pure JS and CSS separately without HTML

[sque89]

❔ Question

I want to use parcel to bundle JS and CSS of a wordpress theme. As that isn't a app with a index.html which could be used as an entry point, i am struggling how to proper bundle these assets.

So i added two targets, one for JS and one for CSS. The build is running fine, the CSS bundle is working fine. Basically the JS bundle also looks fine but if i am running it in the browser, i am getting this error:

Uncaught ReferenceError: require is not defined

🔦 Context

We want to introduce parcel as out build tool to keep it simple.

💻 Code Sample

https://github.com/sque89/parceljs-numbro-issue

🌍 Your Environment

Software	Version(s)
Parcel	2.0.0-alpha.3.2
Node	11.15.0
npm/Yarn	6.7.0
Operating System	Linux

[mischnic]

This should work, please provide a reproduction for the error (a code sample for index.js).

[sque89]

Hi @mischnic, thanks so much for the fast reply. I tracked the problem down to a 3rd-party-library called numbro (https://github.com/BenjaminVanRyseghem/numbro).

I added a link to the issue description with an example project on github where i reproduce the problem with a minimal version. If numbro gets required, the javascript is not running anymore.

I am not sure if this is a problem inside numbro or if i could fix this by changing the parcel config. I already tried e.g. setting "includeNodeModules": true but it does not help.

[mischnic]

Might be a duplicate of https://github.com/parcel-bundler/parcel/issues/4003

[sque89]

The line in question looks different to the one in #4003 but i just had a look at the minified version. Is there a way to build without minification? Then i could further inspect if it is the same.

So #4003 is an actual bug which needs to be fixed in parcel? Is there any workaround by config or so?

[mischnic]

--no-minify

That specific one inserted require("process"), there is a PR to fix it.

[sque89]

I dont think it is a duplicate. The line which is causing the problem is included in the numbro bundle.

for (var l = "function" == "function" && require, e = 0; e < c.length; e++) s(c[e]);

If i search for this line in the original numbro.min.js (which works if included directly in the HTML) then i find it but slightly different:

for (var l = "function" == typeof require && require, e = 0; e < c.length; e++) s(c[e]);

Could this be a problem with bundling an existing bundle again or so?

[mischnic]

Yes, this is a different problem.

Could this be a problem with bundling an existing bundle again or so?

Yes