Storybook: Updating theme and brand - throwing Object(...) not a function

Created on 9 May 2019  路  7Comments  路  Source: storybookjs/storybook

how do you change the storybook logo?

I'm getting below errors after applying the theme:

import { create } from '@storybook/theming';

yourTheme.js

export default create({
  base: 'light',

  brandTitle: 'My custom storybook',
  brandUrl: 'https://example.com',
  brandImage: 'https://placehold.it/350x150',
});

config.js

import yourTheme from './yourTheme';

const req = require.context('../stories', true, /\.stories\.js$/);
function loadStories() {
  req.keys().forEach(filename => req(filename));
}

addDecorator(story => (
  <ThemeProvider theme={theme}>
    {story()}
  </ThemeProvider>
));

addParameters({
  options: {
    theme: yourTheme,
  },
});

configure(loadStories, module);

Uncaught TypeError: Object(...) is not a function
    at Module../node_modules/@emotion/core/dist/core.browser.esm.js (core.browser.esm.js:15)
    at __webpack_require__ (bootstrap:781)
    at fn (bootstrap:149)
    at Module../node_modules/@emotion/styled-base/dist/styled-base.browser.esm.js (styled-base.browser.esm.js:1)
    at __webpack_require__ (bootstrap:781)
    at fn (bootstrap:149)
    at Module../node_modules/@emotion/styled/dist/styled.browser.esm.js (styled.browser.esm.js:1)
    at __webpack_require__ (bootstrap:781)
    at fn (bootstrap:149)
    at Object../node_modules/@storybook/theming/dist/index.js (index.js:9)

package.json

  "@storybook/addon-actions": "^5.0.11",
    "@storybook/addon-info": "^5.0.11",
    "@storybook/addon-links": "^5.0.11",
    "@storybook/addon-storysource": "^5.0.11",
    "@storybook/addons": "^5.0.11",
    "@storybook/react": "^5.0.11",
    "babel-core": "^6.26.3",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.0.1",
    "babel-loader": "^7.1.4",
    "babel-plugin-styled-components": "^1.10.0",
    "babel-plugin-transform-object-assign": "^6.22.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2017": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "stylelint-config-recommended": "^2.1.0",
    "stylelint-config-styled-components": "^0.1.1",
    "stylelint-custom-processor-loader": "^0.5.0",
    "stylelint-processor-styled-components": "^1.3.2",
    "webpack": "4.8.3",
    "webpack-cli": "2.1.3",
    "webpack-dev-server": "3.1.4",
    "webpack-merge": "4.1.0"
inactive question / support theming

Most helpful comment

I dont think the issue is resolved. I'm still seeing the same error from the console.

upgraded storybook to v5.2.5

Uncaught TypeError: Object(...) is not a function
    at Module../node_modules/@emotion/core/dist/core.browser.esm.js (core.browser.esm.js:10)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Module../node_modules/@emotion/styled-base/dist/styled-base.browser.esm.js (styled-base.browser.esm.js:1)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Module../node_modules/@emotion/styled/dist/styled.browser.esm.js (styled.browser.esm.js:1)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Object../node_modules/@storybook/theming/dist/index.js (index.js:47)

All 7 comments

This is the error i'm getting too.

I dont think the issue is resolved. I'm still seeing the same error from the console.

upgraded storybook to v5.2.5

Uncaught TypeError: Object(...) is not a function
    at Module../node_modules/@emotion/core/dist/core.browser.esm.js (core.browser.esm.js:10)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Module../node_modules/@emotion/styled-base/dist/styled-base.browser.esm.js (styled-base.browser.esm.js:1)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Module../node_modules/@emotion/styled/dist/styled.browser.esm.js (styled.browser.esm.js:1)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Object../node_modules/@storybook/theming/dist/index.js (index.js:47)

I dont think the issue is resolved. I'm still seeing the same error from the console.

upgraded storybook to v5.2.5

Uncaught TypeError: Object(...) is not a function
    at Module../node_modules/@emotion/core/dist/core.browser.esm.js (core.browser.esm.js:10)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Module../node_modules/@emotion/styled-base/dist/styled-base.browser.esm.js (styled-base.browser.esm.js:1)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Module../node_modules/@emotion/styled/dist/styled.browser.esm.js (styled.browser.esm.js:1)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Object../node_modules/@storybook/theming/dist/index.js (index.js:47)

Receiving the same error after installing v5.2.5

Can you please try to import the create function like so:

import { create } from '@storybook/theming/create';

export default create({
  base: 'light',

  brandTitle: 'My custom storybook',
  brandUrl: 'https://example.com',
  brandImage: 'https://placehold.it/350x150',
});

8597 This will add an API for setting themes ever better that should prevent this issue as well!

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

miljan-aleksic picture miljan-aleksic  路  3Comments

zvictor picture zvictor  路  3Comments

shilman picture shilman  路  3Comments

tirli picture tirli  路  3Comments

Jonovono picture Jonovono  路  3Comments