storybookjs / storybook-addon-console Goto Github PK

Describe the bug

This addon requires prop-types as a direct dependency, but does not declare it in either dependencies or peerDependencies. A quick search in issues does not give me any result.

Steps to reproduce the behavior

1. create a project using yarn v2 pnp
2. add storybook and this addon
3. run storybook to see the error

Expected behavior

no error

Screenshots and/or logs

Environment

N/A

Additional context

N/A

Workaround

in yarnrc.yml

packageExtensions:
  "@storybook/addon-console@*":
    dependencies:
      prop-types: "*"

Is there a way to output the real object instead of "Object"

Now I need to add JSON.stringify to debug

It would be great if this project included types to improve its compatibility with typed languages such as TypeScript.

Describe the bug

After updating to Storybook v7.6.0, there is a runtime error in Storybook when using the addon.

Steps to reproduce the behavior

1. Setup addon in a Storybook v7.6.0 project
2. Serve the project

https://stackblitz.com/edit/github-3rpmxh?file=.storybook%2Fpreview.ts

Expected behavior

The app runs

Screenshots and/or logs

There is a runtime error:

Error: Cannot find module '@storybook/global'
    at webpackEmptyContext (https://github3rpmxh-dy3t--6006--6843a59c.local-corp.webcontainer.io/main.iframe.bundle.js:155:10)
    at ../../lib/channels/dist/index.js (https://github3rpmxh-dy3t--6006--6843a59c.local-corp.webcontainer.io/vendors-node_modules_storybook_addon-console_dist_index_js-node_modules_storybook_addon-docs_-74e763.iframe.bundle.js:91935:26)
    at https://github3rpmxh-dy3t--6006--6843a59c.local-corp.webcontainer.io/vendors-node_modules_storybook_addon-console_dist_index_js-node_modules_storybook_addon-docs_-74e763.iframe.bundle.js:87989:50
    at ./node_modules/@storybook/addon-actions/dist/index.js (https://github3rpmxh-dy3t--6006--6843a59c.local-corp.webcontainer.io/vendors-node_modules_storybook_addon-console_dist_index_js-node_modules_storybook_addon-docs_-74e763.iframe.bundle.js:94527:31)
    at __webpack_require__ (https://github3rpmxh-dy3t--6006--6843a59c.local-corp.webcontainer.io/runtime~main.iframe.bundle.js:28:33)
    at fn (https://github3rpmxh-dy3t--6006--6843a59c.local-corp.webcontainer.io/runtime~main.iframe.bundle.js:353:21)
    at ./node_modules/@storybook/addon-console/dist/index.js (https://github3rpmxh-dy3t--6006--6843a59c.local-corp.webcontainer.io/vendors-node_modules_storybook_addon-console_dist_index_js-node_modules_storybook_addon-docs_-74e763.iframe.bundle.js:97953:21)
    at __webpack_require__ (https://github3rpmxh-dy3t--6006--6843a59c.local-corp.webcontainer.io/runtime~main.iframe.bundle.js:28:33)
    at fn (https://github3rpmxh-dy3t--6006--6843a59c.local-corp.webcontainer.io/runtime~main.iframe.bundle.js:353:21)
    at ./.storybook/preview.ts (https://github3rpmxh-dy3t--6006--6843a59c.local-corp.webcontainer.io/main.iframe.bundle.js:16:82)

Environment

• OS: any
• Node.js version: LTS
• NPM version: 10

Additional context

Describe the bug

On IE11, when the console is not displayed, an error is displayed with the following error:

TypeError: invalid calling Object
   at logger.error (http://localhost:3001/vendors~main.e923ab1e42d363b44a8b.bundle.js:70813:27)
   at exports.logger.error (http://localhost:3001/vendors~main.e923ab1e42d363b44a8b.bundle.js:74090:9)
   at showException (http://localhost:3001/vendors~main.e923ab1e42d363b44a8b.bundle.js:74330:3)
   at renderUI (http://localhost:3001/vendors~main.e923ab1e42d363b44a8b.bundle.js:74455:9)
   at emit (http://localhost:3001/vendors~main.e923ab1e42d363b44a8b.bundle.js:97244:15)
   at Anonymous function (http://localhost:3001/vendors~main.e923ab1e42d363b44a8b.bundle.js:73656:9)
   at ZoneDelegate.prototype.invokeTask (http://localhost:3001/vendors~main.e923ab1e42d363b44a8b.bundle.js:242597:13)
   at Zone.prototype.runTask (http://localhost:3001/vendors~main.e923ab1e42d363b44a8b.bundle.js:242370:21)
   at ZoneTask.invokeTask (http://localhost:3001/vendors~main.e923ab1e42d363b44a8b.bundle.js:242673:17)
   at invoke (http://localhost:3001/vendors~main.e923ab1e42d363b44a8b.bundle.js:242662:21)"

This error does not occur when the console is open.

To Reproduce
Steps to reproduce the behavior:

1. Simply start a book
2. See error

Expected behavior
Page should load.

Code snippets

Changing the following code in @storybook/addon-console/dist/index.js fixes the issue:

var cLogger = {
  log: logger.log.bind(logger),
  warn: logger.warn.bind(logger),
  error: logger.error.bind(logger)
};

System:

• OS: Windows10
• Device: PC
• Browser: IE11
• Framework: Angular
• Version: 1.1.0

I just updated to the 4.0 version of Storybook and got this warning

@storybook/[email protected] requires a peer of @storybook/addon-actions@^3.0.0 but none is installed. You must install peer dependencies yourself.

It would be great to see the dependencies either updated or have this become a configurable option of the actions addon per #1.

Compared to other addons, this addon is required to be added in the config.js as there is no register function. It would be nice it could be applied as every other addon.

Current setup

config.js:

import '@storybook/addon-console';

Expected setup

addons.js:

import '@storybook/addon-console/register';

Right now, if I changed the <span> to <pre> the output in the actions panel is much better, but I don't see where the message is actually getting wrapped in <span>.

We could add this rule (but it seems a bit "broad"

span {
    white-space: pre;
    font-family: monospace;
    display: block;
    unicode-bidi: embed
}

Doing some more digging myself, looking for pointers.

Describe the bug

A clear and concise description of what the bug is.

Steps to reproduce the behavior

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots and/or logs

If applicable, add screenshots and/or logs to help explain your problem.

Environment

• OS: [e.g. iOS]
• Node.js version: [e.g. v12.17.0]
• NPM version: [e.g. 6.14.4]
• Browser (if applicable): [e.g. chrome, safari]
• Browser version (if applicable): [e.g. 22]
• Device (if applicable): [e.g. iPhone6]

Additional context

Add any other context about the problem here.

Is there documentation for using this plugin in Storybook 7?

In the example provided in preview.js, type annotation is available. Which is wrong for the .js file.

I ran into an error console logging an object with a circular reference, which is a limitation of JSON.stringify(). This adds a bit of unwanted overhead in debugging, since I have to turn off the console anytime I need to log circular references, so I'd love to see this worked out.

Otherwise, this addon has been very helpful. Thanks!

Hi.
Do you plan to support v6 of storybook react?

Describe the bug

I import the plugin in my preview.js with a simple import:

import '@storybook/addon-console';

It works fine for Storybook v6, but I'm getting an error after updating to v7.

Expected behavior

The addon works with Storybook v7.

Screenshots and/or logs

ERROR in ./node_modules/@storybook/addon-console/dist/index.js 8:37-61
Module not found: Error: Can't resolve 'global/window'

Environment

• Storybook version: v7.0.0-rc.7
• OS: macOS
• Node.js version: v18.15.0
• NPM version: v8.19.4
• Browser (if applicable): Chrome

I try to work on #66 but when running yarn, I got this:

yarn
yarn install v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
warning [email protected]: Invalid bin field for "file-loader".
warning [email protected]: Invalid bin field for "mini-css-extract-plugin".
warning [email protected]: Invalid bin field for "terser-webpack-plugin".
warning [email protected]: Invalid bin field for "url-loader".

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
src\index.js -> dist\index.js
src\react-decorator.js -> dist\react-decorator.js
Successfully compiled 2 files with Babel (3530ms).
Transpiling completed.

npm ERR! could not determine executable to run

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\homa\AppData\Local\npm-cache\_logs\2023-04-05T00_12_58_295Z-debug-0.log

It seems like npx typescript doesn't work.

Maybe adding typescript as regular dev deps?

Describe the bug

If I add this addon to my storybook v6, it throws an error and storybook doesn't start-up.

Steps to reproduce the behavior

1. Setup Storybook v6
2. Set the addons to addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-console'],
3. Run start-storybook
4. Error

Expected behavior

Shouldn't error.

Screenshots and/or logs

ERR! Error: Accessing non-existent addons channel, see https://storybook.js.org/basics/faq/#why-is-there-no-addons-channel
ERR!     at AddonStore.getChannel (/Users/simeon.cheeseman/Development/settings-frontend/node_modules/@storybook/addons/dist/index.js:53:13)
ERR!     at Object.actionHandler [as log] (/Users/simeon.cheeseman/Development/settings-frontend/node_modules/@storybook/addon-actions/dist/preview/action.js:23:34)
ERR!     at console.logger.log (/Users/simeon.cheeseman/Development/settings-frontend/node_modules/@storybook/addon-console/dist/index.js:113:37)
ERR!     at outputStartupInformation (/Users/simeon.cheeseman/Development/settings-frontend/node_modules/@storybook/core/dist/server/build-dev.js:253:11)
ERR!     at buildDevStandalone (/Users/simeon.cheeseman/Development/settings-frontend/node_modules/@storybook/core/dist/server/build-dev.js:333:5)
ERR!     at processTicksAndRejections (node:internal/process/task_queues:94:5)

Environment

• OS: OSX 11.2.2
• Node.js version: 15.9.0
• NPM version: 7.5.3

Hello --

I'm looking for guidance on how I can go about only including console.log messages in the action logger panel.

In my config.js, I have the following:

import { setConsoleOptions } from '@storybook/addon-console';
.
.
.
const panelExclude = setConsoleOptions({}).panelExclude;
setConsoleOptions({
  panelExclude: [...panelExclude, /error/, /warn/]
});

Currently this still outputs everything to the action logger panel (excluding [HMR])

Describe the bug

@ndelangen has released v2.0.0, Thank you.
but some scripts does not seem to work in their current state.
Specifically, there are 4.

• test (Also includes tdd)
• lint
• start
• build:storybook

Steps to reproduce the behavior

1. cd storybook-addon-console
2. Execute the above commands(e.g. yarn test)

Expected behavior

No errors in all commands.

Screenshots and/or logs

N/A

Environment

• OS: MacOS Ventura
• Node.js version: v19.8.1
• NPM version: 9.5.1

Additional context

N/A

Installation instructions say:

Just import it in your storybook config.js:

What config.js? I looked it up in the docs, but nothing comes up. All the storybook config files I know are located in the .storybook folder: main.ts and preview.ts. I tried adding the addon to main.ts, "@storybook/addon-console", but with no result. Is that a case of an obsolete doc or am I missing something?

in Storybook v4.0.0

Is there a way to clear the logs on story change?

Nothing is displayed when using console.dir. Can we make it work for this as well?

I have code similar to the following in a component/story I'm testing, where I'm logging a function to the console.

In dev tools, the function gets logged.

In the action logger using the console addon, I get ["someFunction", null]

const someFunction = () => {
  // some effects
};

console.log('someFunction', someFunction)

It looks so useful addon in React Native with storybook.
Is it possible to use this with RN?

"react": "^16.8.6", "@storybook/addon-actions": "^5.0.10", "@storybook/addon-console": "^1.1.0", "@storybook/addon-info": "^5.0.10", "@storybook/addon-links": "^5.0.10", "@storybook/addon-storysource": "^5.0.10", "@storybook/addon-viewport": "^5.0.10", "@storybook/addons": "^5.0.10", "@storybook/react": "^5.0.10", "@types/storybook__react": "^4.0.1",

.storybook/config.js
import '@storybook/addon-console';

I didn't find a way to wrap only console.log attempt to be sent to the console add-on, while keeping normal behavior (browser's console) for console.warn or console.error.

I think that is some situations this can be useful, at least to skip React development mode warnings.

I'm getting this error:

info @storybook/react v3.3.15
info 
info => Loading custom .babelrc
info => Loading custom addons config.
info => Loading custom webpack config (extending mode).
info Building storybook ...
ERR! Failed to build the storybook
ERR! Module not found: Error: Can't resolve '@babel/runtime/helpers/toConsumableArray' in '<package>/node_modules/@storybook/addon-console/dist'

Sometimes it's

info @storybook/react v3.3.15
info
info => Loading custom .babelrc
info => Loading custom addons config.
info => Loading custom webpack config (extending mode).
info Building storybook ...
ERR! Failed to build the storybook
ERR! Module not found: Error: Can't resolve '@babel/runtime/helpers/inherits' in '<package>/node_modules/@storybook/addon-console/dist'

This started happening the day before yesterday, I also saw that the latest version is from 4 days ago and it updated babel.

These are my storybook dependencies:

    "@dump247/storybook-state": "^1.5.0",
    "@storybook/addon-actions": "3.3.15",
    "@storybook/addon-console": "^1.0.4",
    "@storybook/addon-knobs": "3.3.15",
    "@storybook/addon-links": "3.3.15",
    "@storybook/addon-options": "3.3.15",
    "@storybook/addon-storysource": "3.4.8",
    "@storybook/addon-viewport": "3.4.8",
    "@storybook/cli": "3.3.15",
    "@storybook/react": "3.3.15",
    "storybook-addon-versions": "^0.4.3",
    "storybook-readme": "3.3.0",

I had things configured fine for 5.2.8, but when upgrading to 5.3 and moving the reference to the new file format, i get errors on startup.

ERR! Error: Accessing non-existent addons channel, see https://storybook.js.org/basics/faq/#why-is-there-no-addons-channel
ERR! at AddonStore.getChannel (/Users/joe/Projects/subfirelib/node_modules/@storybook/addons/dist/index.js:45:13)
ERR! at Object.actionHandler [as log] (/Users/joe/Projects/subfirelib/node_modules/@storybook/addon-actions/dist/preview/action.js:25:34)

Is this addon compatible with MDX?

so we can do

addDecorator(withConsole());

instead of

addDecorator((storyFn, context) => withConsole()(storyFn)(context));