Weird build/dev issue: effect library in @solid/start

Question

Weird build/dev issue: effect library in @solid/start

Closed this issue 23 days ago · 5 comments

To prefix, I'm building a library composed of several different packages. This error only seems to happen within this branch. What's weird is I've tried using the following code from my library and using it anywhere within my example app:

export type ExtractOperationName<T extends string> =
  T extends `${infer _}${"query" | "mutation"} ${infer Name}(${infer _}) {${infer _}`
    ? Name
    : T extends `${infer _}${"query" | "mutation"} ${infer Name} {${infer _}`
      ? Name
      : never;

export const extractName = <const Operation extends string>(
  operation: Operation,
) =>
  Effect.succeed(operation).pipe(
    Effect.filterOrFail(
      (operation) => {
        const match = operation.match(/\b(query|mutation)\b\s+(\w+)/);
        return !!match;
      },
      (operation) => new ExtractOperationNameError(operation),
    ),
    Effect.andThen((operation) => {
      const match = operation.match(/\b(query|mutation)\b\s+(\w+)/);
      return Effect.succeed(match![2] as ExtractOperationName<Operation>);
    }),
  );

  export const extractOperationName = <const Operation extends string>(
    operation: Operation,
  ) => Effect.runSync(extractName(operation));

The above code when being imported and then invoked from my library forces vinxi to throw the following error:

[BABEL] Note: The code generator has deoptimised the styling of /solidifront/examples/basic/node_modules/.vinxi/client/deps/chunk-7ZA5M5KR.js as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of /solidifront/examples/basic/node_modules/.vinxi/client/deps/chunk-NDCOVFYX.js as it exceeds the max of 500KB.

[vite] Internal server error: /solidifront/examples/basic/node_modules/.vinxi/client/deps/chunk-RLWJ43YW.js: Unexpected token, expected "=>" (2110:10)

  2108 |     resolve(exitDie(e));
  2109 |   }
> 2110 | }) : async((resolve) => {
       |           ^
  2111 |   try {
  2112 |     ;
  2113 |     evaluate().then((a) => resolve(exitSucceed(a)), (e) => resolve(exitDie(e)))
  
   at constructor (/solidifront/node_modules/.pnpm/@babel+parser@7.26.2/node_modules/@babel/parser/lib/index.js:359:19)
      at TypeScriptParserMixin.raise (/solidifront/node_modules/.pnpm/@babel+parser@7.26.2/node_modules/@babel/parser/lib/index.js:3266:19)
      at TypeScriptParserMixin.unexpected (/solidifront/node_modules/.pnpm/@babel+parser@7.26.2/node_modules/@babel/parser/lib/index.js:3286:16)
      at TypeScriptParserMixin.expect (/solidifront/node_modules/.pnpm/@babel+parser@7.26.2/node_modules/@babel/parser/lib/index.js:3596:12)
      at TypeScriptParserMixin.parseAsyncArrowFromCallExpression (/solidifront/node_modules/.pnpm/@babel+parser@7.26.2/node_modules/@babel/parser/lib/index.js:10795:10)
      
11:35:22 AM [vite] Error when evaluating SSR module /src/routes/[[locale]]/notFound.tsx: failed to import "@solidjs/start"
|- TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".jsx" for /solidifront/node_modules/.pnpm/@solidjs+start@1.0.10_solid-js@1.9.3_vinxi@0.4.3_@types+node@22.9.0_ioredis@5.4.1_terser@5.36_ces4gtbucflqcjtgl4a4owrqj4/node_modules/@solidjs/start/dist/index.jsx
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:218:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:244:36)
    at defaultLoad (node:internal/modules/esm/load:120:22)
    at async ModuleLoader.loadAndTranslate (node:internal/modules/esm/loader:479:32)
    at async ModuleJob._link (node:internal/modules/esm/module_job:112:19)

11:35:22 AM [vite] Error when evaluating SSR module /solidifront/examples/basic/src/routes/[[locale]]/notFound.tsx?pick=default&pick=$css: failed to import "@solidjs/start"
|- TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".jsx" for /solidifront/node_modules/.pnpm/@solidjs+start@1.0.10_solid-js@1.9.3_vinxi@0.4.3_@types+node@22.9.0_ioredis@5.4.1_terser@5.36_ces4gtbucflqcjtgl4a4owrqj4/node_modules/@solidjs/start/dist/index.jsx
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:218:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:244:36)
    at defaultLoad (node:internal/modules/esm/load:120:22)
    at async ModuleLoader.loadAndTranslate (node:internal/modules/esm/loader:479:32)
    at async ModuleJob._link (node:internal/modules/esm/module_job:112:19)

11:35:22 AM [vite] Error when evaluating SSR module /solidifront/examples/basic/src/routes/[[locale]]/[...404].tsx?pick=default&pick=$css: failed to import "@solidjs/start"
|- TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".jsx" for /solidifront/node_modules/.pnpm/@solidjs+start@1.0.10_solid-js@1.9.3_vinxi@0.4.3_@types+node@22.9.0_ioredis@5.4.1_terser@5.36_ces4gtbucflqcjtgl4a4owrqj4/node_modules/@solidjs/start/dist/index.jsx
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:218:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:244:36)
    at defaultLoad (node:internal/modules/esm/load:120:22)
    at async ModuleLoader.loadAndTranslate (node:internal/modules/esm/loader:479:32)
    at async ModuleJob._link (node:internal/modules/esm/module_job:112:19)

Any code within the library that uses this function also throws the error. However, it's not the function's fault, as accessing within the library that uses it works as intended. If I also log the result using the function and console, I get the expected result, and then the error is thrown.

For context, this will get the name of a graphql as both the value and the type:

// The above utility is created within our @solidifront/storefront-client package and then remapped to: "extractOperationName"
import {extractOperationName} from "@solidifront/start"

const shopQuery = `#graphql
  query ShopQuery($shopId: ID!) {
    shop(id: $shopId) {
      id
     }
  }
`;

const operationName = extractOperationName(shopQuery)

type Test = typeof operationName // ShopQuery

console.log(operationName) // ShopQuery

I can't replicate this issue if the above code isn't within an external library. I wish I could create a stack overflow for this issue, but I don't want to merge these changes onto my main branch and publish them until I've figured out the root cause.

Anyways any help here is greatly appreciated! Thank you so much! Please let me know if you need any further information!

Also, I have tried to delete the .vinxi and node_modules folder several times but still have the same issue.

Answer 1 · 2024-12-01T03:57:27.000Z

This same error is happening to me, it might be a problem with Effect JS library, l get the same error and it points to be there:

10:50:17 PM [vite] Internal server error: /home/someone/development/apps/web/admin/node_modules/.vinxi/client/deps/effect.js: Unexpected token, expected "=>" (25355:10)

  25353 |     resolve(exitDie(e));
  25354 |   }
> 25355 | }) : async((resolve) => {
        |           ^
  25356 |   try {
  25357 |     ;
  25358 |     evaluate3().then((a) => resolve(exitSucceed(a)), (e) => resolve(exitDie(e)));
  Plugin: solid

It happens if I try to use the Effect library on my Solid Start application

Answer 2 · 2024-12-01T04:12:20.000Z

@devinatbryt I solved my problem by excluding the effect package from vite optimizations, I did it in my app.config.ts of my solidstart project:

export default defineConfig({
  vite: {
    optimizeDeps: {
      exclude: ['effect']
    },
  }
});

So it may be a Vite problem.

Answer 3 · 2024-12-02T00:40:58.000Z

Ahhh, I see, exitSucceed (a)), (e) => resolve (exitDie (e)). This must come from the effect library, so whatever Vite does to optimize effect, breaks the build process.

If I try the work around there I get the following error:

Pre-transform error: Failed to resolve import "effect" from "node_modules/.vinxi/client/deps/chunk-RFZSSXCL.js?v=75b07fa1". Does the file exist?

This is extremely weird because the effect library doesn't work on the client but works on the server. So if I do something like this:

  import {
    extractOperationName,
  } from "@solidifront/start/storefront";
  import { shopQuery } from "~/graphql/storefront/queries";
  import { createAsync, query } from "@solidjs/router";

  const cachedOperationName = query(async () => {
    "use server";
    return extractOperationName(shopQuery);
  }, "test");
  
  export default function Page() {
    const opeartionName = createAsync(() => cachedOperationName());
    return null;
  }

The extractOperationName works on the server, and no errors are thrown.

It's important to note, this error is ONLY thrown in dev, everything works as intended within the build process!

@darkyelox thanks for the suggestion here!

Answer 4 · 2024-12-08T22:51:14.000Z

@nksaraf I'm still determining if there is a workaround here, as the issue I'm coming across, while it does prevent the initial issue from happening, causes the issue above to occur.

Answer 5 · 2024-12-15T19:44:51.000Z

I was looking in the wrong place it seems! This issue was an internal issue within the effect library. It was fixed in version 3.11.5.