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

Uncaught (in promise) TypeError: Cannot read property '$$' of null #169

Open
matpen opened this issue Jun 2, 2022 · 3 comments
Open

Uncaught (in promise) TypeError: Cannot read property '$$' of null #169

matpen opened this issue Jun 2, 2022 · 3 comments
Labels
bug Something isn't working

Comments

@matpen
Copy link

matpen commented Jun 2, 2022

Summary

As of v2.0.1, svelte-forms-lib is built with svelte 3.40, which is affected by the bug reported in sveltejs/svelte#6584. I am experiencing the error described therein when using helper subcomponents.

Steps to reproduce

Using one of the examples using subcomponents will lead to an error. See below for CodeSandbox.

Example Project

Please see this CodeSandbox. I also copy the relevant code below, for convenience:

Example code
<script>
  import { Form } from "svelte-forms-lib";

  const formProps = {
      initialValues: {
          email: "",
          password: "",
          confirmPassword: "",
          hobby: "",
          checkbox: "",
      },
      onSubmit: (values) => { 
          alert(JSON.stringify(values));
      },
  };

</script>

<div class="container">
  <Form {...formProps}>

  </Form>
</div>

What is the current bug behavior?

An error is thrown. Depending on situation, the error may be the one in the screenshot below, or the one described in sveltejs/svelte#6584 (comment). Both of them depend on $$ being undefined.

What is the expected correct behavior?

No error should be thrown.

Relevant logs and/or screenshots

image

Possible fixes

  • using svelte 3.39 seems to fix the problem;
  • one can also apply this patch to the built code (although this is understandably more difficult);
@pateketrueke
Copy link

pateketrueke commented Jun 2, 2022

The issue is how your bundler resolves the svelte sources, as said on their documentation, they should read the .svelte sources and not the compiled ones.

In your sandbox, you can read something like this:

new Form
https://lke5ek.csb.app/node_modules/svelte-forms-lib/build/index.mjs:900:5

That's pointing out that we're not loading from the ./lib folder (which contains the .svelte sources) but from ./build so the problem is not svelte per-se, the settings of your bundler are responsible of that.

I would think that your sandbox (or may be your code/bundler/settings) are using the module option from any package.json being resolved, which, in this case actually points to "module": "./build/index.mjs" and such...

Check out the documentation fot the rollup's resolve plugin, and for the mainFields option.

I had this kind of issues before, but as soon I started to configure my bundler as expected (I use esbuild) then the issue gone.

@matpen
Copy link
Author

matpen commented Jun 2, 2022

Thank you for the pointer, @pateketrueke: this sounds like a plausible explanation. I failed to mention that I am actually using webpack, but since I am in the process of looking for a suitable solution, I will look for similar configuration, and report back here if I find a viable option. This may help others in the same situation.

@matpen
Copy link
Author

matpen commented Jun 3, 2022

I have performed some research, and I can confirm @pateketrueke's advice: in my case, using webpack 5 with svelte-loader, this is clearly documented, and I obviously missed it. For rollup (which I do not use) I found some references here.

svelte-forms-lib correctly provides the svelte entrypoint (main field), and my tests confirm that this solves the problem (using [email protected]).

More documentation about the mainFields settings can be found

  • for webpack 5, here;
  • for rollup, here.

To the maintainers of svelte-forms-lib: this solves the issue, which can probably be closed, although I advise to track sveltejs/svelte#6584. Thank you for the wonderful work on this library!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants