search

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.62k stars 9.31k forks source link

TypeError: Cannot add property __, object is not extensible #12853

Closed shman2000 closed 3 years ago

shman2000 commented 4 years ago

I'm trying to run a very simple story:

import React,{ h, Component } from 'react';
import Input from '../components/helpers/Input';

export default { 
    title: 'Input',
    component: Input
}

export const General = () => (
    <Input
        onValueChange={(e) => { console.log(e) }}
    />
)

but it is resulting in this error:

TypeError: Cannot add property __, object is not extensible at http://localhost:60967/vendors~main.ca482984472b487f5602.bundle.js:58056:1687 at x (http://localhost:60967/vendors~main.ca482984472b487f5602.bundle.js:58056:2709) at x (http://localhost:60967/vendors~main.ca482984472b487f5602.bundle.js:58056:2683) at b (http://localhost:60967/vendors~main.ca482984472b487f5602.bundle.js:58056:1648) at A (http://localhost:60967/vendors~main.ca482984472b487f5602.bundle.js:58056:5639) at Module.H (http://localhost:60967/vendors~main.ca482984472b487f5602.bundle.js:58056:7529) at preactRender (http://localhost:60967/vendors~main.ca482984472b487f5602.bundle.js:35754:12) at StoryRenderer.renderMain [as render] (http://localhost:60967/vendors~main.ca482984472b487f5602.bundle.js:35780:3) at _callee$ (http://localhost:60967/vendors~main.ca482984472b487f5602.bundle.js:27654:33) at tryCatch (http://localhost:60967/vendors~main.ca482984472b487f5602.bundle.js:85761:40)

main.js:

module.exports = {
    stories: ['../stories/*.story.js'],
};

Storybook 6.0.26

we use:

"preact": "^10.3.4"

and

"devDependencies": { "@babel/cli": "^7.12.1", "@babel/core": "^7.12.3", "@babel/plugin-proposal-class-properties": "^7.12.1", "@babel/plugin-proposal-decorators": "^7.0.0", "@babel/plugin-proposal-do-expressions": "^7.0.0", "@babel/plugin-proposal-export-default-from": "^7.0.0", "@babel/plugin-proposal-export-namespace-from": "^7.0.0", "@babel/plugin-proposal-function-bind": "^7.0.0", "@babel/plugin-proposal-function-sent": "^7.0.0", "@babel/plugin-proposal-json-strings": "^7.0.0", "@babel/plugin-proposal-logical-assignment-operators": "^7.12.1", "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1", "@babel/plugin-proposal-numeric-separator": "^7.12.1", "@babel/plugin-proposal-optional-chaining": "^7.12.1", "@babel/plugin-proposal-pipeline-operator": "^7.12.1", "@babel/plugin-proposal-private-methods": "^7.12.1", "@babel/plugin-proposal-private-property-in-object": "^7.12.1", "@babel/plugin-proposal-throw-expressions": "^7.0.0", "@babel/plugin-syntax-dynamic-import": "^7.8.3", "@babel/plugin-syntax-import-meta": "^7.10.4", "@babel/plugin-transform-runtime": "^7.7.6", "@babel/preset-env": "^7.12.1", "@babel/preset-react": "^7.12.1", "@babel/runtime": "^7.12.1", "@storybook/preact": "^6.0.26", "babel-loader": "^8.1.0", "babel-plugin-module-resolver": "^3.1.1", "chromedriver": "^2.44.0", "compression-webpack-plugin": "^3.1.0", "cors": "^2.8.4", "css-loader": "^3.4.2", "file-loader": "^3.0.1", "grunt": "^1.0.4", "grunt-contrib-cssmin": "^3.0.0", "grunt-contrib-less": "^1.2.0", "grunt-contrib-watch": "^1.1.0", "husky": "^4.0.7", "mini-css-extract-plugin": "^0.5.0", "purgecss-webpack-plugin": "^1.4.0", "react-hot-loader": "^3.0.0", "react-snap": "^1.23.0", "style-loader": "^0.13.1", "sw-precache-webpack-plugin": "^0.11.5", "test-recorder": "^0.4.2", "uglifyjs-webpack-plugin": "^1.2.5", "webpack": "^4.29.2", "webpack-bundle-analyzer": "^3.7.0", "webpack-cli": "^3.3.12", "webpack-deep-scope-plugin": "^1.6.2", "webpack-dev-server": "^3.11.0", "workbox-webpack-plugin": "^3.4.1" }

Any idea how I can approach it?

Vincent-Carrier commented 4 years ago

Getting the same issue with Preact 10.5.5, TypeScript and the new JSX transform. Tried both Storybook 6.0 and 6.1 beta 1

Vincent-Carrier commented 4 years ago

Here is (part of) the Storybook webpack config, if this can help:

    HtmlWebpackPlugin {
      options: {
        template: '.../node_modules/@storybook/core/dist/server/templates/index.ejs',
        templateContent: false,
        templateParameters: [Function: templateParameters],
        filename: 'iframe.html',
        publicPath: 'auto',
        hash: false,
        inject: false,
        scriptLoading: 'blocking',
        compile: true,
        favicon: false,
        minify: {
          collapseWhitespace: true,
          removeComments: true,
          removeRedundantAttributes: true,
          removeScriptTypeAttributes: false,
          removeStyleLinkTypeAttributes: true,
          useShortDoctype: true
        },
        cache: true,
        showErrors: true,
        chunks: 'all',
        excludeChunks: [],
        chunksSortMode: 'none',
        meta: {},
        base: false,
        title: 'Webpack App',
        xhtml: false,
        alwaysWriteToDisk: true
      },
      childCompilerHash: undefined,
      assetJson: undefined,
      hash: undefined,
      version: 4
    },
    DefinePlugin {
      definitions: {
        'process.env': {
          NODE_ENV: '"development"',
          NODE_PATH: '""',
          PUBLIC_URL: '"."'
        },
        NODE_ENV: '"development"'
      }
    },
    WatchMissingNodeModulesPlugin {
      nodeModulesPath: '.../node_modules'
    },
    HotModuleReplacementPlugin {
      options: {},
      multiStep: undefined,
      fullBuildTimeout: 200,
      requestTimeout: 10000
    },
    CaseSensitivePathsPlugin {
      options: {},
      logger: Object [console] {
        log: [Function: log],
        warn: [Function: warn],
        dir: [Function: dir],
        time: [Function: time],
        timeEnd: [Function: timeEnd],
        timeLog: [Function: timeLog],
        trace: [Function: trace],
        assert: [Function: assert],
        clear: [Function: clear],
        count: [Function: count],
        countReset: [Function: countReset],
        group: [Function: group],
        groupEnd: [Function: groupEnd],
        table: [Function: table],
        debug: [Function: debug],
        info: [Function: info],
        dirxml: [Function: dirxml],
        error: [Function: error],
        groupCollapsed: [Function: groupCollapsed],
        Console: [Function: Console],
        profile: [Function: profile],
        profileEnd: [Function: profileEnd],
        timeStamp: [Function: timeStamp],
        context: [Function: context]
      },
      pathCache: {},
      fsOperations: 0,
      primed: false
    },
    ProgressPlugin {
      profile: false,
      handler: undefined,
      modulesCount: 500,
      showEntries: false,
      showModules: true,
      showActiveModules: true
    },
    DefinePlugin { definitions: {} }
  ],
  module: {
    rules: [
      {
        test: /\.(mjs|tsx?|jsx?)$/,
        use: [
          {
            loader: '.../node_modules/babel-loader/lib/index.js',
            options: {
              cacheDirectory: '.../node_modules/.cache/storybook/babel',
              sourceType: 'unambiguous',
              presets: [
                [
                  '.../node_modules/@babel/preset-env/lib/index.js',
                  {
                    shippedProposals: true,
                    useBuiltIns: 'usage',
                    corejs: '3'
                  }
                ],
                '.../node_modules/@babel/preset-typescript/lib/index.js'
              ],
              plugins: [
                '.../node_modules/@babel/plugin-transform-shorthand-properties/lib/index.js',
                '.../node_modules/@babel/plugin-transform-block-scoping/lib/index.js',
                [
                  '.../node_modules/@babel/plugin-proposal-decorators/lib/index.js',
                  { legacy: true }
                ],
                [
                  '.../node_modules/@babel/plugin-proposal-class-properties/lib/index.js',
                  { loose: true }
                ],
                [
                  '.../node_modules/@babel/plugin-proposal-private-methods/lib/index.js',
                  { loose: true }
                ],
                '.../node_modules/@babel/plugin-proposal-export-default-from/lib/index.js',
                '.../node_modules/@babel/plugin-syntax-dynamic-import/lib/index.js',
                [
                  '.../node_modules/@babel/plugin-proposal-object-rest-spread/lib/index.js',
                  { loose: true, useBuiltIns: true }
                ],
                '.../node_modules/@babel/plugin-transform-classes/lib/index.js',
                '.../node_modules/@babel/plugin-transform-arrow-functions/lib/index.js',
                '.../node_modules/@babel/plugin-transform-parameters/lib/index.js',
                '.../node_modules/@babel/plugin-transform-destructuring/lib/index.js',
                '.../node_modules/@babel/plugin-transform-spread/lib/index.js',
                '.../node_modules/@babel/plugin-transform-for-of/lib/index.js',
                '.../node_modules/babel-plugin-macros/dist/index.js',
                '.../node_modules/@babel/plugin-proposal-optional-chaining/lib/index.js',
                '.../node_modules/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js',
                [
                  '.../node_modules/babel-plugin-emotion/dist/babel-plugin-emotion.cjs.js',
                  { sourceMap: true, autoLabel: true }
                ],
                [
                  '.../node_modules/@babel/plugin-transform-react-jsx/lib/index.js',
                  { pragma: 'h' },
                  'preset'
                ]
              ]
            }
          }
        ],
        include: [ '...' ],
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        use: [
          {
            loader: '.../node_modules/babel-loader/lib/index.js',
            options: {
              sourceType: 'unambiguous',
              presets: [
                [
                  '.../node_modules/@babel/preset-env/lib/index.js',
                  {
                    shippedProposals: true,
                    useBuiltIns: 'usage',
                    corejs: '3'
                  }
                ],
                '.../node_modules/@babel/preset-react/lib/index.js'
              ],
              plugins: [
                '.../node_modules/@babel/plugin-transform-shorthand-properties/lib/index.js',
                '.../node_modules/@babel/plugin-transform-block-scoping/lib/index.js',
                [
                  '.../node_modules/@babel/plugin-proposal-decorators/lib/index.js',
                  { legacy: true }
                ],
                [
                  '.../node_modules/@babel/plugin-proposal-class-properties/lib/index.js',
                  { loose: true }
                ],
                [
                  '.../node_modules/@babel/plugin-proposal-private-methods/lib/index.js',
                  { loose: true }
                ],
                '.../node_modules/@babel/plugin-proposal-export-default-from/lib/index.js',
                '.../node_modules/@babel/plugin-syntax-dynamic-import/lib/index.js',
                [
                  '.../node_modules/@babel/plugin-proposal-object-rest-spread/lib/index.js',
                  { loose: true, useBuiltIns: true }
                ],
                '.../node_modules/@babel/plugin-transform-classes/lib/index.js',
                '.../node_modules/@babel/plugin-transform-arrow-functions/lib/index.js',
                '.../node_modules/@babel/plugin-transform-parameters/lib/index.js',
                '.../node_modules/@babel/plugin-transform-destructuring/lib/index.js',
                '.../node_modules/@babel/plugin-transform-spread/lib/index.js',
                '.../node_modules/@babel/plugin-transform-for-of/lib/index.js',
                '.../node_modules/babel-plugin-macros/dist/index.js',
                '.../node_modules/@babel/plugin-proposal-optional-chaining/lib/index.js',
                '.../node_modules/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js'
              ]
            }
          }
        ],
        include: /[\\/]node_modules[\\/](@storybook\/node-logger|are-you-es5|better-opn|boxen|chalk|commander|find-cache-dir|find-up|fs-extra|json5|node-fetch|pkg-dir|resolve-from|semver)/
      },
      {
        test: /\.md$/,
        use: [
          {
            loader: '.../node_modules/raw-loader/dist/cjs.js'
          }
        ]
      },
      {
        test: /\.js$/,
        include: /node_modules\/acorn-jsx/,
        use: [
          {
            loader: '.../node_modules/babel-loader/lib/index.js',
            options: {
              presets: [
                [
                  '.../node_modules/@babel/preset-env/lib/index.js',
                  { modules: 'commonjs' }
                ]
              ]
            }
          }
        ]
      },
      {
        test: /\.(stories|story).mdx$/,
        use: [
          {
            loader: '.../node_modules/babel-loader/lib/index.js',
            options: {
              babelrc: false,
              configFile: false,
              cacheDirectory: '.../node_modules/.cache/storybook/babel',
              sourceType: 'unambiguous',
              presets: [
                [
                  '.../node_modules/@babel/preset-env/lib/index.js',
                  {
                    shippedProposals: true,
                    useBuiltIns: 'usage',
                    corejs: '3'
                  }
                ],
                '.../node_modules/@babel/preset-typescript/lib/index.js'
              ],
              plugins: [
                '.../node_modules/@babel/plugin-transform-shorthand-properties/lib/index.js',
                '.../node_modules/@babel/plugin-transform-block-scoping/lib/index.js',
                [
                  '.../node_modules/@babel/plugin-proposal-decorators/lib/index.js',
                  { legacy: true }
                ],
                [
                  '.../node_modules/@babel/plugin-proposal-class-properties/lib/index.js',
                  { loose: true }
                ],
                [
                  '.../node_modules/@babel/plugin-proposal-private-methods/lib/index.js',
                  { loose: true }
                ],
                '.../node_modules/@babel/plugin-proposal-export-default-from/lib/index.js',
                '.../node_modules/@babel/plugin-syntax-dynamic-import/lib/index.js',
                [
                  '.../node_modules/@babel/plugin-proposal-object-rest-spread/lib/index.js',
                  { loose: true, useBuiltIns: true }
                ],
                '.../node_modules/@babel/plugin-transform-classes/lib/index.js',
                '.../node_modules/@babel/plugin-transform-arrow-functions/lib/index.js',
                '.../node_modules/@babel/plugin-transform-parameters/lib/index.js',
                '.../node_modules/@babel/plugin-transform-destructuring/lib/index.js',
                '.../node_modules/@babel/plugin-transform-spread/lib/index.js',
                '.../node_modules/@babel/plugin-transform-for-of/lib/index.js',
                '.../node_modules/babel-plugin-macros/dist/index.js',
                '.../node_modules/@babel/plugin-proposal-optional-chaining/lib/index.js',
                '.../node_modules/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js',
                [
                  '.../node_modules/babel-plugin-emotion/dist/babel-plugin-emotion.cjs.js',
                  { sourceMap: true, autoLabel: true }
                ],
                [
                  '.../node_modules/@babel/plugin-transform-react-jsx/lib/index.js',
                  { pragma: 'h' },
                  'preset'
                ],
                [
                  '.../node_modules/@babel/plugin-transform-react-jsx/lib/index.js',
                  {
                    pragma: 'React.createElement',
                    pragmaFrag: 'React.Fragment'
                  }
                ]
              ]
            }
          },
          {
            loader: '.../node_modules/@mdx-js/loader/index.js',
            options: {
              compilers: [ [Function: compiler] ],
              remarkPlugins: [ [Function: slug], [Function: externalLinks] ]
            }
          }
        ]
      },
      {
        test: /\.mdx$/,
        exclude: /\.(stories|story).mdx$/,
        use: [
          {
            loader: '.../node_modules/babel-loader/lib/index.js',
            options: {
              babelrc: false,
              configFile: false,
              cacheDirectory: '.../node_modules/.cache/storybook/babel',
              sourceType: 'unambiguous',
              presets: [
                [
                  '.../node_modules/@babel/preset-env/lib/index.js',
                  {
                    shippedProposals: true,
                    useBuiltIns: 'usage',
                    corejs: '3'
                  }
                ],
                '.../node_modules/@babel/preset-typescript/lib/index.js'
              ],
              plugins: [
                '.../node_modules/@babel/plugin-transform-shorthand-properties/lib/index.js',
                '.../node_modules/@babel/plugin-transform-block-scoping/lib/index.js',
                [
                  '.../node_modules/@babel/plugin-proposal-decorators/lib/index.js',
                  { legacy: true }
                ],
                [
                  '.../node_modules/@babel/plugin-proposal-class-properties/lib/index.js',
                  { loose: true }
                ],
                [
                  '.../node_modules/@babel/plugin-proposal-private-methods/lib/index.js',
                  { loose: true }
                ],
                '.../node_modules/@babel/plugin-proposal-export-default-from/lib/index.js',
                '.../node_modules/@babel/plugin-syntax-dynamic-import/lib/index.js',
                [
                  '.../node_modules/@babel/plugin-proposal-object-rest-spread/lib/index.js',
                  { loose: true, useBuiltIns: true }
                ],
                '.../node_modules/@babel/plugin-transform-classes/lib/index.js',
                '.../node_modules/@babel/plugin-transform-arrow-functions/lib/index.js',
                '.../node_modules/@babel/plugin-transform-parameters/lib/index.js',
                '.../node_modules/@babel/plugin-transform-destructuring/lib/index.js',
                '.../node_modules/@babel/plugin-transform-spread/lib/index.js',
                '.../node_modules/@babel/plugin-transform-for-of/lib/index.js',
                '.../node_modules/babel-plugin-macros/dist/index.js',
                '.../node_modules/@babel/plugin-proposal-optional-chaining/lib/index.js',
                '.../node_modules/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js',
                [
                  '.../node_modules/babel-plugin-emotion/dist/babel-plugin-emotion.cjs.js',
                  { sourceMap: true, autoLabel: true }
                ],
                [
                  '.../node_modules/@babel/plugin-transform-react-jsx/lib/index.js',
                  { pragma: 'h' },
                  'preset'
                ],
                [
                  '.../node_modules/@babel/plugin-transform-react-jsx/lib/index.js',
                  {
                    pragma: 'React.createElement',
                    pragmaFrag: 'React.Fragment'
                  }
                ]
              ]
            }
          },
          {
            loader: '.../node_modules/@mdx-js/loader/index.js',
            options: {
              remarkPlugins: [ [Function: slug], [Function: externalLinks] ]
            }
          }
        ]
      },
      {
        test: /\.(stories|story)\.[tj]sx?$/,
        loader: '.../node_modules/@storybook/source-loader/dist/index.js',
        options: { injectStoryParameters: true, inspectLocalDependencies: true },
        enforce: 'pre'
      },
      {
        test: /\.css$/,
        sideEffects: true,
        use: [
          '.../node_modules/style-loader/dist/cjs.js',
          {
            loader: '.../node_modules/css-loader/dist/cjs.js',
            options: { importLoaders: 1 }
          },
          {
            loader: '.../node_modules/postcss-loader/src/index.js',
            options: {
              ident: 'postcss',
              postcss: {},
              plugins: [Function: plugins]
            }
          }
        ]
      },
      {
        test: /\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,
        loader: '.../node_modules/file-loader/dist/cjs.js',
        options: { name: 'static/media/[name].[hash:8].[ext]', esModule: false }
      },
      {
        test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
        loader: '.../node_modules/url-loader/dist/cjs.js',
        query: { limit: 10000, name: 'static/media/[name].[hash:8].[ext]' }
      }
    ]
  },
  resolve: {
    extensions: [
      '.mjs', '.js',
      '.jsx', '.ts',
      '.tsx', '.json',
      '.cjs'
    ],
    modules: [ 'node_modules' ],
    alias: {
      '@emotion/core': '.../node_modules/@emotion/core',
      '@emotion/styled': '.../node_modules/@emotion/styled',
      'emotion-theming': '.../node_modules/emotion-theming',
      '@storybook/addons': '.../node_modules/@storybook/addons',
      '@storybook/api': '.../node_modules/@storybook/api',
      '@storybook/channels': '.../node_modules/@storybook/channels',
      '@storybook/channel-postmessage': '.../node_modules/@storybook/channel-postmessage',
      '@storybook/components': '.../node_modules/@storybook/components',
      '@storybook/core-events': '.../node_modules/@storybook/core-events',
      '@storybook/router': '.../node_modules/@storybook/router',
      '@storybook/theming': '.../node_modules/@storybook/theming',
      '@storybook/semver': '.../node_modules/@storybook/semver',
      '@storybook/client-api': '.../node_modules/@storybook/client-api',
      '@storybook/client-logger': '.../node_modules/@storybook/client-logger',
      react: '.../node_modules/react',
      'react-dom': '.../node_modules/react-dom'
    },
    plugins: [
      {
        apply: [Function: nothing],
        makePlugin: [Function (anonymous)],
        moduleLoader: [Function (anonymous)],
        topLevelLoader: { apply: [Function: nothing] },
        bind: [Function (anonymous)],
        tsLoaderOptions: [Function (anonymous)],
        forkTsCheckerOptions: [Function (anonymous)]
      }
    ]
  },
  resolveLoader: { plugins: [ { apply: [Function: nothing] } ] },
  optimization: { splitChunks: { chunks: 'all' }, runtimeChunk: true, minimizer: [] },
  performance: { hints: false }
}
stale[bot] commented 3 years ago

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!

kerimhudson commented 3 years ago

Probably a bit late now, but in case anyone else stumbles across this, you can fix this by adding the following to .storybook/main.js:

module.exports  = {
// your usual setup
  webpackFinal: (config) => {
    config.resolve.alias = {
      react: "preact/compat",
      "react-dom": "preact/compat",
    };

    return config;
  },
}
KrofDrakula commented 3 years ago

Looks like this issue might be resolved with #12403.

shilman commented 3 years ago

Yowza!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.3.0-alpha.9 containing PR #14555 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

lquanx commented 2 years ago

I was using vite with @prefresh/vite. And it works for me file .storybook/main.js

module.exports = {
  // other config
  viteFinal: (config) => {
    config.resolve.alias = {
      react: 'preact/compat',
      'react-dom': 'preact/compat'
    }
  }
}
mike-lischke commented 1 year ago

@lquanx in which file did you use your code?

lquanx commented 1 year ago

@mike-lischke I think it is .storybook/main.js

mike-lischke commented 1 year ago

I see, thanks. I don't use storybook, but thought it would help me with the same error in my vite/preact app.