Failed to fetch dynamically imported module: http://localhost:6006/.storybook/preview.ts

[mohsennrs]

I followed the document for keycloakify-starter integration with NX monorepo. Now when I run the storybook from the root of my NX project I get this error:

`17:33:52 [vite] Internal server error: /home/mohsen/code/M2-livefarm/livefarm-monorepo/apps/keycloakify-starter/.storybook/preview.ts: Unexpected token, expected "from" (1:12)

1 | import type { Preview } from "@storybook/react";
| ^
2 |
3 | const preview: Preview = {
4 | parameters: {
Plugin: storybook:react-docgen-plugin
File: /home/mohsen/code/M2-livefarm/livefarm-monorepo/apps/keycloakify-starter/.storybook/preview.ts:1:12
1 | import type { Preview } from "@storybook/react";
| ^
2 |
3 | const preview: Preview = {`

Project structure

My NX workspace includes:

A Next.js application

A React Native application

A shared component library with React

What I’m trying to do

I want to use the shared components in the Keycloakify pages. For that to work, I need to run Storybook from the root of the monorepo, not just within the apps/keycloakify-starter directory.

Running Storybook from within the apps/keycloakify-starter app does solve the issue, but it doesn’t meet my requirements.

Expected behavior

Running Storybook from the root of the NX workspace should work with the Keycloakify starter, enabling access to shared libraries.

Environment

NX Monorepo

Keycloakify starter

Storybook (React)

Vite

[garronej]

Hello @mohsennrs,

Without seeing your repo I can't help you.
Looks like the Vite config that is picked up is not the one of the keycloakify subproject but a root vite project that does not have typescript configured?
If you provide a reproduction repo I can have a look.