"No components or sections found" when trying to "Open isolated"

[aaronjensen]

I'm not sure when this stopped working, but "Open isolated" no longer works for any of our components. It just says:

No components or sections found. Check the components and sections options in your style guide config.
Generated with React Styleguidist

[sapegin]

Works for my style guide and for an example. Could you share your config? Do you override any Styleguidist components?

[aaronjensen]

Here's our config:

const path = require('path')
const webpack = require('webpack')

// Exit on end of STDIN
if (process.argv.includes('server')) {
  process.stdin.resume()
  process.stdin.on('end', () => process.exit(0))
}

const svgoConfig = require('./svgo.config')

module.exports = {
  title: 'The Link Styles',
  styleguideDir: './priv/static/styleguide',
  sections: [
    {
      name: 'General',
      sections: [
        {
          name: 'Particles',
          components: './client/app/components/particles/**/*.js',
        },
        {
          name: 'Atoms',
          components: './client/app/components/atoms/**/*.js',
        },
        {
          name: 'Molecules',
          components: './client/app/components/molecules/**/*.js',
        },
        {
          name: 'Organisms',
          components: './client/app/components/organisms/**/*.js',
        },
        {
          name: 'Templates',
          components: './client/app/components/templates/**/*.js',
        },
      ],
    },
    {
      name: 'Forms',
      components: './client/app/components/forms/**/*.js',
    },
    {
      name: 'Sections',
      sections: [
        {
          name: 'Create Pathway',
          components: './client/app/sections/CreatePathway/**/*.js',
        },
        {
          name: 'Pathway',
          components: './client/app/sections/Pathway/**/*.js',
        },
      ],
    },
  ],
  skipComponentsWithoutExample: true,

  getExampleFilename(componentPath) {
    return componentPath.replace(/\.js$/, '.examples.md')
  },

  getComponentPathLine(componentPath) {
    const name = path.basename(componentPath, '.js')
    const dir = path.dirname(componentPath.replace(/^client\/app/, ''))

    return `import ${name} from 'app${dir}/${name}'`
  },

  updateWebpackConfig(webpackConfig) {
    /* eslint-disable no-param-reassign */
    // Your source files folder or array of folders, should not include node_modules
    const clientDir = path.join(__dirname, 'client')
    webpackConfig.resolve.modules.unshift(clientDir)
    webpackConfig.resolve.alias.aphrodite$ = 'aphrodite/no-important'
    webpackConfig.module.loaders.push(
      // Babel loader will use your project’s .babelrc
      {
        test: /\.jsx?$/,
        include: clientDir,
        loader: 'babel',
      },
      {
        test: /\.css$/,
        include: [
          path.dirname(require.resolve('ress')),
          path.join(__dirname, 'node_modules/react-select'),
          path.dirname(require.resolve('react-dates')),
          clientDir,
        ],
        loaders: [
          'style',
          'css',
        ],
      },
      {
        test: /icons\/.*\.svg$/,
        include: clientDir,
        loaders: ['babel', 'react-svg'],
      },
      {
        test: /\.(ico|jpg|jpeg|png|gif|svg|eot|otf|webp|ttf|woff|woff2)(\?.*)?$/,
        exclude: [/\/favicon.ico$/, /icons\/.*\.svg$/],
        loader: 'file',
        query: {
          name: '[path][name].[hash:8].[ext]',
          context: path.join(clientDir, 'assets'),
        },
      },
      {
        test: /\.svg$/,
        include: clientDir,
        loader: 'svgo-loader',
        query: svgoConfig,
      }
    )
    webpackConfig.plugins.push(
      new webpack.DefinePlugin({
        'process.env': {
          LOAD_FONTS: JSON.stringify(true),
        },
      }),
      // Do not include any of moment's locales.
      // If we don't do this, they are all included and add 23kb min+gzip.
      new webpack.ContextReplacementPlugin(/moment[\\\/]lang$/, /^no-langs$/)
    )
    webpackConfig.entry.push(
      path.join(clientDir, 'app/style/base'),
      path.join(clientDir, 'styleguide/bootstrap')
    )

    return webpackConfig
  },
}

[sapegin]

Looks OK but it’s too big to be sure ;-)

Could you please fork this example project and try to make a reproducible demo?

[aaronjensen]

@sapegin the issue is nested sections. Open isolated works for things in the Forms section (1 level deep) but not General/Particles section (2 levels deep)

[aaronjensen]

Thanks!