Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

error Cannot set properties of undefined (setting 'Papa') #975

Open
btakita opened this issue Mar 1, 2023 · 5 comments · May be fixed by #976
Open

error Cannot set properties of undefined (setting 'Papa') #975

btakita opened this issue Mar 1, 2023 · 5 comments · May be fixed by #976

Comments

@btakita
Copy link

btakita commented Mar 1, 2023

This happens when using Papaparse, Astro, & vite.

The problem is this is undefined. globalThis is the value that we want to use.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis

btakita added a commit to btakita/PapaParse that referenced this issue Mar 1, 2023
@btakita btakita linked a pull request Mar 1, 2023 that will close this issue
btakita added a commit to btakita/PapaParse that referenced this issue Mar 1, 2023
@pokoli
Copy link
Collaborator

pokoli commented Mar 1, 2023

What is the error? How we can reproduce? Why it happens on such libraries and not on others?
Is this a real problem of PapaParse or some abuse of such libraries?

@btakita
Copy link
Author

btakita commented Mar 1, 2023

From the globalThis docs:

Historically, accessing the global object has required different syntax in different JavaScript environments. On the web you can use window, self, or frames - but in Web Workers only self will work. In Node.js none of these work, and you must instead use global. The this keyword could be used inside functions running in non–strict mode, but this will be undefined in modules and inside functions running in strict mode. You can also use Function('return this')(), but environments that disable eval(), like CSP in browsers, prevent use of Function in this way.

The globalThis property provides a standard way of accessing the global this value (and hence the global object itself) across environments. Unlike similar properties such as window and self, it's guaranteed to work in window and non-window contexts. In this way, you can access the global object in a consistent manner without having to know which environment the code is being run in. To help you remember the name, just remember that in global scope the this value is globalThis.


From the strict mode docs on MDN:

No this substitution

The value passed as this to a function in strict mode is not forced into being an object (a.k.a. "boxed"). For a sloppy mode function, this is always an object: either the provided object, if called with an object-valued this; or the boxed value of this, if called with a primitive as this; or the global object, if called with undefined or null as this. (Use call, apply, or bind to specify a particular this.) Not only is automatic boxing a performance cost, but exposing the global object in browsers is a security hazard because the global object provides access to functionality that "secure" JavaScript environments must restrict. Thus for a strict mode function, the specified this is not boxed into an object, and if unspecified, this is undefined instead of globalThis:


I'm not sure what framework environments do not support this globally. I'm using astro-js, which uses vite. astro-js seems like it's running in strict mode (anecdotally, as I have not found docs saying one way or another) & seems to adhere more strictly to web standards than most other environments. For example, astro-js does not support the non-standard process.env but supports the standard import.meta.env, even though the process is run in node.js.

btakita added a commit to btakita/PapaParse that referenced this issue Mar 1, 2023
@btakita
Copy link
Author

btakita commented Mar 1, 2023

I found vite docs re: strict mode.

Syntax Error / Type Error happens

Vite cannot handle and does not support code that only runs on non-strict mode (sloppy mode). This is because Vite uses ESM and it is always strict mode inside ESM.

For example, you might see these errors.

[ERROR] With statements cannot be used with the "esm" output format due to strict mode

TypeError: Cannot create property 'foo' on boolean 'false'

If these code are used inside dependencies, you could use patch-package (or yarn patch or pnpm patch) for an escape hatch.

btakita added a commit to btakita/PapaParse that referenced this issue Mar 1, 2023
btakita added a commit to btakita/PapaParse that referenced this issue Mar 1, 2023
btakita added a commit to btakita/PapaParse that referenced this issue Mar 1, 2023
btakita added a commit to btakita/PapaParse that referenced this issue Mar 1, 2023
@btakita
Copy link
Author

btakita commented Mar 2, 2023

To answer your first question: the error message is in the title:

error Cannot set properties of undefined (setting 'Papa')

@contis2908
Copy link

Reproduce this with open-wc.org - lit Typescript boilerplate.

importing in .ts files import * as Papa from 'papaparse'; produces
error Cannot set properties of undefined (setting 'Papa')

I

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants