Uncaught TypeError: Object.defineProperty called on non-object

[PiTiLeZarD]

🐛 bug report

Using Parcel 2.0.0-beta.1, react relay and yarn workspaces, produces a non-working build. Using the option no-scope-hoist fixes the build.

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

All configs available there: https://github.com/PiTiLeZarD/testapp_bugreport

🤔 Expected Behavior

It should work both with or without tree shaking. (I think?)

😯 Current Behavior

yarn install
yarn relay
yarn build

Will produce the error. You probably know about it already, but I need to edit the index.html to load the js from that folder... I mean... I know you know that but I feel like I have to say it anyway haha

💁 Possible Solution

yarn build:nohoist

Solves the issue, I didn't dig in parcel's entrails to suss out where is the root of the issue so I can't provide more here sorry.

🔦 Context

I was refactoring all my code to a mono repo, got to the end of what would work with parcel 1, tried parcel 2, mostly everything worked up until I used the graphql keyword.

I ended up on this issue: #4559 and I've been asked to create a new bug report.

💻 Code Sample

I've committed the code here:
https://github.com/PiTiLeZarD/testapp_bugreport

Tested it on 2 machines with similar result

🌍 Your Environment

All environments are in both package.json (workspace and testapp)

Thanks for looking into this, and merry time to all of you ;)

[mischnic]

Use this babel config:

{
	"presets": [
		"@parcel/babel-preset-env",
		[
			"@babel/preset-react",
			{
				"runtime": "automatic"
			}
		]
	],
	"plugins": [
		"relay",
		"@babel/plugin-proposal-class-properties",
		"@parcel/babel-plugin-transform-runtime"
	]
}

because:

• compiling ES modules into CJS and passing that to Parcel's scope hoisting logic is problematic (causing the error you got) and bad for bundle size.
• If you use @parcel/babel-plugin-transform-runtime, the regenerator runtime will only be added if actually necessary based on a browserslist config you have

[PiTiLeZarD]

OMG yes that does work!

I have to be honest, I don't understand why it didn't work and I don't understand why it works now. I'll have to spend the time digging into all this so I'm not just a user of it all and get some sense of understanding.

Thanks so much for looking into and smashing that bug!

[mischnic]

The docs will soon have a section about this: parcel-bundler/website#784

[mischnic]

As explained on https://v2.parceljs.org/languages/babel/, you should use @parcel/babel-preset-env instead.

[broofa]

I'm seeing this in parcel@2.0.0-nightly.639 (most recent nightly). This is for a SPA webapp. Everything works fine when running the dev server (parcel index.html), but when I do parcel build index.html and serve the resulting static assets, I get this error.

Specifically, the debugger shows this as occuring at this line in the built JS resource:

...
}
// ASSET: js/ModulePane.js
var $7da7259b87a02879c5c7f1ef679fefc5$var$_interopRequireDefault = $84365f2fa51ab86fecf2004980c3e449$exports;
var $7da7259b87a02879c5c7f1ef679fefc5$var$_interopRequireWildcard = $61a762bf44d77268ef68463a5504d79b$exports;
Object.defineProperty($7da7259b87a02879c5c7f1ef679fefc5$exports, "__esModule", {     // <--- ERROR HERE
  value: true
});
...

(Debugger show '$7da7259b87a02879c5c7f1ef679fefc5$exports' as being undefined)

Error occurs both with and without the --no-optimize build flag.

[PiTiLeZarD]

Have you tried this config as well?

Use this babel config:

{
	"presets": [
		"@parcel/babel-preset-env",
		[
			"@babel/preset-react",
			{
				"runtime": "automatic"
			}
		]
	],
	"plugins": [
		"relay",
		"@babel/plugin-proposal-class-properties",
		"@parcel/babel-plugin-transform-runtime"
	]
}

because:

• compiling ES modules into CJS and passing that to Parcel's scope hoisting logic is problematic (causing the error you got) and bad for bundle size.
• If you use @parcel/babel-plugin-transform-runtime, the regenerator runtime will only be added if actually necessary based on a browserslist config you have

That did the trick for me

[tvquizphd]

Hi @PiTiLeZarD, thanks for putting together the code sample. I'm running into the same issue as you were, seemingly at the same codepoint as @broofa posted. I've cloned your sample repo, run the following,

yarn install
yarn relay
yarn build

When I access the site served from dist, I immediately see a familiar error:

index.js:2 Uncaught TypeError: Object.defineProperty called on non-object
    at Function.defineProperty (<anonymous>)

It turns out this occurs on the first ES module import. When I step into that import statement, I encounter an amusing error from regenerator-runtime v0.13.7 at the very end of that module with a comment that begins:

// This module should not be running in strict mode, so the above
// assignment should always work unless something is misconfigured....

Just searching for that text brought me to a babel issue that was mentioned in a babel pull request. So, I thought... why not update babel?

TLDR

In summary, I bumped @babel/core from ^7.12.10 to ^7.13.15, and ran the three-step build process again. Now it seems I'm making progress. Your test app still fails to render, but only because I don't haveGRAPHQL_API_URL in my environment.

• You can see I've updated babel here: tvquizphd/testapp_bugreport/update-babel.

• And, as a "baseline", I've removed the GraphQL requests here: tvquizphd/testapp_bugreport/update-babel-no-graphql.

The "baseline" App.jsx without any functionality can import a relay environment and write some JSON strings to the DOM.