I am currently trying to add the @storybook/addon-console to Storybook.
After running npm install @storybook/addon-console @storybook/addon-actions --save-dev, I get this error when I try to run npm run storybook:
Error: Accessing non-existent addons channel, see https://storybook.js.org/basics/faq/#why-is-there-no-addons-channel
at AddonStore.getChannel (/Users/mitchell/Documents/GitHub/TapTapesWeb/node_modules/@storybook/addons/dist/cjs/index.js:53:13)
I tried to add this to my config.js file as per that link, to no avail:
import addons, { mockChannel } from '@storybook/addons';
addons.setChannel(mockChannel());
This is my Storybook main.js file:
module.exports = {
stories: ['../components/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'storybook-addon-material-ui',
'@storybook/addon-postcss',
'@storybook/addon-console',
'@storybook/addon-actions'
],
reactOptions: {
fastRefresh: true
}
};
Here is my Storybook config.js file:
import theme, { muiTheme } from '../constants/theme';
import React from 'react';
import { MuiThemeProvider } from '@material-ui/core/styles';
import { ThemeProvider } from 'styled-components';
import CssBaseline from '@material-ui/core/CssBaseline';
export const decorators = [
(Story) => (
<ThemeProvider theme={theme}>
<MuiThemeProvider theme={muiTheme}>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline />
<Story />
</MuiThemeProvider>
</ThemeProvider>
)
];
Here is my package.json:
{
"name": "TapTapesWeb",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "cross-env NODE_OPTIONS='--inspect' next dev",
"build": "next build",
"start": "next start",
"test": "jest --passWithNoTests",
"lint": "eslint .",
"lint:fix": "eslint --fix .",
"format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc",
"postinstall": "husky install",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.34",
"@fortawesome/free-brands-svg-icons": "^5.15.2",
"@fortawesome/free-regular-svg-icons": "^5.15.2",
"@fortawesome/free-solid-svg-icons": "^5.15.2",
"@fortawesome/react-fontawesome": "^0.1.14",
"@material-ui/core": "^4.11.3",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.57",
"@reduxjs/toolkit": "^1.5.0",
"axios": "^0.21.1",
"cross-env": "^7.0.3",
"lodash": "^4.17.21",
"next": "10.0.7",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-horizontal-scrolling-menu": "^0.7.10",
"react-redux": "^7.2.2",
"redux": "^4.0.5",
"styled-components": "^5.2.1"
},
"devDependencies": {
"@babel/core": "^7.13.1",
"@storybook/addon-actions": "^6.2.0-beta.5",
"@storybook/addon-console": "^1.2.3",
"@storybook/addon-essentials": "^6.2.0-beta.5",
"@storybook/addon-links": "^6.2.0-beta.5",
"@storybook/addon-postcss": "^2.0.0",
"@storybook/addon-viewport": "^6.2.0-beta.5",
"@storybook/addons": "^6.2.0-beta.5",
"@storybook/react": "^6.2.0-beta.5",
"babel-jest": "^26.6.3",
"babel-loader": "^8.2.2",
"babel-plugin-styled-components": "^1.12.0",
"eslint": "^7.20.0",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-plugin-simple-import-sort": "^7.0.0",
"husky": "^5.1.1",
"jest": "^26.6.3",
"prettier": "^2.2.1",
"storybook-addon-material-ui": "^0.9.0-alpha.24",
"storybook-addon-state": "^1.0.3"
}
}