$78fb23f46eb09f80$exports is not defined

[mischnic]

We run into this problem after we added chartjs-plugin-datalabels to our project. When serving the result from parcel build we get the runtime error:

    Uncaught ReferenceError: $78fb23f46eb09f80$exports is not defined
    <anonymous> http://0.0.0.0:8000/index.059a8e3e.js:25

Disabling scope hoisting (--no-scope-hoist) makes it work. Parcel 2.7 works, 2.8.0 does not.

Removing the following line from package.json in chartjs-plugin-datalabels also makes it work:

"module": "dist/chartjs-plugin-datalabels.esm.js",

not sure if it's relevant.

A minimal example for reproducing the error: https://ommej.se/files/tmp/parcel-6711.tar.gz.
Steps to reproduce:
$ npm install
$ npm run build
$ cd dist
$ python3 -m http.server (or some other way to serve the files)
visit the page in a browser, for example localhost:8000, the console will show the exception

Originally posted by @lanker in #6711 (comment)

[RobertWHurst]

I'm also running into this. Seems to happen when importing dependencies already built with parcel.

I have a monorepo where I created a package @rwh/react-keystrokes that depends on package @rwh/keystrokes, both are build using parcel (I've tested 2.7 and up, all are broken, with or without --no-scope-hoist). Both build fine, but when I go to use use package B I get a reference error. There is my repo, and here is a code sandbox demonstrating the problem.

Let me know if I can help chase this one down. In the mean time I might change my build system so I can publish my package, otherwise any advice would be much appreciated.

[mischnic]

Thanks, I already have a minimal reproduction for now:

// index.js
import { merge } from "../library/a.js";
console.log(merge);

// library/package.json
{ "sideEffects": ["a.js"] }

// library/a.js
export * from './b.js';

// library/b.js
export { merge0 as merge } from "./c.js";

// library/c.js
export function merge0() {return 2;}

output:

function $5847f4e170f13e39$export$78b9c0f15a94309a() {
    return 2;
}
console.log((0, $a33e92888f64d1df$exports.merge));

[RobertWHurst]

Just an update. I went back up to version 2.8.3. In @rwh/react-keystrokes I was re-exporting the exports of @rwh/keystrokes. I removed this re-exporting of the other package and it works now. Perhaps it's related to export *? That would make sense given your repro example with the export for library/a.js

From:

export * from '@rwh/keystrokes'

export { useKey } from './use-key'
export { useKeyCombo } from './use-key-combo'

To:

export { useKey } from './use-key'
export { useKeyCombo } from './use-key-combo'

Best of luck @mischnic, let me know if I can help at all. I love this project :)

[mischnic]

Yes, it's caused by having both a export * and then a renaming export {x as y} (as in my example)

[Poky85]

Confirm it's caused by export *. I created another minimal reproduction here.

https://github.com/Poky85/demo-parcel-bundler-issue

[sznowicki]

I have the same when I have a single .jsx file that exports two React components. Parcel bundles this file within two different modules (one is cjs export for SSR and second is esm module for client).

ESM bundle seems to work, CSJ has weird outcome:

Input:

import React from 'react';

Output:

var $j6jVE$reactjsxruntime = require("react/jsx-runtime");
require("react");
...
// part of component body:
const [node, setNode] = (0, $0de4305a53d58d6b$import$65588215f5c347c3$2e2bcd8739ae039).useState(null);

// Console
ReferenceError: $0de4305a53d58d6b$import$65588215f5c347c3$2e2bcd8739ae039 is not defined

When I change the input imports:

import React, { useEffect, useState } from 'react';

Then I get similar error but only setState seems to be missing:

var $j6jVE$reactjsxruntime = require("react/jsx-runtime");
var $j6jVE$react = require("react");
...
const [node, setNode] = (0, $0de4305a53d58d6b$import$65588215f5c347c3$60241385465d0a34)(null);

ReferenceError: $0de4305a53d58d6b$import$65588215f5c347c3$60241385465d0a34 is not defined

[mischnic]

@sznowicki Can you open a new issue with a complete reproduction?

[sznowicki]

I'll try once I find correct repro. Last time I tried it was always correct.

[tnarik]

I could produce a repro with d3 if you want, as I'm facing the issue from #8849 in my test build.

[OzzyCzech]

Have same issue as @tnarik with D3 and Parcel 2.8.3 version

import * as d3 from 'd3';

seems to be missing in the bundle and generates 87f3b181d7e461d2$exports is not defined error

[tnarik]

I workaround by just doing console.log(d3) after the import (I wanted to check what was being inported, and... ¯\ (ツ) /¯ )

[OzzyCzech]

I workaround by just doing console.log(d3) after the import (I wanted to check what was being inported, and... ¯\ (ツ) /¯ )

yeah, your workaround with console.log works

let's check following repo https://github.com/OzzyCzech/d3-parcel-error and try yarn ok and yarn error
First one run parcel watch and everything appears normal, the error only appears when calling parcel build

[phfaist]

For reference, I'm having a similar issue when trying to import the 'yaml' package, because apparently its main index.js contains such export all/rename export instructions. My workaround for now has been to add an alias that directly points to the module where the definitions are located, "alias": { "yaml": "node_modules/yaml/browser/dist/index.js", ...}

[cokolele]

For anyone having this issue with d3 and you don't want to import the whole 300kb package, simple fix is to use modules separately. F.e.

import { select } from "d3-selection"
// instead of
import { select } from "d3"

[OzzyCzech]

For reference, I'm having a similar issue when trying to import the 'yaml' package, because apparently its main index.js contains such export all/rename export instructions. My workaround for now has been to add an alias that directly points to the module where the definitions are located, "alias": { "yaml": "node_modules/yaml/browser/dist/index.js", ...}

Thanks @phfaist your hotfix works - see example error repository

"alias": { "d3": "d3/dist/d3.js"}

[Vampire2008]

I have another scenario:
lib/a.ts

export function aFunc1() {}
export function aFunc2() {}

lib/b.ts

export function bFunc1() {}
export function bFunc2() {}

lib/index.ts

import * as a from './lib/a';
import * as b from './lib/b';

(window as any).mylib = Object.assign({}, a, b)
export * from './lib/a';
export * from './lib/b';

app.ts

import { aFunc1, bFunc1 } from './lib/index';

aFunc1();
bFunc1();

In output it contain export aFunc1 and bFunc2 and also contain code line from index.ts:
Object.assign({}, $24145d861916f4bb$import$93eebdad6c46d4da, $24145d861916f4bb$import$989da110d653c3d9)

But there isn't $24145d861916f4bb$import$93eebdad6c46d4da and $24145d861916f4bb$import$989da110d653c3d9 objects.

[kkirby]

Is this the same bug where you import something like:

import * as THREE from 'three';

and then use it like so:

THREE.ShaderMaterial

However, when it comes to being bundled, the assigned variable for that is undefined. In my case, it's $hgUW1$ShaderMaterial and Parcel never assigned that variable.