ES Module type=module cause "parcelRequire is not defined" error #1401

tarepan · 2018-05-20T13:58:17Z

🐛 bug report

Using ES Module in main HTML cause "parcelRequire is not defined" error.
If we use type="module", minimal code in Getting Started (Parcel official) make this error.

🎛 Configuration (.babelrc, package.json, cli command)

zero configuration.

🤔 Expected Behavior

If we write super simple code with ES Module like below,

<!-- index.html -->
<html>
<body>
<script src="./index.js" type="module"></script>
</body>
</html>

// index.js
console.log("hello parcel");

I hope it is bundled properly and get "hello parcel" in console without error.

😯 Current Behavior

In console,

hello parcel.   index.js 1
Uncaught ReferenceError: parcelRequire is not defined at test.904c6489.js:10

💁 Possible Solution

Apparently ES Module cause this error.
When I removed type="module" from script element, no error observed.

It suggest that we can avoid error by avoiding type="module" for parcel.
But I think this approach is not good.
ES Module (type="module") is generally available (now 2018-05, all popular browsers supported!!), so ES module is straight forward way to import module.

🔦 Context

I do not know what problem is caused by this error.

🌍 Your Environment

Software	Version(s)
Parcel	parcel-bundler@1.8.1
Node	(problem happen both) 8.9.3 & 9.11.1
npm/Yarn
Operating System	Windows10 Pro, build 17134

Thank you good library, I hope this project become better and better.

The text was updated successfully, but these errors were encountered:

itshizhan · 2018-05-21T03:44:14Z

since you use type="module",why use parcel?

tarepan · 2018-05-21T03:49:41Z

Mainly for module resolution.
And for old browser users (ES module not supported, need Bundle.)

Schubidu · 2018-05-25T06:28:09Z

A good point to use Parcel in this case is the minification and files with hashes

emirotin · 2018-06-06T12:58:34Z

I have the same problem in different context. I'm trying to consume parcel-bundled module from my webpack-bundled app. Since ES6 modules (my app) run in strict context an attempt to consume the module results in assignment to undefined variable and crashes my app.

alexeyraspopov · 2018-07-03T15:45:15Z

~~Seems like this is no longer reproducible in v1.9.4.~~

Edit: disregard this, still reproducible.

alexeyraspopov · 2018-07-03T15:51:18Z

Maybe it makes sense for Parcel to remove type="module" for an entry that is being built?

davidnagli · 2018-07-10T17:20:45Z

This is an issue with the way parcelRequire is defined in Strict Mode. ES6 modules are by default executed in strict mode (AFIK), which prohibits implicit variable declerations.

Here's what Parcel's output looks like:

parcelRequire = (function (modules, cache, entry, globalName) {
  // Save the require from previous bundle to this closure if any
  var previousRequire = typeof parcelRequire === 'function' && parcelRequire;
  var nodeRequire = typeof require === 'function' && require;

  function newRequire(name, jumped) {

Notice how the global parcelRequire is implicitly declared without let/var!

By editing the output file and naively adding let before parcelRequire I was able to eliminate the issue. However, adding let can affect scoping...

An alternative that works is changing it to window.parcelRequire, but that would break in Node; which probably doesn't really matter since we can avoid doing that in --target node.

I ran into this in the wild in a slightly separate case when attempting to require a library I bundled with Parcel in a Webpack project. The Webpack project had a top level "use strict" pragma automatically injected which is what broke everything in the same way as this issue.

cameron-martin · 2018-07-26T18:53:48Z

Looks like a duplicate of #864

kleinfreund · 2018-08-29T19:23:22Z

Adding the Firefox error message so this issue pops up in searches:

ReferenceError: assignment to undeclared variable parcelRequire

Can this issue be resolved without altering the generated output (e.g. assigning to window.parcelRequire instead of parcelRequire) at the moment?

GrosSacASac · 2018-09-08T19:41:36Z

it should not be hard to add var or let or const

outkine · 2018-09-19T03:58:37Z

(duplicate of #864 (comment))
Since require may be used inside of the modules, defining it with let/const/var causes a ReferenceError: require is not defined

dfkaye · 2018-09-25T21:05:18Z

temporary fix for your work environment or localhost - https://twitter.com/dfkaye/status/1044693110700171264

idanilt · 2018-11-11T07:36:27Z

nicer work around:
yarn add parcel-plugin-wrapper --dev

.assetWarpper.js

const path = require('path')

const CWD = process.cwd()
const PACKAGE = require(path.join(CWD, 'package.json'))

const varRequire = async ({name, bundler}) => {
    // name = app.ere76r5e76r5e76r.js
    if (name.split('.').pop() === 'js' && bundler.options.production) {
        return {
            header: `var parcelRequire = undefined;`,
            footer: ``
        }
    }
}

module.exports = varRequire;

kirillgroshkov · 2018-11-16T15:03:10Z

We're having same issue!

dandv · 2018-12-11T07:43:15Z

Note that simply removing type="module" didn't work, even after re-launching parcel. I had to also delete the .cache directory.

Buslowicz · 2018-12-12T21:44:19Z

Sooo, am I reading this correctly? Parcel does not allow for a standard ES Module output?

lvalencia · 2019-01-16T01:31:33Z

yeah I'm having this issue when I use a raw .ts file as my input and I bundle my node_modules with it into a single file e.g.

parcel build ./src/index.ts --target node --bundle-node-modules

when i run it in node I'll get an error like

ReferenceError: parcelRequire is not defined

when I look at the non-minified version I can see

// eslint-disable-next-line no-global-assign
parcelRequire = (function (modules, cache, entry, globalName) {

so my guess is the assumption was that it would globally assign. it appears that it doesn't.

Obviously if I add var in front of it the lexical scoping lookup of JavaScript assigns it to global. but from what I can gather that would break things for other environments i.e. not --target node

I came up with a workaround

parcel build ./src/index.ts --target node --bundle-node-modules --out-dir ./dist --no-minify --out-file main.js && sed -i '' '1s;^;var ;' ./dist/main.js

obviously the bummer here is I can't use watch because how would I append it for my needs.

anyway is there an ETA for this fix? the set-up (or lack thereof) is super convenient so I'd like to use Parcel for a recommended way of doing something except this is kind of a blocker.

dfkaye · 2019-01-21T18:51:41Z

We ran into another issue specific to our app, so we had to come up with a post-bundling process file that uses the parcel-bundler API directly (see https://parceljs.org/api.html) in order to solve that as well as the "parcelRequire is not defined" issue.

https://gist.github.com/dfkaye/f43dbdfbcdee427dbe4339870ed979d0

heldrida · 2019-02-05T16:06:29Z

Have the same issue here!

"ReferenceError: parcelRequire is not defined"

While working in:
index.js, imports fileA
fileA.js, imports fileB
fileB.js

Command:
parcel build ./src/index.js --target browser

Can fix if manually add let,const before parcelRequire= in the dist/output file

twome · 2019-02-20T11:29:26Z

A workaround for Gulp / stream-based build system users, using gulp-insert to prepend the parcelRequire global declaration. Thanks for the idea @idanilt!

const gInsert = require('gulp-insert')

let parcelPatchTask = ()=>{
	return gulp.src(p(paths.dist, '**/*.js'))
		.pipe(gInsert.prepend(';var parcelRequire;\n'))
		.pipe(gulp.dest(paths.dist))
}

…dress ReferenceError (issue parcel-bundler#1401)

…ReferenceError (issue parcel-bundler#1401)

twome · 2019-03-16T05:49:42Z

Please see my PR above. It's pretty disappointing that there was no fix or PR for this show-stopper bug that requires literally a 4-character fix, for a 30k star project used by so many people :/

SteveALee · 2020-07-09T14:43:39Z

My use is to use native ES modules for dev and then bundler for production for older browsers. I also happen to be using snowpack.

If you say Parcel will not work in this case without rewriting the script include structure between dev and deploy it cannot be used. :(

While I get the error everyhting seems to work. So does the error matter?

SteveALee · 2020-07-09T14:45:26Z

if you strip <script type="module"> you need to add defer to get the same behaviour

sippeangelo · 2020-09-22T17:10:06Z

I'm not using type="module" anywhere yet I'm getting this error in Parcel v2. wtf am I doing wrong?! It works fine with serve, but the build is all messed up.

psytron · 2020-09-26T15:58:02Z

Observation: In addition to that LOL fix from Twitter, this issue can also be hackishly fixed by inserting any regular script tag ( not type=module ) before your type=module entry point. Without it Parcel still generates these errors.

<script src="seemingly_anything.js"></script>
<script src="es6_entry_point.js" type="module"></script>

einarpersson · 2020-09-26T18:17:47Z

I get this error whether I use type="module" or not. And the weird thing is that it only appears when I deploy it to vercel. But it works with npm start locally. And it only happens if index.js includes an import statement.

EDIT: more testing
It simply does not work with npm run build. But npm start works.

TimDaub · 2020-10-30T12:58:09Z

For me, this error also happens when I put a defer tag on my <script>. I used to just add the var parcelRequire trick, but it seems not to work anymore. Does anyone have an idea how to reliably fix this?

Edit: Actually, the console says that the connection was lost. But on file changes, the page still appropriately updates...

EmranMR · 2020-11-28T13:10:45Z

Ok so I am new to parcel. This is how I got into trouble like many of you.... it's quite an annoying bug!🤦‍♂️

I initiated the parcel on my html file with type="module" in my script tag, as you would do. Now that would mess everything up! do NOT do this. Once that happens you need to follow these steps to reverse:

do NOT do <script type="module" src="./main.js"></script>

How to Fix/Reverse?

You need to stop parcel in your CLI
Delete .parcel-cache folder in your directory which was created when you ran the parcel start| parcel serve...
☝️ - THIS IS VERY IMPORTANT OR DEFER AND ASYNC attributes won't WORK ☝️
Delete type="module" from your index.html
replace with either

<script defer src="./main.js"></script>
<script async src="./main.js"></script>
or just dump the tag old fashion way, to the bottom of your html

run the parcel serve again and you are all good to go, auto refresh for everything back on! 👍

Since this is a bug that has been haunting people since 2018, and the index.html in the dist folder is dynamically produced, why dont we somehow make parcel to remove type="module" in the html file when it encounters. Also another bug is when it generates the script tag in the dynamically generated html file in dist folder, Parcel adds an empty string to the async or defer attribute.... img below👇

🤷‍♂️🤷‍♂️🤷‍♂️🤷‍♂️🤷‍♂️🤷‍♂️🤷‍♂️🤷‍♂️🤷‍♂️

MacOS BigSur
Editor VSCode
Parcel v.2.0.0 beta1

OxiBo · 2020-11-29T02:35:52Z

When I remove type="module", github pages does not show any styles on my page

mellonis · 2020-11-29T10:27:35Z

Delete type="module" from your index.html

One does not simply delete type="module" from the code. Especially if you want to use native ES modules.

I have strong believe that defer and async attributes do not give us that — they do not provide module isolation, that's why it's impossible to use imports there.

When you delete type="module", you loose power of native ES modules.

I think that it's good if some web app can work in modern browsers "as is", without a preprocessing. When I use ES modules, modern browsers understand how to process them.

The problem is: when I add the parcel bundler, all goes wrong.

mellonis · 2020-11-29T10:31:17Z

I used this workaround.

EmranMR · 2020-11-29T10:45:14Z

I used this workaround.

Thank you so much for pointing this out by @dfkaye from this thread. Much better and more elegant fix, without losing the power of type module!

If only this was magically fixed in V2..

kungfooman · 2021-03-08T14:41:00Z

Will Parcel ever support ES6? Issue open since 2018, check clock, it's three years by now

talentlessguy · 2021-03-08T15:03:43Z

@kungfooman parcel v2 supports type=module

kungfooman · 2021-03-08T16:01:39Z

@talentlessguy Did you try that yourself? I just installed parcel@next now with this command line:

parcel watch --public-url . ./src/examples_pc/hokusai.ts --no-hmr --dist-dir build --target es6

But it still produces same error as in this issue

DeMoorJasper · 2021-03-11T09:24:14Z

@kungfooman there's an example in this thread on how to do this #1401 (comment)

Parcel has some [misunderstandings between script tags declared as es module](parcel-bundler/parcel#1401) and it's cascading into the build as console errors inkandswitch#22 inkandswitch#21 Removing the attribute sorts this out. until they fix it in Parcel.

doggy8088 · 2022-03-12T14:31:24Z

Add a <script>var parcelRequire;</script> to the <head> solve this issue for me. I have to use type="module" with Parcel because I'm using TypeScript.

mukaofssn · 2022-06-28T13:02:45Z

Add a <script>var parcelRequire;</script> to the <head> solve this issue for me. I have to use type="module" with Parcel because I'm using TypeScript.

@doggy8088 which version are you using this fix for?

doggy8088 · 2022-06-28T16:52:19Z

@mukaofssn 1.12.5

parcel-bundler/parcel#1401 (comment)

DeMoorJasper added the 🐛 Bug label May 25, 2018

DeMoorJasper added the ✔️ Confirmed Bug label Jun 6, 2018

emirotin mentioned this issue Jun 6, 2018

Cloud roles botpress/botpress#607

Merged

dandv mentioned this issue Dec 4, 2018

Uncaught ReferenceError: require is not defined when <script type="module"....> #864

Closed

twome added a commit to twome/parcel that referenced this issue Mar 16, 2019

Add var declaration to parcelRequire definition in prelude.js to ad…

a2a1b61

…dress ReferenceError (issue parcel-bundler#1401)

twome added a commit to twome/parcel that referenced this issue Mar 16, 2019

Add declaration to parcelRequire definition in prelude.js to address …

c4d77e5

…ReferenceError (issue parcel-bundler#1401)

twome mentioned this issue Mar 16, 2019

Add var declaration to parcelRequire definition in prelude.js #2809

Closed

3 tasks

mischnic mentioned this issue Mar 24, 2019

TypeError: Cannot read property 'TYPED_ARRAY_SUPPORT' of undefined #803 #2833

Closed

LasseRosenow mentioned this issue Mar 26, 2019

Fix global "this" in es modules #2839

Closed

3 tasks

This was referenced Jul 21, 2020

Uncaught ReferenceError: parcelRequire is not defined combowomb0/altv-boilerplate#2

Closed

Client not working leNicDev/altv-typescript-starter#1

Open

oliverdunk mentioned this issue Aug 27, 2020

Support <script type="module"> when serving with HMR #5077

Closed

3 tasks

awamwang mentioned this issue Sep 30, 2020

type=moudle引入时报错parcelRequire is not defined awamwang/vue-wangeditor-awesome#2

Open

moonwave99 mentioned this issue Dec 3, 2020

codepen / skypack cdn integration abudaan/heartbeat#20

Open

thomasbanghart mentioned this issue Jan 6, 2021

AP2364: Fixes cartoon viz to allow jenkins to pass tests. looker/custom_visualizations_v2#162

Merged

DeMoorJasper closed this as completed Mar 11, 2021

joelewis mentioned this issue Nov 27, 2021

fix for running the demo inkandswitch/peritext#23

Closed

odeadglaz mentioned this issue Sep 12, 2023

[Deps] Upgrade Paraphrase fiverr/i18n.js#92

Draft

austensen added a commit to housing-data-coalition/rtc-eviction-viz that referenced this issue Oct 19, 2023

add parcel-plugin-wrapper

6f88938

parcel-bundler/parcel#1401 (comment)

austensen mentioned this issue Oct 19, 2023

fixes for parcel error housing-data-coalition/rtc-eviction-viz#82

Closed

ES Module type=module cause "parcelRequire is not defined" error #1401

ES Module type=module cause "parcelRequire is not defined" error #1401

Comments

tarepan commented May 20, 2018 • edited Loading

🐛 bug report

🎛 Configuration (.babelrc, package.json, cli command)

🤔 Expected Behavior

😯 Current Behavior

💁 Possible Solution

🔦 Context

🌍 Your Environment

itshizhan commented May 21, 2018

tarepan commented May 21, 2018

Schubidu commented May 25, 2018

emirotin commented Jun 6, 2018

alexeyraspopov commented Jul 3, 2018 • edited Loading

alexeyraspopov commented Jul 3, 2018

davidnagli commented Jul 10, 2018

cameron-martin commented Jul 26, 2018

kleinfreund commented Aug 29, 2018

GrosSacASac commented Sep 8, 2018

outkine commented Sep 19, 2018

dfkaye commented Sep 25, 2018

idanilt commented Nov 11, 2018

kirillgroshkov commented Nov 16, 2018

dandv commented Dec 11, 2018

Buslowicz commented Dec 12, 2018

lvalencia commented Jan 16, 2019

dfkaye commented Jan 21, 2019

heldrida commented Feb 5, 2019 • edited Loading

twome commented Feb 20, 2019

twome commented Mar 16, 2019

SteveALee commented Jul 9, 2020 • edited Loading

SteveALee commented Jul 9, 2020

sippeangelo commented Sep 22, 2020 • edited Loading

psytron commented Sep 26, 2020 • edited Loading

einarpersson commented Sep 26, 2020 • edited Loading

TimDaub commented Oct 30, 2020 • edited Loading

EmranMR commented Nov 28, 2020

OxiBo commented Nov 29, 2020

mellonis commented Nov 29, 2020

mellonis commented Nov 29, 2020

EmranMR commented Nov 29, 2020

kungfooman commented Mar 8, 2021

talentlessguy commented Mar 8, 2021

kungfooman commented Mar 8, 2021

DeMoorJasper commented Mar 11, 2021

doggy8088 commented Mar 12, 2022

mukaofssn commented Jun 28, 2022

doggy8088 commented Jun 28, 2022

tarepan commented May 20, 2018 •

edited

Loading

alexeyraspopov commented Jul 3, 2018 •

edited

Loading

heldrida commented Feb 5, 2019 •

edited

Loading

SteveALee commented Jul 9, 2020 •

edited

Loading

sippeangelo commented Sep 22, 2020 •

edited

Loading

psytron commented Sep 26, 2020 •

edited

Loading

einarpersson commented Sep 26, 2020 •

edited

Loading

TimDaub commented Oct 30, 2020 •

edited

Loading