Parcel: Parcel and RequireJS

Created on 15 Jan 2019 · 3Comments · Source: parcel-bundler/parcel

❔ Question

I'm working to migrate my project setup from grunt to webpack or parcel. Just wanted to experiment parcel since it claims zero configuration. My project does AMD way of loading modules using requirejs. Just would like to know if any initial setup required for parcel to load modules AMD way with requirejs.

When I run parcel, when it encounters require() in entry point js file, I see it is thrown an error. Wondering how to make this to use requirejs require api instead of parcelRequire?

main.d7e180e4.js:39 Uncaught Error: Cannot find module 'moment,jquery,knockout,postal'
at newRequire (main.d7e180e4.js:39)
at localRequire (main.d7e180e4.js:55)
at Object.parcelRequire.V3RS10N/js/main.js (main.js:83)
at newRequire (main.d7e180e4.js:49)
at main.d7e180e4.js:81
at main.d7e180e4.js:107
newRequire @ main.d7e180e4.js:39
localRequire @ main.d7e180e4.js:55
parcelRequire.V3RS10N/js/main.js @ main.js:83
newRequire @main.d7e180e4.js:49
(anonymous) @ main.d7e180e4.js:81
(anonymous) @ main.d7e180e4.js:107

💻

require([
'moment',
'jquery',
'knockout',
'postal',
], function(moment, $, ko, postal) {

});

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.11.0
| Node |11.1.0
| npm/Yarn | yarn
| Operating System | mac

Waiting Question

Source

bchoddny

Most helpful comment

Parcel uses the CommonJS/ES6 style where separate require statements are needed for each import, so for the quick and dirty way to make it work you'll need to change that to something like...

(function(moment, $, ko, postal) {
  // ...
})(require('moment'), require('jquery'), require('knockout'), require('postal'));

Longer term you'll want to change that to ES6 imports, which allow better code splitting and compiler optimization:

import moment from 'moment';
import $ from 'jquery';
import ko from 'knockout';
import postal from 'postal';

// ...

icopp on 7 Feb 2019

🎉2

All 3 comments

Parcel uses the CommonJS/ES6 style where separate require statements are needed for each import, so for the quick and dirty way to make it work you'll need to change that to something like...

(function(moment, $, ko, postal) {
  // ...
})(require('moment'), require('jquery'), require('knockout'), require('postal'));

Longer term you'll want to change that to ES6 imports, which allow better code splitting and compiler optimization:

import moment from 'moment';
import $ from 'jquery';
import ko from 'knockout';
import postal from 'postal';

// ...

icopp on 7 Feb 2019

🎉2

@bchoddny Does this answer your question?

mischnic on 5 Mar 2019

Yes, Thanks.

From: Niklas Mischkulnig notifications@github.com
Sent: Tuesday, March 5, 2019 9:06 PM
To: parcel-bundler/parcel
Cc: bchoddny; Mention
Subject: Re: [parcel-bundler/parcel] Parcel and RequireJS (#2542)

@bchoddnyhttps://github.com/bchoddny Was your question answered?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://github.com/parcel-bundler/parcel/issues/2542#issuecomment-469856977, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AOMEnXWSfKbk2Z5lmZ9FeA6_3iIP64YSks5vTtxUgaJpZM4aBdUQ.

bchoddny on 5 Mar 2019

Was this page helpful?

0 / 5 - 0 ratings