"Import type" stopped working in "@nrwl/react": "14.7.6" for storybook #12186

artra · 2022-09-22T15:10:46Z

Current Behavior

After updating to "@nrwl/react": "14.7.6" from "@nrwl/react": "14.7.5"
and trying to run storybook I started to get an error in "import type" smth.

Expected Behavior

Storybook runs as normal, no errors.
It is regression

Steps to Reproduce

use import type in some storybook file
update @nrwl/react from 14.7.5 to 14.7.6 (14.7.9 still broken)
start storybook
get this error specified in failure logs

example repo https://github.com/artra/nx-storybook-error
nx serve smth:storybook to reproduce

Failure Logs

Unexpected token, expected "from" (9:12)
   7 |     var __LOCATIONS_MAP__ = {"AccountDetailsStory":{"startLoc":{"col":64,"line":11},"endLoc":{"col":102,"line":11},"startBody":{"col":64,"line":11},"endBody":{"col":102,"line":11}}};
   8 |
>  9 | import type { Story, Meta } from '@storybook/react';

Environment

Storybook

The text was updated successfully, but these errors were encountered:

mandarini · 2022-09-26T12:03:10Z

Hi there! Thanks for filing an issue! :)

Import type still works, for React apps. I see you are using this on a nextjs app. For it to work, you need to remove '@nrwl/react/plugins/storybook' from your apps/smth/.storybook/main.js file, in the addons array. Once you remove it, it will work like a charm.

You can try also the following, to observe the changes in configuration:

Generate a new React app, and then add Storybook to it (nx g @nrwl/react:storybook-configuration), and then use import type { Story, Meta } etc in your stories. Run Storybook and verify that it is working.
Generate a new Nextjs app, and then add Storybook to it (nx g @nrwl/react:storybook-configuration), and then use import type { Story, Meta } etc in your stories. Remove '@nrwl/react/plugins/storybook' from the new .storybook/main.js addons array. Run Storybook and verify that it is working.

mandarini · 2022-09-26T12:20:41Z

I will make a fix so that when you generate configuration and it detects Nextjs it removes the React addon.

Here's my repository showing that it all works as expected.

artra · 2022-09-26T15:32:00Z

Hello @mandarini, thanks for your help,
but simply removing it breaks different way:
https://github.com/artra/nx-storybook-error I added commit with one row of changes

ModuleBuildError: Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:135:10)
    at filename (/Users/alexey.artemev/Projects/nx-storybook-error/new2/node_modules/babel-loader/lib/cache.js:94:23)
    at /Users/alexey.artemev/Projects/nx-storybook-error/new2/node_modules/babel-loader/lib/cache.js:122:39
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/Users/alexey.artemev/Projects/nx-storybook-error/new2/node_modules/babel-loader/lib/cache.js:3:103)
    at _next (/Users/alexey.artemev/Projects/nx-storybook-error/new2/node_modules/babel-loader/lib/cache.js:5:194)
    at /Users/alexey.artemev/Projects/nx-storybook-error/new2/node_modules/babel-loader/lib/cache.js:5:364
    at new Promise (<anonymous>)
    at /Users/alexey.artemev/Projects/nx-storybook-error/new2/node_modules/babel-loader/lib/cache.js:5:97
    at processResult (/Users/alexey.artemev/Projects/nx-storybook-error/new2/node_modules/webpack/lib/NormalModule.js:758:19)
    at /Users/alexey.artemev/Projects/nx-storybook-error/new2/node_modules/webpack/lib/NormalModule.js:860:5
    at /Users/alexey.artemev/Projects/nx-storybook-error/new2/node_modules/loader-runner/lib/LoaderRunner.js:400:11
    at /Users/alexey.artemev/Projects/nx-storybook-error/new2/node_modules/loader-runner/lib/LoaderRunner.js:252:18
    at context.callback (/Users/alexey.artemev/Projects/nx-storybook-error/new2/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /Users/alexey.artemev/Projects/nx-storybook-error/new2/node_modules/babel-loader/lib/index.js:59:103
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at runNextTicks (node:internal/process/task_queues:65:3)
    at processImmediate (node:internal/timers:437:9)
ModuleBuildError: Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:135:10)
    at filename (/Users/alexey.artemev/Projects/nx-storybook-error/new2/node_modules/babel-loader/lib/cache.js:94:23)
    at /Users/alexey.artemev/Projects/nx-storybook-error/new2/node_modules/babel-loader/lib/cache.js:122:39
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/Users/alexey.artemev/Projects/nx-storybook-error/new2/node_modules/babel-loader/lib/cache.js:3:103)
    at _next (/Users/alexey.artemev/Projects/nx-storybook-error/new2/node_modules/babel-loader/lib/cache.js:5:194)
    at /Users/alexey.artemev/Projects/nx-storybook-error/new2/node_modules/babel-loader/lib/cache.js:5:364
    at new Promise (<anonymous>)
    at /Users/alexey.artemev/Projects/nx-storybook-error/new2/node_modules/babel-loader/lib/cache.js:5:97
    at processResult (/Users/alexey.artemev/Projects/nx-storybook-error/new2/node_modules/webpack/lib/NormalModule.js:758:19)
    at /Users/alexey.artemev/Projects/nx-storybook-error/new2/node_modules/webpack/lib/NormalModule.js:860:5
    at /Users/alexey.artemev/Projects/nx-storybook-error/new2/node_modules/loader-runner/lib/LoaderRunner.js:400:11
    at /Users/alexey.artemev/Projects/nx-storybook-error/new2/node_modules/loader-runner/lib/LoaderRunner.js:252:18
    at context.callback (/Users/alexey.artemev/Projects/nx-storybook-error/new2/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /Users/alexey.artemev/Projects/nx-storybook-error/new2/node_modules/babel-loader/lib/index.js:59:103
ModuleBuildError: Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:135:10)
    at filename (/Users/alexey.artemev/Projects/nx-storybook-error/new2/node_modules/babel-loader/lib/cache.js:94:23)
    at /Users/alexey.artemev/Projects/nx-storybook-error/new2/node_modules/babel-loader/lib/cache.js:122:39
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/Users/alexey.artemev/Projects/nx-storybook-error/new2/node_modules/babel-loader/lib/cache.js:3:103)
    at _next (/Users/alexey.artemev/Projects/nx-storybook-error/new2/node_modules/babel-loader/lib/cache.js:5:194)
    at /Users/alexey.artemev/Projects/nx-storybook-error/new2/node_modules/babel-loader/lib/cache.js:5:364
    at new Promise (<anonymous>)
    at /Users/alexey.artemev/Projects/nx-storybook-error/new2/node_modules/babel-loader/lib/cache.js:5:97
    at processResult (/Users/alexey.artemev/Projects/nx-storybook-error/new2/node_modules/webpack/lib/NormalModule.js:758:19)
    at /Users/alexey.artemev/Projects/nx-storybook-error/new2/node_modules/webpack/lib/NormalModule.js:860:5
    at /Users/alexey.artemev/Projects/nx-storybook-error/new2/node_modules/loader-runner/lib/LoaderRunner.js:400:11
    at /Users/alexey.artemev/Projects/nx-storybook-error/new2/node_modules/loader-runner/lib/LoaderRunner.js:252:18
    at context.callback (/Users/alexey.artemev/Projects/nx-storybook-error/new2/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /Users/alexey.artemev/Projects/nx-storybook-error/new2/node_modules/babel-loader/lib/index.js:59:103
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at runNextTicks (node:internal/process/task_queues:65:3)
    at processImmediate (node:internal/timers:437:9)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

mandarini · 2022-09-26T17:09:27Z

@artra I'm sorry, I literally just cloned your repo, I ran nx storybook smth and it worked. Can you please delete node_modules, try again, and let me know?

Here's my output: https://app.warp.dev/block/XN7X6yANisXukRkx9olvxD

What operating system are you using? What node version? Can I see your nx report?

mandarini · 2022-09-26T17:16:27Z

Also, can you please do the following and let me know if it works? It will help me understand:

Generate a new Nextjs app, and then add Storybook to it (nx g @nrwl/react:storybook-configuration), and then use import type { Story, Meta } etc in your stories. Remove '@nrwl/react/plugins/storybook' from the new .storybook/main.js addons array. Run Storybook and verify that it is working.

Tirke · 2022-09-27T07:45:35Z

@mandarini I'm facing the same issue and I can't remove @nrwl/react/plugins/storybook from the addons because when I do it all my imports declared in my tsconfig files stop working (eg Module not found: Error: Can't resolve '@front/components/inputs' ...)

artra · 2022-09-27T07:52:47Z

Hey @mandarini looks like I fixed my example repository and it works.
But in existing project we use aliases to the generated libs, and it still fails.
I think I reproduced it in my repo https://github.com/artra/nx-storybook-error

look like similar to what @Tirke says here

ModuleNotFoundError: Module not found: Error: Can't resolve '@new2/storybook' in '/Users/alexey.artemev/Projects/nx-storybook-error/new2/apps/smth/components/test-component'

mandarini · 2022-09-27T08:59:12Z

Hi there @artra ! I see in your case you are creating a story for a component that lives in another library. Storybook suggests that you put stories next to the components they are for. So I think it makes sense in that case to not work.

I do understand the issue you are highlighting (and @Tirke too), that the imports from other libraries within the workspace is not working properly for that Storybook instance. I will look into it. However, I still think that the "philosophy" behind Storybook and writing stories is having things containerised, for that exact reason... To be able to function independently.

mandarini · 2022-09-27T09:05:41Z

@Tirke can I see what your tsconfig looks like?

mandarini · 2022-09-27T09:08:37Z

The fact that it works in react apps, and not working in nextjs apps is definitely an issue, in any case

Tirke · 2022-09-27T09:11:31Z

@mandarini

Ok, hold on we have quite a beast of a monorepo.

For us storybook is living inside a lib we called storybook.

Inside storybook/.storybook I'm using this main.js file

const webpack = require('webpack')

const injectEnv = require('./webpack/injectEnv')
const injectVars = require('./webpack/injectVars')

/** @type {import("@storybook/react/types/index").StorybookConfig} */
const storybookMainConfig = {
  core: { builder: 'webpack5' },
  stories: ['../../../../**/*.stories.mdx', '../../../../**/*.stories.tsx'],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-viewport',
    '@storybook/addon-links',
    '@storybook/addon-docs',
    'storybook-addon-next-router',
    'storybook-react-i18next',
    'storybook-addon-swc',
    '@nrwl/react/plugins/storybook',
  ],
  webpackFinal: async (config) => {
    /**
     * Fixes issue with `next-i18next` and is ready for webpack@5
     * @see https://github.com/isaachinman/next-i18next/issues/1012#issuecomment-792697008
     * @see https://github.com/storybookjs/storybook/issues/4082#issuecomment-758272734
     * @see https://webpack.js.org/migrate/5/
     */
    config.resolve.fallback = {
      fs: false,
      http: false,
      https: false,
      timers: false,
      stream: false,
      zlib: false,
      path: false, //require.resolve('path-browserify'),
      tty: require.resolve('tty-browserify'),
      os: require.resolve('os-browserify/browser'),
    }

    config.resolve.alias = {
      ...(config.resolve.alias || {}),
      'next/config': require.resolve(
        '../../../../apps/front/front-legacy/config/initializeConfig.storybook.js',
      ),
    }

    config.plugins = config.plugins.reduce((c, plugin) => {
      if (plugin instanceof webpack.DefinePlugin) {
        return [
          ...c,
          new webpack.DefinePlugin(
            injectEnv({
              ...plugin.definitions,
              ...injectVars,
            }),
          ),
        ]
      }

      return [...c, plugin]
    }, [])

    return config
  },
  features: { emotionAlias: false },
}

module.exports = storybookMainConfig

With also have a preview.js using alias imports (that file is one the first to break when I remove the react nrwl addon)

/* eslint-disable @nrwl/nx/enforce-module-boundaries */
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable @typescript-eslint/no-empty-function */
import { CssBaseline } from '@material-ui/core'
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
import { initialize, mswDecorator } from 'msw-storybook-addon'
import { RouterContext } from 'next/dist/shared/lib/router-context'

import { msw } from '@front/api/msw-handlers'
import { mockedFeatureFlags } from '@front/tests/mocks/data/featureFlags.mock'
import { workerTheme } from '@front/theme'

import { i18n } from './i18next'

// Initialize MSW
initialize({
  onUnhandledRequest: 'bypass',
  serviceWorker: {
    url: `./../mockServiceWorker.js`,
    options: { scope: '/' },
  },
})

export const parameters = {
  viewport: {
    viewports: INITIAL_VIEWPORTS,
    defaultViewport: 'iphone12',
  },
  controls: { sort: 'requiredFirst' },
  actions: { argTypesRegex: '^on[A-Z].*' },
  msw: {
    handlers: {
      flags: msw.featureToggles.getFeaturesTogglesQuery(
        200,
        mockedFeatureFlags,
        false,
      ),
      segment: msw.tracking.segmentQuery(200, {}, false),
      axeptio: msw.tracking.axeptioQuery(200, {}, false),
    },
  },
  nextRouter: {
    Provider: RouterContext.Provider,
  },
  i18n,
  locale: 'en',
  locales: {
    en: { right: '🇫🇷', title: 'Français' },
    fr: { right: '🇬🇧', title: 'English' },
    de: { right: '🇩🇪', title: 'Deutsch' },
    es: { right: '🇪🇸', title: 'Español' },
  },
}

export const decorators = [
  mswDecorator,
  (Story) => (
    <>
      <meta name="theme-color" content={workerTheme.palette.primary.main} />
      <CssBaseline />
      <Story />
    </>
  ),
]`

Now the tsconfig chain starting from the one in
libs/front/storybook/.storybook/tsconfig.json

{
  "extends": "../tsconfig.lib.json",
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "outDir": ""
  },
  "files": [
    "../../../../node_modules/@nrwl/react/typings/styled-jsx.d.ts",
    "../../../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
    "../../../../node_modules/@nrwl/react/typings/image.d.ts"
  ],
  "exclude": [
    "../**/*.spec.ts",
    "../**/*.spec.js",
    "../**/*.spec.tsx",
    "../**/*.spec.jsx"
  ],
  "include": ["../src/**/*", "*.js"]
}

It references libs/front/storybook/tsconfig.lib.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../../../dist/out-tsc",
    "declaration": true,
    "types": ["node"]
  },
  "include": ["**/*.ts"],
  "exclude": [
    "**/*.e2e.ts",
    "**/*.spec.ts",
    "**/*.mock.ts",
    "**/*.test.ts",
    "jest.config.ts",
    "**/*.test-wrapper.ts"
  ]
}

Referencing libs/front/storybook/tsconfig.json

{
  "extends": "../../../tsconfig.base.json",
  "compilerOptions": {
    "jsx": "react-jsx",
    "allowJs": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": false,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true
  },
  "files": [],
  "include": [],
  "references": [
    {
      "path": "./tsconfig.lib.json"
    },
    {
      "path": "./tsconfig.spec.json"
    }
  ]
}

Referencing the root one tsconfig.base.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "rootDir": ".",
    "baseUrl": ".",
    "outDir": "./dist/out-tsc",
    "moduleResolution": "node",
    "target": "es2021",
    "module": "esnext",
    "lib": ["es2021", "dom"],
    "allowJs": false,
    "alwaysStrict": true,
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "importHelpers": true,
    "sourceMap": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "skipDefaultLibCheck": true,
    "strictNullChecks": true,
    "noImplicitAny": false,
    "importsNotUsedAsValues": "error",
    "paths": {
      ...redacted
      "@front/api/logic": ["libs/front/api/src/logic/index.ts"],
      "@front/api/logic/*": ["libs/front/api/src/logic/*"],
      "@front/api/msw-handlers": ["libs/front/api/src/msw-handlers/index.ts"],
      "@front/api/mswServer": ["libs/front/api/src/logic/msw/mswServer.ts"],
      "@front/api/others": ["libs/front/api/src/others/index.ts"],
      "@front/api/others/*": ["libs/front/api/src/others/*"],
      "@front/api/service-admin": ["libs/front/api/src/service-admin/index.ts"],
      "@front/api/service-auth": ["libs/front/api/src/service-auth/index.ts"],
      "@front/api/service-contract": [
        "libs/front/api/src/service-contract/index.ts"
      ],
      "@front/api/service-feature-toggles": [
        "libs/front/api/src/service-feature-toggles/index.ts"
      ],
      "@front/api/service-institution": [
        "libs/front/api/src/service-institution/index.ts"
      ],
      "@front/api/service-mission": [
        "libs/front/api/src/service-mission/index.ts"
      ],
      "@front/api/service-talent": [
        "libs/front/api/src/service-talent/index.ts"
      ],
      "@front/api/service-worker": [
        "libs/front/api/src/service-worker/index.ts"
      ],
      "@front/api/worker-bff": ["libs/front/api/src/worker-bff/index.ts"],
      "@front/components/data-display": [
        "libs/front/components/src/data-display/index.ts"
      ],
      "@front/components/feedback": [
        "libs/front/components/src/feedback/index.ts"
      ],
      "@front/components/hooks": ["libs/front/components/src/hooks/index.ts"],
      "@front/components/hooks/*": ["libs/front/components/src/hooks/*"],
      "@front/components/inputs": ["libs/front/components/src/inputs/index.ts"],
      "@front/components/inputs/*": ["libs/front/components/src/inputs/*"],
      "@front/components/layout": ["libs/front/components/src/layout/index.ts"],
      "@front/components/navigation": [
        "libs/front/components/src/navigation/index.ts"
      ],
      "@front/components/surfaces": [
        "libs/front/components/src/surfaces/index.ts"
      ],
      "@front/components/talent": [
        "libs/front/components/src/app-talent/index.ts"
      ],
      "@front/components/utils": ["libs/front/components/src/utils/index.ts"],
      "@front/locales": ["libs/front/translations/src/locales.ts"],
      "@front/logic/axeptio": ["libs/front/logic/src/axeptio/index.ts"],
      "@front/logic/onesignal": ["libs/front/logic/src/onesignal/index.ts"],
      "@front/logic/others": ["libs/front/logic/src/others/index.ts"],
      "@front/logic/others/*": ["libs/front/logic/src/others/*"],
      "@front/logic/react-query": ["libs/front/logic/src/react-query/index.ts"],
      "@front/logic/segment": ["libs/front/logic/src/segment/index.ts"],
      "@front/logic/segment/*": ["libs/front/logic/src/segment/*"],
      "@front/logic/validation": ["libs/front/logic/src/validation/index.ts"],
      "@front/runtime-config": ["libs/front/runtime-config/src/index.ts"],
      "@front/tests/api": ["libs/front/tests/src/api/index.ts"],
      "@front/tests/jest-config": ["libs/front/tests/src/jest-config/index.ts"],
      "@front/tests/localization": [
        "libs/front/tests/src/localization/index.ts"
      ],
      "@front/tests/mocks": ["libs/front/tests/src/mocks/index.ts"],
      "@front/tests/mocks/*": ["libs/front/tests/src/mocks/*"],
      "@front/tests/render": ["libs/front/tests/src/render/index.ts"],
      "@front/theme": ["libs/front/theme/src/index.ts"],
      "@front/translations": ["libs/front/translations/src/index.ts"],
      "@front/type/activity": ["libs/front/type/src/activity/index.ts"],
      "@front/type/admin": ["libs/front/type/src/admin/index.ts"],
      "@front/type/agency": ["libs/front/type/src/agency/index.ts"],
      "@front/type/api": ["libs/front/type/src/api/index.ts"],
      "@front/type/auth": ["libs/front/type/src/auth/index.ts"],
      "@front/type/axios": ["libs/front/type/src/axios/index.ts"],
      "@front/type/feature-flags": [
        "libs/front/type/src/feature-flags/index.ts"
      ],
      "@front/type/forms": ["libs/front/type/src/forms/index.ts"],
      "@front/type/google-autocomplete": [
        "libs/front/type/src/google-autocomplete/index.ts"
      ],
      "@front/type/institution": ["libs/front/type/src/institution/index.ts"],
      "@front/type/job": ["libs/front/type/src/job/index.ts"],
      "@front/type/mission": ["libs/front/type/src/mission/index.ts"],
      "@front/type/slot": ["libs/front/type/src/slot/index.ts"],
      "@front/type/specialty": ["libs/front/type/src/specialty/index.ts"],
      "@front/type/talent": ["libs/front/type/src/talent/index.ts"],
      "@front/type/tests": ["libs/front/type/src/tests/index.ts"],
      "@front/type/worker": ["libs/front/type/src/worker/index.ts"],
      ...redacted
    }
  },
  "exclude": ["node_modules", "tmp", "apps/front-e2e", "jest.config.ts"]
}

mandarini · 2022-09-27T09:18:12Z

So, @Tirke , the library on which you are using storybook, is it a React library? And what issue are you facing?

mandarini · 2022-09-27T09:26:01Z

I am trying to understand the issue.

If we are on a React app, and we are using the '@nrwl/react/plugins/storybook' addon, everything should work as expected. Both import type {Story, Meta} and imports from other libraries (eg. "@front/type/forms or what not).
If we are on a Nextjs app, import type {Story, Meta} breaks if one is using '@nrwl/react/plugins/storybook'. One should be using the 'storybook-addon-swc' and the 'storybook-addon-next' provided by storybook. However, if one removes the '@nrwl/react/plugins/storybook', then the import {MyComponent} from '@my-org/my-library' breaks.

mandarini · 2022-09-27T09:27:03Z

In your case @Tirke which imports break?

Tirke · 2022-09-27T12:39:20Z

@mandarini We are using nestjs as our frontend framework in our monorepo. When I updated nx and all the packages (including @nrwl/react) from 14.7.5 to 14.7.6, the build of the lib started failing with errors like that ERR! > 17 | import type { Meta, Story } from '@storybook/react/types-6-0'

Then I found this issue went on and removed @nrwl/react/plugins/storybook addon

addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-viewport',
    '@storybook/addon-links',
    '@storybook/addon-docs',
    'storybook-addon-next-router',
    'storybook-react-i18next',
    'storybook-addon-swc',
    '@nrwl/react/plugins/storybook',
  ]

==>

addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-viewport',
    '@storybook/addon-links',
    '@storybook/addon-docs',
    'storybook-addon-next-router',
    'storybook-react-i18next',
    'storybook-addon-swc',
  ]

I'm having imports errors

> nx run front-storybook-lib:build


>  NX  ui framework: @storybook/react


>  NX  Storybook builder starting ...

info => Cleaning outputDir: /Users/tirke/isolated/monorepo/dist/apps/front/storybook-app/public/storybook
info => Loading presets
info Found existing addon "@storybook/addon-docs", skipping.
info Found existing addon "@storybook/addon-viewport", skipping.
info => Compiling manager..
info => Compiling preview..
info Addon-docs: using MDX1
info => Using implicit CSS loaders
info => Using default Webpack5 setup
ERR! => Failed to build the preview
ERR! Module not found: Error: Can't resolve '@front/tests/mocks/data/featureFlags.mock' in '/Users/tirke/isolated/monorepo/libs/front/storybook/.storybook'
info => Manager built (4.59 s)

 >  NX   Module not found: Error: Can't resolve '@front/tests/mocks/data/featureFlags.mock' in '/Users/tirke/isolated/monorepo/libs/front/storybook/.storybook'

If I switch imports to relative ones it's removing the issue but I can't update all the imports because a lot of code is impacted.
(And also it will look bad + break nx eslint boundaries plugin, ...)

mandarini · 2022-09-27T13:05:48Z

Ok, got it. Looking into it. @Tirke Thank you very very much for all the details

Tirke · 2022-09-27T14:35:00Z

@mandarini Thanks for answering so quickly :)

mandarini · 2022-09-27T14:50:34Z

Hehe don't thank me too soon, let's see if and when I'll figure this out! 😅

artra · 2022-09-29T11:06:09Z

@mandarini Should this be reopened or there is another bug already?

mandarini · 2022-09-29T14:43:14Z

I'm looking into this today, if I don't figure it out let's open another bug. I've narrowed down the problem, the title does not depict it correctly!

mandarini · 2022-09-29T14:44:24Z

Here's a reproduction repository for reference

mandarini · 2022-09-30T08:30:41Z

Linking the storybook-addon-next issue here as well. Thank you @ixahmedxi!

mandarini · 2022-09-30T09:30:48Z

Issue #12320 explains the problem more accurately:
'@nrwl/react/plugins/storybook' version >14.7.5 clashes with storybook-addon-next

github-actions · 2023-03-21T19:04:28Z

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.

artra added the type: bug label Sep 22, 2022

mandarini added the scope: storybook Issues related to Storybook support in Nx label Sep 23, 2022

mandarini self-assigned this Sep 23, 2022

mandarini closed this as completed Sep 26, 2022

mandarini reopened this Sep 27, 2022

mandarini closed this as completed Sep 27, 2022

mandarini reopened this Sep 27, 2022

mandarini closed this as completed Sep 27, 2022

mandarini reopened this Sep 30, 2022

mandarini mentioned this issue Sep 30, 2022

storybook-addon-next breaks storybook compilation when used with @nrwl/react/plugins/storybook #12320

Closed

jaysoo mentioned this issue Oct 3, 2022

fix(nextjs): return correct webpack config for next.js storybook app #12371

Merged

mandarini closed this as completed in #12371 Oct 4, 2022

github-actions bot added the outdated label Mar 21, 2023

github-actions bot locked as resolved and limited conversation to collaborators Mar 21, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

"Import type" stopped working in "@nrwl/react": "14.7.6" for storybook #12186

"Import type" stopped working in "@nrwl/react": "14.7.6" for storybook #12186

artra commented Sep 22, 2022 •

edited

mandarini commented Sep 26, 2022

mandarini commented Sep 26, 2022

artra commented Sep 26, 2022

mandarini commented Sep 26, 2022 •

edited

mandarini commented Sep 26, 2022

Tirke commented Sep 27, 2022

artra commented Sep 27, 2022

mandarini commented Sep 27, 2022 •

edited

mandarini commented Sep 27, 2022

mandarini commented Sep 27, 2022

Tirke commented Sep 27, 2022 •

edited

mandarini commented Sep 27, 2022 •

edited

mandarini commented Sep 27, 2022

mandarini commented Sep 27, 2022

Tirke commented Sep 27, 2022 •

edited

mandarini commented Sep 27, 2022 •

edited

Tirke commented Sep 27, 2022

mandarini commented Sep 27, 2022

artra commented Sep 29, 2022

mandarini commented Sep 29, 2022

mandarini commented Sep 29, 2022

mandarini commented Sep 30, 2022

mandarini commented Sep 30, 2022

github-actions bot commented Mar 21, 2023

"Import type" stopped working in "@nrwl/react": "14.7.6" for storybook #12186

"Import type" stopped working in "@nrwl/react": "14.7.6" for storybook #12186

Comments

artra commented Sep 22, 2022 • edited

Current Behavior

Expected Behavior

Steps to Reproduce

Failure Logs

Environment

mandarini commented Sep 26, 2022

mandarini commented Sep 26, 2022

artra commented Sep 26, 2022

mandarini commented Sep 26, 2022 • edited

mandarini commented Sep 26, 2022

Tirke commented Sep 27, 2022

artra commented Sep 27, 2022

mandarini commented Sep 27, 2022 • edited

mandarini commented Sep 27, 2022

mandarini commented Sep 27, 2022

Tirke commented Sep 27, 2022 • edited

mandarini commented Sep 27, 2022 • edited

mandarini commented Sep 27, 2022

mandarini commented Sep 27, 2022

Tirke commented Sep 27, 2022 • edited

mandarini commented Sep 27, 2022 • edited

Tirke commented Sep 27, 2022

mandarini commented Sep 27, 2022

artra commented Sep 29, 2022

mandarini commented Sep 29, 2022

mandarini commented Sep 29, 2022

mandarini commented Sep 30, 2022

mandarini commented Sep 30, 2022

github-actions bot commented Mar 21, 2023

artra commented Sep 22, 2022 •

edited

mandarini commented Sep 26, 2022 •

edited

mandarini commented Sep 27, 2022 •

edited

Tirke commented Sep 27, 2022 •

edited

mandarini commented Sep 27, 2022 •

edited

Tirke commented Sep 27, 2022 •

edited

mandarini commented Sep 27, 2022 •

edited