Troubleshooting Common Issues in Nuxt Community – Storybook

Project Description

Nuxt Community – Storybook is an open-source tool for building and testing components in isolation. It allows developers to create components and see how they look and behave in a live preview, without having to run a full application.

This can be particularly useful for frontend development, as it allows developers to focus on building and styling individual components without worrying about the overall layout or application logic.

Nuxt Community – Storybook is built on top of the popular Storybook tool, which is widely used in the React community. It can be used with Nuxt.js, a framework for building server-rendered Vue.js applications.

Troubleshooting Nuxt Community – Storybook with the Lightrun Developer Observability Platform

Changing value of control does not re-render a component fully

If you are using Nuxt Community – Storybook and you have a component that is not re-rendering fully when the value of a control is changed, there are a few things you could try:

1. Make sure that the component is properly re-rendering in your application when the value of the control is changed. If the issue only occurs in Nuxt Community – Storybook, it may be caused by an issue with the way the component is being tested or displayed in the Storybook environment.
2. Check the component’s template and make sure that it is using the correct syntax for binding to the value of the control. In Vue.js, this would typically involve using the v-bind directive or the : symbol.
3. Check the component’s data or props and make sure that they are properly being passed to the template and that the component is properly reacting to changes in their values.
4. If you are using Nuxt Community – Storybook’s actions feature to change the value of the control, make sure that the correct action is being dispatched and that the component is properly reacting to it.

React + Storybook + SCSS modules not working

If you are using Nuxt Community – Storybook with React and you are having issues getting SCSS modules to work, there are a few things you could try:

1. Make sure that you have the necessary dependencies installed in your project. You will need to have node-sass and sass-loader installed, as well as any other dependencies required by your project.
2. Check your webpack configuration and make sure that it is set up to handle SCSS modules. You may need to add a rule to the webpack config that tells it how to handle SCSS files.
3. If you are using Create React App (CRA), make sure that you have the SCSS_PATH environment variable set to the correct path.
4. Make sure that you are using the correct syntax for importing and using SCSS modules in your React components. In general, you will need to use the import statement to import the SCSS module and the className prop to apply the styles to your components.

Can’t get Storybook to work with CSS Modules using SCSS

By adding a special configuration to the webpackFinal in .storybook/main.js, the success with SCSS modules without any additional add-ons or presets can be achieved. This straightforward solution demonstrates that even for simple use cases – such as Component.module scss files integrated into components – it is possible to make effective progress using only sass and version 10 of the sass loader module installed.

webpackFinal: async (config) => {
    // add SCSS support for CSS Modules
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader?modules&importLoaders', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });

    return config;
}

In this case React application code incorporates an inventive approach to styling, utilizing a styles object for the desired effect.

import React from 'react';
import styles from './Component.module.scss';

function Component() {
  return (
    <div className={styles.wrapper}>
     foobar
    </div>
  );
}

export default Component;

Cannot read properties of undefined (reading ‘values’)

This issue is fixed with https://github.com/storybookjs/storybook/releases/tag/v6.5.0-alpha.31

Angular component is not a know element when importing its module

If you are using Nuxt Community – Storybook with Angular and you are seeing an error that says that a component is not a known element when you try to import its module, there are a few things you could try:

1. Make sure that you have correctly imported the component’s module in the module that you are using it in. This typically involves adding the module to the imports array of the relevant NgModule.
2. Make sure that the component is being exported from its module. This typically involves adding the component to the exports array of the module that it is defined in.
3. Check the component’s template and make sure that it is using the correct syntax for Angular components. This typically involves using the component’s selector as an element in the template.
4. If you are using Nuxt Community – Storybook’s actions feature to change the value of the control, make sure that the correct action is being dispatched and that the component is properly reacting to it.

Using react hooks + storybook hooks between stories and decorators break SB

If you are using Nuxt Community – Storybook with React and you are having issues using both React hooks and Storybook hooks (such as useStorybookState and useStorybookApi) within stories or decorators, there are a few things you could try:

1. Make sure that you are correctly importing the necessary Storybook hooks from the @storybook/api module.
2. Make sure that you are correctly using the Storybook hooks within your stories or decorators. In general, you will need to call the hook as a function and pass it any required arguments.
3. Check the Storybook documentation for any known issues or breaking changes related to using hooks within stories or decorators.
4. If you are using custom storybook configurations or plugins, try disabling them to see if they are causing the issue.

“unable to resolve dependency tree” during install

Despite the many benefits of NPM’s modern peer dependency system, an issue has arisen. Until this is resolved, users can try reverting to legacy peer dependencies as a viable alternative solution.

npm install @nuxtjs/storybook --legacy-peer-deps

TypeError: The “id” argument must be of type string. Received an instance of Object

After struggling with the same issue when using Vite, it emerged that an addon defined in .storybook/main.js may have been causing this inconvenience – and sure enough, upon removal of said addon from dependencies, the problem was resolved!

module.exports = {
  ...,
  addons: [ ] 
}

[addon-storyshots] storyshots found 0 stories: TypeError: Cannot destructure property ‘instrument’ of ‘undefined’ as it is undefined.

If you are using Nuxt Community – Storybook with the @storybook/addon-storyshots addon and you are seeing an error that says storyshots found 0 stories: TypeError: Cannot destructure property 'instrument' of 'undefined' as it is undefined, there are a few things you could try:

1. Make sure that you have correctly configured the @storybook/addon-storyshots addon in your project. This typically involves importing the addon and adding it to the addons array in your main.js file.
2. Check the main.js file and make sure that it is properly exporting your stories. In general, you will need to use the storybook/stories export from the @storybook/react package to define your stories.
3. Make sure that you have defined at least one story in your project. If you do not have any stories defined, the @storybook/addon-storyshots addon will not have any stories to test and will throw the error you are seeing.
4. Check the package.json file and make sure that you have the correct version of the @storybook/addon-storyshots addon installed. If you are using an older version, it may be incompatible with the version of Storybook that you are using.

Angular 12 library with storybook: Cannot access ‘component’ before initialization

Circular dependencies can be a major thorn in any development project’s side, especially if they are scattered throughout multiple files. Unfortunately these problems don’t make themselves known until tested and even then their cause may not always be so obvious. Thankfully for us, there is ng-package which warns you of such issues – though one still needs to heed them as ignoring these warnings could lead to many errors that won’t necessarily point towards the source easily.

After forking the original repro on Stackblitz WebContainer, it was constructed a solution that could possibly fix this problem.

Sarcevicantonio – Sb Ng Re – StackBlitz

This circular predicament can be troublesome, as it creates a conundrum of where to begin. LibComponent has references to ChildComponent whereas the latter holds links back towards LibComponent; thus forming an endless loop between them both which must be tackled for progress to occur.

To facilitate the implementation, create a new file projects/lib/src/lib//container-accessor.ts and declare an InjectionToken. Then define an interface so that the injected instance would be implemented to this specification; not only helping us avoid circular dependencies but also allowing for flexibility in terms of switching out containers as required without having to update dependent components.

// projects/lib/src/lib/container-accessor.ts
import { InjectionToken } from '@angular/core'

/**
 * Implemented by all components that can contain components implementing `ContainerChild`.
 */
export interface ContainerAccessor {
  someFunction(): void
}

export const CONTAINER_ACCESSOR = new InjectionToken<ContainerAccessor>('ContainerAccessor')

LibComponent recently underwent a transformation, adding the token CONTAINER_ACCESSOR and offering it as an alternative in addition to its prior class-dependent accessor. This shift removed any potential concern of circular dependency while still providing users with extra accessibility options.

import { ContainerAccessor, CONTAINER_ACCESSOR } from './container-accessor';
...
@Component({
  selector: 'lib-parent',
  ...,
  providers: [
    { provide: CONTAINER_ACCESSOR, useExisting: forwardRef(() => LibComponent) },
  ],
})
export class LibComponent implements AfterViewInit, ContainerAccessor {
  ...
}

When injecting a dependency, the Injector must be told which token to look for using ‘@Inject’. To ensure accuracy of type and provide guards against overwriting values, an optional-readonly modifier should also be added. These measures guarantee that injected variables remain secure.

import { CONTAINER_ACCESSOR, ContainerAccessor } from './container-accessor';
...
export class ChildComponent implements OnInit {
  constructor(
    @Optional() @Inject(CONTAINER_ACCESSOR) private readonly parent?: ContainerAccessor
  ) { }
}

To determine why Storybook’s build does not work while Angular’s does, further investigation is required. While Storybook incorporates essential components of the Angular Webpack configuration, there may be an unmentioned factor present in either storybook or angular that culminates into a circular dependency issue when building projects. To avoid potential issues down the road as your project grows more complex and comprehensive, it is best to prevent this type of cyclical occurrence from materializing at all costs.

Storybook build fails in CI environment with error Error: Cannot find module ‘react/package.json’

About the problem

@storybook/ui requires react and react-dom as a peerDependency. To facilitate this, the package features an alias that points towards these libraries in its webpack config file – ensuring their static presence within the iframe itself.

Webpack alias (not works)

Despite attempts to resolve the issue by overriding the webpack alias, it was soon made apparent that this approach would not be successful as the error arose before calling upon webpackFinal.

// .storybook/main.js
const path = require('path');

module.exports = {
  webpackFinal: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      react: path.resolve(__dirname, '../node_modules/preact/compat'),
      'react-dom': path.resolve(__dirname, '../node_modules/preact/compat'),
    };

    return config;
  },
};
<img class="alignnone" src="https://user-images.githubusercontent.com/15058771/158693324-3a6ff137-d850-467a-928d-8a5f983b5105.png" alt="This picture shows failure to load presets" width="1067" height="513" />

Manually fix

Manual alteration of the files to transition from React to Preact was a success!

node_modules/@storybook/builder-webpack5/dist/cjs/preview/iframe-webpack.config.js
node_modules/@storybook/ui/paths.js
 

Using patch-package

A patch-package that quickly and efficiently replaced React path with Preact upon installation was developed. This update will ensure smoother operation of your system, allowing you to maximize its potential!

# This file is called `./patches/@storybook+builder-webpack5+6.5.0-alpha.38.patch`
diff --git a/node_modules/@storybook/builder-webpack5/dist/cjs/preview/iframe-webpack.config.js b/node_modules/@storybook/builder-webpack5/dist/cjs/preview/iframe-webpack.config.js
index 2017433..d022183 100644
--- a/node_modules/@storybook/builder-webpack5/dist/cjs/preview/iframe-webpack.config.js
+++ b/node_modules/@storybook/builder-webpack5/dist/cjs/preview/iframe-webpack.config.js
@@ -195,8 +195,8 @@ var _default = async function _default(options) {
       modules: ['node_modules'].concat(envs.NODE_PATH || []),
       mainFields: [modern ? 'sbmodern' : null, 'browser', 'module', 'main'].filter(Boolean),
       alias: _objectSpread(_objectSpread(_objectSpread({}, features !== null && features !== void 0 && features.emotionAlias ? _paths.default : {}), storybookPaths), {}, {
-        react: _path.default.dirname(require.resolve('react/package.json')),
-        'react-dom': _path.default.dirname(require.resolve('react-dom/package.json'))
+        react: _path.default.dirname(require.resolve('preact/compat/package.json')),
+        'react-dom': _path.default.dirname(require.resolve('preact/compat/package.json'))
       }),
       fallback: {
         path: require.resolve('path-browserify')
# This file is called `./patches/@storybook+ui+6.5.0-alpha.38.patch`
diff --git a/node_modules/@storybook/ui/paths.js b/node_modules/@storybook/ui/paths.js
index 935886a..4c52985 100644
--- a/node_modules/@storybook/ui/paths.js
+++ b/node_modules/@storybook/ui/paths.js
@@ -14,6 +14,6 @@ module.exports = {
   '@storybook/router': dirname(resolve('@storybook/router/package.json')),
   '@storybook/theming': dirname(resolve('@storybook/theming/package.json')),
   '@storybook/ui': dirname(resolve('@storybook/ui/package.json')),
-  react: dirname(resolve('react/package.json')),
-  'react-dom': dirname(resolve('react-dom/package.json')),
+  react: dirname(resolve('preact/compat/package.json')),
+  'react-dom': dirname(resolve('preact/compat/package.json')),
 };

Cannot find module ‘react-dom/client’ in render.jss under React 18

If you are using Nuxt Community – Storybook with React and you are seeing an error that says Cannot find module 'react-dom/client' in the render.jss file, there are a few things you could try:

1. Make sure that you have the latest version of React installed in your project. The react-dom/client module was removed in React 18, so if you are using an older version of React you may be seeing this error.
2. Check the render.jss file and make sure that you are correctly importing the react-dom module. In React 18, you will need to import the react-dom module as a whole, rather than a specific sub-module.
3. If you are using a custom build of React or have modified the react-dom module in any way, make sure that the changes are compatible with React 18.
4. If you are using Nuxt Community – Storybook’s actions feature to change the value of the control, make sure that the correct action is being dispatched and that the component is properly reacting to it.

MODULE_NOT_FOUND error when running storybook on fresh project

Here are a few potential causes for this error:

1. You may not have installed the necessary dependencies. Make sure that you have installed the @nuxt/storybook module as well as @storybook/vue and @storybook/addon-essentials.
2. The module that cannot be found may be required in a configuration file (such as .storybook/main.js) but is not installed in your project. Make sure to install any required dependencies and restart the server.
3. There may be a typo in the import path for the module. Double-check the import statement to make sure that the path is correct.
4. If you have recently ejected your Nuxt.js project, the configuration files may have been modified in a way that is causing the error. Try resetting the configuration files to their default state.

addon-controls – Disabling controls for a story does not hide them on argsTable

To hide the properties of a table, utilize the additional property available in such tables for control.

title: { table:  { disable: true } }

You can check the documentation here

Unable to build storybook, “command not found”

If you are unable to build Storybook and are seeing a “command not found” error, it is likely that you are trying to run a command that is not recognized by your system. Here are a few things you can try:

1. Make sure that you have installed the necessary dependencies. In order to build Storybook, you will need to have @nuxt/storybook, @storybook/vue, and @storybook/addon-essentials installed in your project.
2. Check the spelling and syntax of the command you are trying to run. The “command not found” error is often caused by a typo or a missing argument.
3. If you are running the command in a terminal, try running it in a different terminal emulator. Some terminals may not recognize certain commands.
4. If you are using a package manager (such as npm or yarn) to install dependencies, make sure that it is up to date. Outdated package managers may not recognize certain commands.

Storybook build failing with `WebpackOptionsValidationError`

If you are encountering a WebpackOptionsValidationError when building Storybook in a Nuxt.js project, it is likely that there is a problem with your webpack configuration. Here are a few things you can try to troubleshoot this error:

1. Make sure that you have installed all of the necessary dependencies. In order to build Storybook, you will need to have @nuxt/storybook, @storybook/vue, and @storybook/addon-essentials installed in your project.
2. Check your webpack configuration for any syntax errors or missing values. The WebpackOptionsValidationError is often caused by a problem with the configuration object.
3. If you are using a configuration file (such as webpack.config.js) to set up your webpack configuration, make sure that it is being correctly imported in your Storybook configuration file (such as .storybook/main.js).
4. If you are using Nuxt’s webpack configuration in your Storybook configuration, make sure that you are correctly merging the two configurations using the mergeWebpack function provided by @nuxt/storybook.

Can’t run Storybook with Webpack@5

After careful debugging, it was discovered that the source of difficulty with Yarn and PnP stemmed from @storybook/react’s a direct dependency to webpack 4. This caused all transitive dependencies requiring either version 4 or 5 to resolve back to a singular webpack 4 despite their respective peer dependencies – as shown in the accompanying relevant part of its dependency tree.

[root project]
├── @storybook/builder-webpack5@6.3.1 (devDep)
│   └── webpack@5 (dep)
├── @storybook/react@6.3.1 (devDep)
│   ├── @storybook/react-doc-gen-typescript (dep)
│   │   └── webpack >= 4 (peerDep)
│   └── webpack@4 (dep)
└── webpack@5 (devDep)

PnP ensures that react-doc-gen-typescript always receives the latest version of webpack@4, courtesy of @storybook/react. By utilizing either NPM or Yarn 1.x alongside your package-lock.json and yarn.lock files, you can flatten these dependencies for an even more efficient workflow experience!

[root project]
├── @storybook/builder-webpack5@6.3.1
├── @storybook/react@6.3.1
│   └── webpack@4
├── @storybook/react-doc-gen-typescript
└── webpack@5 (provided by [root project],@storybook/builder-webpack5)

React-doc-gen-typescript has been successfully hoisted, using the project’s webpack version. An issue arises when @storybook/react and @storybook/builder-webpack5 try to access the same hoisted version of webpack – this can lead to a messy node_modules directory.

[root project]
├── @storybook/builder-webpack5@6.3.1
│   └── webpack@5
├── @storybook/react@6.3.1
├── @storybook/react-doc-gen-typescript
└── webpack@4 (provided by @storybook/react)

Controls is not visible/shown in canvas/addons (only in docs)

Unlocking the solution to the predicament came from utilizing the following approach:

Make sure the addons panel is turned on either by using the A keyboard shortcut or by using the dropdown menu next to the storybook logo.

Toggle the position of the addons panel either by using the D keyboard shortcut or by using the dropdown menu next to the storybook logo.

Through two rearrangements, the panel settled at the bottom of its environment and held in place.

Error when switching to webpack5 builder with ESM modules

The following may help:

  webpackFinal(config) {
    config.module.rules.push({
      test: /\.(js|mjs|jsx)$/,
      enforce: 'pre',
      loader: require.resolve('source-map-loader'),
      resolve: {
        fullySpecified: false,
      },
    })
    return config;
  }

[Bug] 504’s and “error loading dynamically imported module”

Here are a few things you can try to troubleshoot these errors:

1. Make sure that you have installed all of the necessary dependencies. In order to run Storybook, you will need to have @nuxt/storybook, @storybook/vue, and @storybook/addon-essentials installed in your project.
2. Check for any syntax errors in your configuration files (such as .storybook/main.js). The “error loading dynamically imported module” message is often caused by a problem with the configuration object.
3. If you are using dynamic imports in your Storybook configuration, make sure that the paths to the imported modules are correct. The 504 error can be caused by a problem with the module path.
4. If you are using a package manager (such as npm or yarn) to install dependencies, make sure that it is up to date. Outdated package managers may cause errors when loading dynamic modules.

Broken build Storybook 6.3.7 + Webpack 5

This link appears to be relevant for the selected option: https://webpack.js.org/configuration/target/. This default setting references the browsers list, which has a configuration like this:

last 2 chrome versions
last 2 edge versions
last 2 firefox versions
last 2 safari versions
maintained node versions

By eliminating maintained node versions, one can avoid the occurrence of errors.

Next.js + TypeScript + Storybook compatibility issues

By creating a new tsconfig.json within the .storybook directory, you can extend and customize your compilerOptions.jsx settings to set yourself up for success.

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "jsx": "react"
  }
}

Storybook and angular library: Cannot read property ‘selector’ of undefined

Angular AOT mode appears to strip the annotation from components, despite it potentially being a crucial part of them. Significantly, these same components may be included in node_modules as packages; thus making this removal process especially problematic.
Replacement of a component with updated data about its inner workings, ensuring that the information available was current and up-to-date.

var ngComponentMetadata = component.decorators[0].args[0]; 
//NgComponentAnalyzer_1.getComponentDecoratorMetadata(component);

Storybook 6.3.4, Angular 12.1 is now available for use with the necessary imports from node_modules/primeng seen in the class form to enhance user experience and make work simpler!

There is no annotations property, but decorators exist
And here class from “project src” looks like

Here annotations property is present.

Can’t resolve fs, nothing helps

Despite configuring the option of “config.resolve.fallback.fs” to false, an invalid response system-wide was met; as such, a different approach had to be taken instead in order for my desired outcome of success to be achieved satisfactorily.

module.exports = {
  stories: ["../../src/directory/**/*.stories.tsx", "../../src/commons/**/*.stories.tsx"],
  addons: [
    "@storybook/addon-essentials",
    "@storybook/addon-a11y",
    "@storybook/preset-create-react-app"
  ],
  webpackFinal: (config) => {
    config.node = { fs: 'empty' }
    return config;
  },
};

Getting “Cannot use import statement outside a module” with MDX files running with Jest

After replacing ts-jest with babel-jest, the issue was resolved.

1. Install the babel

yarn add -D babel-jest @babel/preset-env @babel/preset-react @babel/preset-typescript

2. Create the jest.transform.js file

module.exports = require('babel-jest').createTransformer({
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          esmodules: true,
        },
      },
    ],
    '@babel/preset-react',
    '@babel/preset-typescript',
  ],
});

3. Add transform to your jest.config.js

module.exports = {
  testEnvironment: 'jsdom',
  transform: {
    '^.+\\.[tj]sx?$': './jest.transform.js',
    '^.+\\.mdx?$': '@storybook/addon-docs/jest-transform-mdx',
  },
};

Webpack 5 – TypeError: Cannot read property ‘length’ of undefined

With a minor modification within main.js, this issue can be swiftly resolved- simply comment out the addon in preset-create react app and behold; both commands “storybook” and “build storybook” will function seamlessly! To install Storybook as a clean installation, enter the command “npx sb@next init –builder webpack5” for optimal performance.

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    /*"@storybook/preset-create-react-app"*/
  ],
  "core": {
    "builder": "webpack5"
  }
}

[Bug] JavaScript heap out of memory (Vite build works, Storybook w/WebPack 4 works)

An effective workaround for those who are facing memory constraints is to double their Vite’s memory limit. Alternatively, disabling minification and sourcemaps can also lead to successful builds with only 4gb of allocated RAM.

build: {
  minify: false,
  sourcemap: false,
},

It was discovered that disabling minification alone is insufficient to meet my requirement for sourcemaps. Therefore, this workaround may not be the optimal solution after all.

MDX2: Can’t resolve ‘@mdx-js/react’

After attempting the MDX2 workaround, it was concluded that a slight alteration was necessary to make it successful. A version of @mdx-js/react v2 had to be installed prior for it all to come together properly – as outlined via https://github.com/storybookjs/storybook/.

Opt-in MDX2 support

SB6.5 adds experimental opt-in support for MDXv2. To install:

npm install -D @storybook/mdx2-csf @mdx-js/react

Then add the previewMdx2 feature flag to your .storybook/main.js config:

module.exports = {
  features: {
    previewMdx2: true,
  },
};

After attempting a range of remedies with no success, multiple errors were encountered – spanning those listed in this instance to #18266. It appeared that Storybook would either not build at all or assemble successfully yet render vacant screens as opposed to my MDX material. Fortunately, the workaround enabled me to eventually get both Storybook’s construction and display of my MDX files working properly again!

[6.0.0-beta.2] Storybook v6 not working with Typescript

If you are using Storybook v6 and are experiencing issues when using TypeScript in a Nuxt.js project, here are a few things you can try to troubleshoot the problem:

1. Make sure that you have installed the necessary dependencies. In addition to @nuxt/storybook, @storybook/vue, and @storybook/addon-essentials, you will also need to install the @storybook/addon-docs addon, as well as the @storybook/preset-typescript preset.
2. Check your configuration files (such as .storybook/main.js) for any syntax errors or missing values. The @storybook/preset-typescript preset requires that you set the stories and addons arrays in your configuration file.
3. If you are using a Nuxt.js configuration file (such as nuxt.config.js) to set up your TypeScript configuration, make sure that it is being correctly imported in your Storybook configuration file.
4. If you are using the @nuxt/typescript-build module to set up TypeScript in your Nuxt.js project, make sure that it is compatible with Storybook v6. You may need to use an older version of the module if you are encountering issues.

Module not found: Error: Can’t resolve mdx file

If you are encountering a “Module not found” error when running Storybook in a Nuxt.js project, it is likely that there is a problem with your configuration. Here are a few things you can try to troubleshoot this error:

1. Make sure that you have installed the necessary dependencies. In order to use MDX files in Storybook, you will need to have the @storybook/addon-docs addon installed in your project.
2. Check the file paths in your configuration files (such as .storybook/main.js) for any typos or mistakes. The “Module not found” error is often caused by a problem with the file path.
3. If you are using a Nuxt.js configuration file (such as nuxt.config.js) to set up your project, make sure that it is being correctly imported in your Storybook configuration file.
4. If you are using a custom webpack configuration, make sure that it is correctly set up to handle MDX files. You may need to add a loader or plugin to process these files.

[Bug] Cannot build storybook in amplify, missing “@storybook/core-common”

If you are encountering an error stating that the @storybook/core-common module is missing when trying to build Storybook in an Amplify project, here are a few things you can try to troubleshoot the issue:

1. Make sure that you have installed the necessary dependencies. In order to build Storybook in an Amplify project, you will need to have the @nuxt/storybook, @storybook/vue, and @storybook/addon-essentials modules installed, as well as the @storybook/core-common module.
2. Check your configuration files (such as .storybook/main.js) for any syntax errors or missing values. The @storybook/core-common module is required in order to build Storybook, so make sure that it is correctly imported in your configuration.
3. If you are using a custom webpack configuration in your Amplify project, make sure that it is set up correctly to handle the @storybook/core-common module. You may need to add a loader or plugin to process this module.
4. If you are using a package manager (such as npm or yarn) to install dependencies, make sure that it is up to date. Outdated package managers may cause errors when trying to build Storybook.

Control boolean with default value in component is not initialized correctly (vue js component)

If you are using Storybook to develop and test your Vue.js components, and you are experiencing an issue where a boolean component property is not being initialized correctly with its default value, here are a few things you could try:

1. Make sure that you have correctly defined the default value for the boolean component property in the component’s props option.

props: {
  myBooleanProp: {
    type: Boolean,
    default: true
  }
}

2. Make sure that you are passing the correct default value to the component when you are using it in your Storybook stories.

<template>
  <my-component :my-boolean-prop="true" />
</template>

3. If you are using a Vuex store in your project, make sure that the boolean component property is being initialized correctly in the store. If you are not using a store, you can skip this step.

Custom theme not propagated within Storybook

If you are using Storybook to develop and test your components and you are trying to use a custom theme, but the theme is not being applied correctly within Storybook, here are a few things you could try:

1. Make sure that you have correctly installed and configured the @storybook/addon-jest package, which is required for applying custom themes in Storybook.
2. In your .storybook/preview.js file, import the theme file and pass it to the addParameters method:

import { addParameters } from '@storybook/vue';
import theme from './my-custom-theme';

addParameters({
  theme,
});

3. If you are using a custom webpack configuration in your project, make sure that the theme file is being correctly resolved by webpack. You may need to add the theme file to the resolve.alias option in your webpack configuration.

Storybook Theming: loading custom Roboto or Ciutadella font not loading

If you are using Storybook to develop and test your components and you are trying to use a custom font such as Roboto or Ciutadella, but the font is not being applied correctly within Storybook, here are a few things you could try:

1. Make sure that you have correctly installed and configured the @storybook/addon-jest package, which is required for applying custom fonts in Storybook.
2. In your .storybook/preview.js file, import the font file and apply it to the document head using the addParameters method:

import { addParameters } from '@storybook/vue';
import './fonts/roboto.css';

addParameters({
  docs: {
    headHTML: `
      <style>
        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
      </style>
    `,
  },
});

3. If you are using a custom webpack configuration in your project, make sure that the font files are being correctly resolved by webpack. You may need to add the font files to the resolve.alias option in your webpack configuration.

Angular regression `Error trying to diff ‘[…]’ Only arrays and iterables are allowed` when using array properties

If you are using Storybook to develop and test your Angular components and you are experiencing an error saying “Error trying to diff ‘[…]’ Only arrays and iterables are allowed” when using array properties, it may be because you are trying to bind an array to an Angular template using the [...] syntax.

In Angular, the [...] syntax is used to bind component properties to template elements. However, it only works with properties of type string, number, or boolean. If you try to bind an array or an iterable object using this syntax, you will get the “Only arrays and iterables are allowed” error.

To fix this issue, you can either convert the array property to a string or use a different syntax to bind the array to the template. For example, you can use the *ngFor directive to iterate over the elements of the array and bind them to the template:

<ul>
  <li *ngFor="let item of myArray">{{ item }}</li>
</ul>

Component-level css not loading into stories

During the construction of Storybook with build-storybook, it became apparent that SCSS styles in Vue Single File Components were being disregarded.

<style lang="scss">
// ...
</style>

After careful examination, the issue of styling my Vue components in a Yarn workspace was successfully resolved. The components were split among several packages that had been marked as ES Modules with “type”: “module” and set to have no side effects via “sideEffects: false” for tree-shaking optimization. To apply CSS styles correctly, an additional rule specifically targeted towards SCSS files was created while simultaneously enabling their respective side effects flag – resulting in successful resolution overall.

// .storybook/main.js
module.exports = {
  // ... other non-important stuff
  webpackFinal: (config) => {
    config.module.rules.push({
      test: /\.scss$/,
      sideEffects: true,
      use: ['vue-style-loader', 'css-loader', 'sass-loader'],
    });

    return config;
  },
};

Storybook is not applying Tailwind CSS styles when working on components that use Redwood scaffold tailwind styles

If you are using Storybook to develop and test your components, and you are using Tailwind CSS as your CSS framework, but the styles are not being applied correctly when working on components that use Redwood scaffold styles, there are a few things you could try:

1. Make sure that you have correctly installed and configured the @storybook/vue and @storybook/addon-cssresources packages, which are required for applying custom styles in Storybook.
2. In your .storybook/main.js file, add the cssresources option to the storybook object and specify the path to your Tailwind CSS configuration file:

module.exports = {
  stories: ['../src/**/*.stories.js'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links', '@storybook/addon-cssresources'],
  cssresources: [
    {
      id: `tailwind`,
      code: `@import './path/to/tailwind.config.css';`,
      picked: true,
    },
  ],
};

3. In your component stories, wrap the component with the cssresources decorator and specify the id of the custom styles that you want to apply:

import { cssresources } from '@storybook/addon-cssresources';

export default {
  title: 'My Component',
  decorators: [cssresources({ id: 'tailwind' })],
  parameters: {
    cssresources: [
      {
        id: `tailwind`,
        code: `@import './path/to/tailwind.config.css';`,
        picked: true,
      },
    ],
  },
};

export const Default = () => ({
  template: '<my-component />',
});

More issues from Nuxt Community repos

Troubleshooting nuxt-community-axios-module | Troubleshooting nuxt-community-sitemap-module| Troubleshooting-nuxt-community-i18n-module | Troubleshooting nuxt-community-proxy-module | Troubleshooting nuxt-community-cloudinary-module