Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
shman2000 opened this issue Oct 21, 2020 · 10 comments
Closed

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

shman2000 opened this issue Oct 21, 2020 · 10 comments

Comments

@shman2000
Copy link

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
Copy link

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
Copy link

Vincent-Carrier commented Nov 4, 2020

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
Copy link

stale bot commented Dec 25, 2020

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!

@stale stale bot added the inactive label Dec 25, 2020
@stale stale bot removed the inactive label Jan 10, 2021
@kerimhudson
Copy link

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
Copy link
Member

Looks like this issue might be resolved with #12403.

@shilman
Copy link
Member

shilman commented Apr 16, 2021

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
Copy link

lquanx commented May 3, 2022

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
Copy link

@lquanx in which file did you use your code?

@lquanx
Copy link

lquanx commented Jan 6, 2023

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

@mike-lischke
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

7 participants