Trying to import `effect` results in parse issue.

[indietyp]

Describe the bug

When trying to import the effect library (see: https://effect.website) babel seems to complain, as babel is used in the effect pipeline as well, and the code is valid, it seems odd that solid.js seems to be failing.

The error is:

[plugin:solid] <REDACTED>/node_modules/.vinxi/client/deps/effect.js: Unexpected token, expected "=>" (12604:10)
  12607 | });

Your Example Website or App

https://github.com/indietyp/solid-js-regressions/tree/effect-dependency (branch: effect-dependency)

Steps to Reproduce the Bug or Issue

Simply import { Iterable, pipe } from "effect"; in a solid start repo should work.

Expected behavior

I can compile

Screenshots or Videos

No response

Platform

• OS: [e.g. macOS, Windows, Linux] macOS
• Browser: [e.g. Chrome, Safari, Firefox] Firefox
• Version: [e.g. 91.1] 127.0b2 (64-bit)

Additional context

8:55:51 PM [vite] Internal server error: <REDACTED>/node_modules/.vinxi/client/deps/effect.js: Unexpected token, expected "=>" (12604:10)

  12602 | var promise = (evaluate3) => evaluate3.length >= 1 ? async((resolve, signal) => {
  12603 |   evaluate3(signal).then((a) => resolve(exitSucceed(a)), (e) => resolve(exitDie(e)));
> 12604 | }) : async((resolve) => {
        |           ^
  12605 |   ;
  12606 |   evaluate3().then((a) => resolve(exitSucceed(a)), (e) => resolve(exitDie(e)));
  12607 | });
  Plugin: solid
  File: <REDACTED>/node_modules/.vinxi/client/deps/effect.js?v=6a95e0ad:1172:11
  12602|  var promise = (evaluate3) => evaluate3.length >= 1 ? async((resolve, signal) => {
  12603|    evaluate3(signal).then((a) => resolve(exitSucceed(a)), (e) => resolve(exitDie(e)));
  12604|  }) : async((resolve) => {
     |            ^
  12605|    ;
  12606|    evaluate3().then((a) => resolve(exitSucceed(a)), (e) => resolve(exitDie(e)));
      at constructor (<REDACTED>/node_modules/@babel/parser/lib/index.js:351:19)
      at TypeScriptParserMixin.raise (<REDACTED>/node_modules/@babel/parser/lib/index.js:3281:19)
      at TypeScriptParserMixin.unexpected (<REDACTED>/node_modules/@babel/parser/lib/index.js:3301:16)
      at TypeScriptParserMixin.expect (<REDACTED>/node_modules/@babel/parser/lib/index.js:3605:28)
      at TypeScriptParserMixin.parseAsyncArrowFromCallExpression (<REDACTED>/node_modules/@babel/parser/lib/index.js:10804:10)
      at TypeScriptParserMixin.parseAsyncArrowFromCallExpression (<REDACTED>/node_modules/@babel/parser/lib/index.js:9407:18)
      at TypeScriptParserMixin.parseCoverCallAndAsyncArrowHead (<REDACTED>/node_modules/@babel/parser/lib/index.js:10718:27)
      at TypeScriptParserMixin.parseSubscript (<REDACTED>/node_modules/@babel/parser/lib/index.js:10647:19)
      at TypeScriptParserMixin.parseSubscript (<REDACTED>/node_modules/@babel/parser/lib/index.js:8987:18)
      at TypeScriptParserMixin.parseSubscripts (<REDACTED>/node_modules/@babel/parser/lib/index.js:10620:19)
      at TypeScriptParserMixin.parseExprSubscripts (<REDACTED>/node_modules/@babel/parser/lib/index.js:10611:17)
      at TypeScriptParserMixin.parseUpdate (<REDACTED>/node_modules/@babel/parser/lib/index.js:10590:21)
      at TypeScriptParserMixin.parseMaybeUnary (<REDACTED>/node_modules/@babel/parser/lib/index.js:10568:23)
      at TypeScriptParserMixin.parseMaybeUnary (<REDACTED>/node_modules/@babel/parser/lib/index.js:9478:18)
      at TypeScriptParserMixin.parseMaybeUnaryOrPrivate (<REDACTED>/node_modules/@babel/parser/lib/index.js:10422:61)
      at TypeScriptParserMixin.parseExprOps (<REDACTED>/node_modules/@babel/parser/lib/index.js:10427:23)
      at TypeScriptParserMixin.parseMaybeConditional (<REDACTED>/node_modules/@babel/parser/lib/index.js:10404:23)
      at TypeScriptParserMixin.parseMaybeAssign (<REDACTED>/node_modules/@babel/parser/lib/index.js:10365:21)
      at TypeScriptParserMixin.parseMaybeAssign (<REDACTED>/node_modules/@babel/parser/lib/index.js:9427:20)
      at <REDACTED>/node_modules/@babel/parser/lib/index.js:10335:39
      at TypeScriptParserMixin.allowInAnd (<REDACTED>/node_modules/@babel/parser/lib/index.js:11957:12)
      at TypeScriptParserMixin.parseMaybeAssignAllowIn (<REDACTED>/node_modules/@babel/parser/lib/index.js:10335:17)
      at TypeScriptParserMixin.parseConditional (<REDACTED>/node_modules/@babel/parser/lib/index.js:10414:30)
      at TypeScriptParserMixin.parseConditional (<REDACTED>/node_modules/@babel/parser/lib/index.js:9244:20)
      at TypeScriptParserMixin.parseMaybeConditional (<REDACTED>/node_modules/@babel/parser/lib/index.js:10408:17)
      at TypeScriptParserMixin.parseMaybeAssign (<REDACTED>/node_modules/@babel/parser/lib/index.js:10365:21)
      at TypeScriptParserMixin.parseMaybeAssign (<REDACTED>/node_modules/@babel/parser/lib/index.js:9427:20)
      at TypeScriptParserMixin.parseFunctionBody (<REDACTED>/node_modules/@babel/parser/lib/index.js:11630:24)
      at TypeScriptParserMixin.parseArrowExpression (<REDACTED>/node_modules/@babel/parser/lib/index.js:11612:10)
      at TypeScriptParserMixin.parseParenAndDistinguishExpression (<REDACTED>/node_modules/@babel/parser/lib/index.js:11228:12)
      at TypeScriptParserMixin.parseExprAtom (<REDACTED>/node_modules/@babel/parser/lib/index.js:10874:23)
      at TypeScriptParserMixin.parseExprAtom (<REDACTED>/node_modules/@babel/parser/lib/index.js:6829:20)
      at TypeScriptParserMixin.parseExprSubscripts (<REDACTED>/node_modules/@babel/parser/lib/index.js:10607:23)
      at TypeScriptParserMixin.parseUpdate (<REDACTED>/node_modules/@babel/parser/lib/index.js:10590:21)
      at TypeScriptParserMixin.parseMaybeUnary (<REDACTED>/node_modules/@babel/parser/lib/index.js:10568:23)
      at TypeScriptParserMixin.parseMaybeUnary (<REDACTED>/node_modules/@babel/parser/lib/index.js:9478:18)
      at TypeScriptParserMixin.parseMaybeUnaryOrPrivate (<REDACTED>/node_modules/@babel/parser/lib/index.js:10422:61)
      at TypeScriptParserMixin.parseExprOps (<REDACTED>/node_modules/@babel/parser/lib/index.js:10427:23)
      at TypeScriptParserMixin.parseMaybeConditional (<REDACTED>/node_modules/@babel/parser/lib/index.js:10404:23)
      at TypeScriptParserMixin.parseMaybeAssign (<REDACTED>/node_modules/@babel/parser/lib/index.js:10365:21)
      at TypeScriptParserMixin.parseMaybeAssign (<REDACTED>/node_modules/@babel/parser/lib/index.js:9427:20)
      at <REDACTED>/node_modules/@babel/parser/lib/index.js:10335:39
      at TypeScriptParserMixin.allowInAnd (<REDACTED>/node_modules/@babel/parser/lib/index.js:11952:16)
      at TypeScriptParserMixin.parseMaybeAssignAllowIn (<REDACTED>/node_modules/@babel/parser/lib/index.js:10335:17)
      at TypeScriptParserMixin.parseVar (<REDACTED>/node_modules/@babel/parser/lib/index.js:12885:91)
      at TypeScriptParserMixin.parseVarStatement (<REDACTED>/node_modules/@babel/parser/lib/index.js:12731:10)
      at TypeScriptParserMixin.parseVarStatement (<REDACTED>/node_modules/@babel/parser/lib/index.js:9122:31)
      at TypeScriptParserMixin.parseStatementContent (<REDACTED>/node_modules/@babel/parser/lib/index.js:12343:23)
      at TypeScriptParserMixin.parseStatementContent (<REDACTED>/node_modules/@babel/parser/lib/index.js:9152:18)
      at TypeScriptParserMixin.parseStatementLike (<REDACTED>/node_modules/@babel/parser/lib/index.js:12260:17)

[ryansolid]

I am generally going to ask for reproductions. Doesn't matter how trivial it is. It saves a good chunk of time. And when triaging happens how much time estimate to look into an issue comes into consideration.

That being said looking at the error maybe it's related to async being used as a function. Something expecting it to be a JavaScript keyword only perhaps. It looks like the error is in the effect.js code. But the error looking => is what I'd expect if it sees async() somewhere and doesn't recognize it is a function call.

The oddest part is this is a parser issue in TypeScript of all things. I can tell from the error this is coming from SolidStart so it might even be other bundling transform considerations, not even the JSX transform.

[indietyp]

O yea sorry! I was kind of in a hurry when creating the issue 😅, so I wasn't really able to create a repro repo. Sorry! I'll update the issue first thing tomorrow to link to a reproduction repository.

[indietyp]

I have created a minimal reproductive repository using SolidStart and have linked it to the issue description. Sorry again, and I hope this helps!

[ryansolid]

Thanks I might move this to Start now because I'm not sure what piece in the pipeline is causing this.

[indietyp]

adding:

solid: {
    exclude: ["**/node_modules/.vinxi/client/deps/**/*"],
  },

to the app.config.ts seems to have resolved the issue.

[josuazurbruegg]

I had the same problem today, for me the (temporary?) solution was to remove the whole effect library from the Vite optimizeDeps (in app.config.ts) as per the Vite config: https://vitejs.dev/config/dep-optimization-options.html#optimizedeps-exclude

export default defineConfig({
  vite() {
    return {
      optimizeDeps: {
        esbuildOptions: { target: ['esnext'] },
        exclude: ['effect'],
      },
    }
  },
})

I have no idea on the implications of this workaround but it seems to be working for the moment.

Reproduction should be pretty easy, just scaffolding a fresh SolidStart project using the CLI, adding the Effect package and running a simple Effect is enough, Babel starts complaining immediately.

[brenelz]

Is this still an issue with the newer betas without vinxi?

[lxsmnsyc]

@brenelz I don't think this is no longer relevant

[birkskyum]

if this is still an issue with altest SolidStart v2 release (currently 2.0.0-beta.5), feel free to open a new ticket.