diff --git a/.changesets/11593.md b/.changesets/11593.md new file mode 100644 index 000000000000..703bb4bed107 --- /dev/null +++ b/.changesets/11593.md @@ -0,0 +1,19 @@ +- Fix storybook-vite not starting when `auth.ts` contains named imports after `createAuth` (#11593) by @Philzen + +This change fixes an issue with our internal storybook mocks. Previous to this you might find that your storybook would fail with an error like: + +``` +3:49:51 PM [vite] Internal server error: Transform failed with 1 error: +…/web/src/auth.ts:2:9: ERROR: Expected identifier but found "," + Plugin: vite:esbuild + File: …/web/src/auth.ts:3:6 + + Expected identifier but found "," + 1 | import { createAuthentication as createAuth } from '@redwoodjs/testing/dist/web/mockAuth.js' + 2 | import { , createDbAuthClient } from '@redwoodjs/auth-dbauth-web'; + | ^ + 3 | const dbAuthClient = createDbAuthClient(); + 4 | export const { +``` + +This was due to a bug in our handling of imports which this change fixes. diff --git a/__fixtures__/test-project/web/package.json b/__fixtures__/test-project/web/package.json index ea6f1e7cd48c..453b79a5c5c8 100644 --- a/__fixtures__/test-project/web/package.json +++ b/__fixtures__/test-project/web/package.json @@ -27,6 +27,6 @@ "postcss": "^8.4.47", "postcss-loader": "^8.1.1", "prettier-plugin-tailwindcss": "^0.5.12", - "tailwindcss": "^3.4.12" + "tailwindcss": "^3.4.13" } } diff --git a/packages/storybook/src/plugins/mock-auth.ts b/packages/storybook/src/plugins/mock-auth.ts index 5d90393caf64..d2fc554b0ea8 100644 --- a/packages/storybook/src/plugins/mock-auth.ts +++ b/packages/storybook/src/plugins/mock-auth.ts @@ -6,13 +6,12 @@ export function mockAuth(): PluginOption { enforce: 'pre', transform(code: string, id: string) { if (id.includes('web/src/auth')) { - // remove any existing import of `createAuth` without affecting - // anything else. - // this regex defines 3 capture groups, where the second is - // `createAuth` — we want to remove that one. + // Remove any existing import of `createAuth` without affecting anything else. + // This regex defines 4 capture groups, where the second is `createAuth` and + // the third is an (optional) comma for subsequent named imports — we want to remove those two. code = code.replace( - /(import\s*{\s*[^}]*)(\bcreateAuth\b)([^}]*})/, - '$1$3', + /(import\s*{\s*[^}]*)(\bcreateAuth\b)(,?)([^}]*})/, + '$1$4', ) // Add import to mocked `createAuth` at the top of the file. code =