Bug: @motionone/solid causing an error

[danilowoz]

🐛 bug report

Solid.js templates using @motionone/solid is throwing an error when trying to load it. Currently, this template has been used on motion.dev documentation, which is failing due to the following error:

Debugging

I can see that this error is coming from a @motionone/solid. However, I couldn't find the _standard function on the original source code, so I guess it's an issue on our evaluation function, which is not including that function.

Link to sandbox: link (optional)

You can run it here: https://codesandbox.io/s/sandpack-project-forked-ovjfhc?file=/package.json:132-148

[danilowoz]

@DeMoorJasper, by any chance, do you know what's going on here?

[DeMoorJasper]

Strange, also don't find any reference to _standard, seems like some babel stuff is failing to load at first look, but will dig deeper into it later today

[DeMoorJasper]

Seems related to a bug in solid-refresh on all versions below 0.5.0, will try and update our solid-refresh version. But new solid-refresh version seems incompatible with our babel version, will figure it out though

[DeMoorJasper]

Seems like the latest version has another issue _$$component is not defined created a repro to be sent to the solid-refresh team I guess: https://github.com/DeMoorJasper/solid-refresh-bug

For now I'll work around it by filtering out refresh plugins for node modules

[danilowoz]

Hey, @davedbase. We encountered a bug on solid-refresh, which can be reproduced on the repo mentioned above.
What's the best way to address this issue?

Thanks

[lxsmnsyc]

@danilowoz Hi, I'm the one working on solid-refresh. May I ask what bundler setup are you using?

[danilowoz]

Maybe @DeMoorJasper can clarify our current bundler setup

[davedbase]

Hi folks, we're getting a lot of flack from the broader Solid ecosystem on this topic. It's really hampering the perspective of Solid as a maintained ecosystem. I'm really apologetic to ask once again but we could really use support to solve this.

Thank you.

[DeMoorJasper]

@davedbase there's a repro in this thread that reproduces it consistently even locally, let me know if you need any more help

Seems like the latest version has another issue _$$component is not defined created a repro to be sent to the solid-refresh team I guess: https://github.com/DeMoorJasper/solid-refresh-bug

For now I'll work around it by filtering out refresh plugins for node modules

[lxsmnsyc]

Hmm Okay I revisited this again. The specific babel setup is kinda wonky.

There are parts where it works as intended (the automatic import for the $$refresh) while there are parts that doesn't get translated properly ($$component). I don't know why this happens, but removing the preset-env and commonjs module transform has the correct output.

edit:
after some playing with the repro, I had this output:

var Presence = (0, _solidRefresh.$$component)(_REGISTRY, "Presence", function (props) {
// ...
var MotionComponent = _$$component(_REGISTRY, "MotionComponent", function (props) {

I can safely say that this is either a preset bug or a bug in Babel itself. Either way, I would recommend not using preset-env/transform-commonjs-modules and use other transpiling tool instead (maybe ESBuild)

edit 2:
Even the minimal code is kinda correct:

// Input
function Example() {

}

"use strict";

var _solidRefresh = require("solid-refresh");
var _REGISTRY = (0, _solidRefresh.$$registry)();
var Example = (0, _solidRefresh.$$component)(_REGISTRY, "Example", function Example() {}, {
 location: "index.js:1:0"
});
if (module.hot) {
 (0, _solidRefresh.$$refresh)("standard", module.hot, _REGISTRY);
}

Afterwards it just fails when there's multiple components defined:

// Input
function Foo() {

}
function Bar() {
  
}
function Baz() {
  
}

"use strict";

var _solidRefresh = require("solid-refresh");
var _REGISTRY = (0, _solidRefresh.$$registry)();
var Foo = (0, _solidRefresh.$$component)(_REGISTRY, "Foo", function Foo() {}, {
  location: "index.js:1:0"
});
var Bar = _$$component(_REGISTRY, "Bar", function Bar() {}, {
  location: "index.js:4:0"
});
var Baz = _$$component(_REGISTRY, "Baz", function Baz() {}, {
  location: "index.js:7:0"
});
if (module.hot) {
  (0, _solidRefresh.$$refresh)("standard", module.hot, _REGISTRY);
}

Take note that I've tried fixing this in the plugin myself but to no avail. I'm convinced that the preset-env/transform-modules-commonjs is the issue.