React-styleguidist: Getting Error on Run, beta 5.0.0

[davidbucka]

Getting

Uncaught TypeError: Cannot assign to read only property 'undefined' of object '#<Window>'
    at globalizeComponent

while running the beta version:
https://github.com/styleguidist/react-styleguidist/tree/next

webpack Verson: 2.2.1

module.exports = {
  webpackConfig: {
    module: {
      loaders: [
        // Babel loader, will use your project’s .babelrc
        {
          test: /\.js?$/,
          exclude: /node_modules/,
          loader: 'babel-loader'
        },
        // Other loaders that are needed for your components
        {
          test: /\.css$/,
          loader: 'style-loader!css-loader?modules'
        }
      ]
    }
  },
  title: 'My Awesome Style Guide',
  components: 'src/assets/js/components/**/[A-Z]*.js',
  sections: [
    {
      name: 'UI-Components',
      content: 'docs/components.md',
      components: 'src/assets/js/components/**/*.js',
    },
  ],
}

[sapegin]

I’ve fixed that yesterday and will make a release soon ;-)

Most probably you have an error in terminal that says that one of your JS files doesn’t export a component.

[davidbucka]

@sapegin thank you for the fast reply!
I really had such an error in the console, which I removed, but that didn't fix the problem.

Now I guess the problem is, that I extend one component with subcomponents in one file like

class Card extends React.Component {}

class Action extends Card {}

export default Card
export {Action}

how could this be possibly fixed?

and btw: I run webpack with sass/css & babel-loaders, but when running the $ npm run styleguide-server it does not run into the scss files which lie in an extra folder src/assets/scss/ what can I do about that?

[sapegin]

how could this be possibly fixed?

The only real fix is to stop inheriting components ;-)

and btw…

Could you show me an example as described here?

[davidbucka]

he only real fix is to stop inheriting components ;-)
damn..thank you

Could you show me an example...

sure here are my 2 files + folder structure:

--assets
----js
------components
----scss
------app.scss (foundation)

I do not import the app.scss into js - just load it into index.html

styleguide.config.js:

module.exports = {
  webpackConfig: {
    module: {
      loaders: [
        // Babel loader, will use your project’s .babelrc
        {
          test: /\.js?$/,
          exclude: /node_modules/,
          loader: 'babel-loader'
        },
        // Other loaders that are needed for your components
        {
          test: /\.css$/,
          loader: 'style-loader!css-loader?modules'
        }
      ]
    }
  },
  title: 'My Awesome Style Guide',
  components: 'src/assets/js/components/**/[A-Z]*.js',
  sections: [
    {
      name: 'UI-Components',
      content: 'docs/components.md',
      components: 'src/assets/js/components/**/*.js',
    },
  ],
}

webpack.config.dev.js:

var path = require("path");

module.exports = {
  context: path.resolve(__dirname, 'src'),
  entry: ['./assets/js/app.js', './assets/js/page.js'],
  output: {
        path: __dirname + "/dist",
        filename: "app.js"
    },
  module: {
    loaders: [
      // JS
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        query: {
          presets: ['es2015', 'react'],
          plugins: [
            'transform-decorators-legacy',
            'transform-class-properties',
            'transform-object-rest-spread'
          ]
        }
      },
      // SCSS
      {
        test: /\.scss$/,
        loaders: ['style-loader', 'css-loader', 'sass-loader']
      },
      // CSS
      {
        test: /\.css$/,
        loaders: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  }
};

[sapegin]

I do not import the app.scss into js - just load it into index.html

I don’t see where you’re doing that. Most probably you need to use require option to add this file to your style guide.

[davidbucka]

Most probably you need to use require option to add this file to your style guide

Sorry but where should i add the require option here?

[sapegin]

As described in the docs: https://github.com/styleguidist/react-styleguidist/blob/next/docs/Cookbook.md#how-to-add-custom-javascript-and-css-or-polyfills

[tsdrummer]

Get the same error within web browser with version 5.0.0-rc.1.
But the terminal shows "Compiled successfully!"

Also --verbose doesn't show some interesting stuff.

[sapegin]

@davidbucka @tsdrummer Please try [email protected]. I’m trying to make the error message more clear, and also it wouldn’t break the whole style guide anymore ;-) I appreciate any feedback 🍕

[tsdrummer]

@sapegin 👍🏼 rc.2 solves the issue. thanks.

[davidbucka]

thank you very much! 👍🏼

[sapegin]

@davidbucka Can we close this or you still have some issues?

[davidbucka]

I close it- thank you for your help!