question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Storybook addons not working when running creevey

See original GitHub issue

Hi,

We have a functional Storybook with some standard addons for adding toolbar buttons and theme switching funtionality and a custom webpack config in order to support sass for storybook in my main.js

const path = require('path');

module.exports = {
	"stories": [
		"../src/**/*.stories.mdx",
		"../src/**/*.stories.@(js|jsx|ts|tsx)"
	],
	"addons": [
		"@storybook/addon-links",
		"@storybook/addon-essentials",
		"storybook-addon-themes",
		{
			name: '@storybook/addon-docs',
			options: {
			  configureJSX: true,  //  Needed for the mdx documentation files
			  babelOptions: {},
			  sourceLoaderOptions: null
			},
		},		
		"creevey"
	],
	webpackFinal: async (config, { configType }) => {
		// `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
		// You can change the configuration based on that.
		// 'PRODUCTION' is used when building the static version of storybook.

		// Make whatever fine-grained changes you need
		config.module.rules.push({
			test: /\.*scss$/,
			use: ['style-loader', 'css-loader', 'resolve-url-loader', 'sass-loader'],
			include: path.resolve(__dirname, '../'),
		});

		// Return the altered config
		return config;
	}
}

When I run Creevey and refresh the page, my classes for theming applied on the body element seem gone and therefore the entire storybook has no styling anymore. Creevey takes snapshots of these unstyled elements for comparing but we can’t use these in production. Here the example of a button with Creevey not running: image

This is the result after starting Creevey and refreshing the page: image

I also see this warning but i’m not sure if it is related: image

It says unable to find main.js in a strange path construction and a few lines after that it adds the stories defined in main.js so it must be able to find it I think?

Do you have any idea what could be causing this?

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:19

github_iconTop GitHub Comments

1reaction
BmsVisionJocommented, Jan 18, 2021

I managed to achieve the desired result by setting our own globals instead of using the themes addon. This now sets the classes correctly and by using your experimental gobals support we are now able to run the tests for different themes. Closing this issue now and will keep track of upcomming progress. Thank you.

1reaction
wKichcommented, Jan 7, 2021

@BmsVisionJo I’ve just released the new version with the fix. Please, take a look.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Storybook addons not working when running creevey #99
To clarify, you add creevey addon to the storybook config, then start storybook and open it in a browser. Your components are styled,...
Read more >
Creevey Addon | Storybook: Frontend workshop for UI ...
Creevey is trying to build storybook but fail or tests don't work. A little bit later I'll add possibility to run tests without...
Read more >
creevey - npm
Start using creevey in your project by running `npm i creevey`. ... Storybook parameters. Creevey under the hood; Future plans; Known issues ......
Read more >
storybook cannot read properties of undefined - You.com
If you use TypeScript, Storybook not only has ComponentStory<typeof Component> it also ... my storybook is running on localhost:4400 and working properly, ...
Read more >
creevey - npm Package Health Analysis - Snyk
Is creevey safe to use? While scanning the latest version of creevey, we found that a security review is needed. A total of...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found