Cannot resolve ./block-elements in remark-parse

Trying to run styleguidist server and I get the following errors. Tried in verbose mode as well, no more info. I see the same error with styleguidist build when I go to the index.html file: Error: Cannot find module "./block-elements"

ERROR in ./~/react-styleguidist/src/index.js
Module not found: Error: Cannot resolve module 'styleguide' in /home/rstinogle/hv/webclient/app/products/node_modules/react-styleguidist/src
 @ ./~/react-styleguidist/src/index.js 36:18-48 61:1-64:3

ERROR in ./~/remark-parse/lib/defaults.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./block-elements in /home/rstinogle/hv/webclient/app/products/node_modules/remark-parse/lib
 @ ./~/remark-parse/lib/defaults.js 19:10-37

Here is a copy of my styleguide.config.js:

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');
var glob = require('glob');

module.exports = {
  title: 'HireVue Style Guide',
  styleguideDir: '../styleguide/react',
  components: function() {
    return glob.sync(path.resolve(__dirname, 'source/common/components/**/*.jsx')).filter(function(module) {
      return /\/[A-Z]\w*\.jsx$/.test(module);
    });
  },
  updateWebpackConfig: function(webpackConfig) {
    // Your source files folder or array of folders, should not include node_modules
    var dir = path.join(__dirname, 'source/common/components');

    webpackConfig.module.loaders.push (
      // Babel loader will use your project’s .babelrc
      {
        test: /\.(es6|jsx)?$/,
        include: dir,
        loader: 'babel'
      },
      {
        test: /\.css$/,
        include: dir,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader!css-theme-loader')
      },
      {
        test: /\.(ttf|eot|svg|woff|gif)(\?v=[0-9].[0-9].[0-9])?$/,
        include: /.*/, // Because styleguidist requires either include or exclude.
        loader: 'url?limit=8192'
      }
    );

    webpackConfig.postcss = [
      require('postcss-import'),
      require('postcss-custom-properties'),
      require('autoprefixer')
    ];

    webpackConfig.resolve = {
      extensions: ['', '.js', '.jsx'],
      modulesDirectories: [path.resolve(__dirname, './node_modules/react-styleguidist/src'), 'node_modules/']
    };

    webpackConfig.resolveLoader = {
      alias: {
        'css-theme-loader': path.join(__dirname, './css-theme-loader'),
      },
      root: path.resolve(__dirname, './node_modules/react-styleguidist/src')
    };

    return webpackConfig;
  }
};

Also confirmed I have the latest version of remark-parse: 2.2.0. Thanks for the help!

[sapegin]

I could reproduce it. You’re overwriting resolveLoader:

 webpackConfig.resolveLoader = {
      alias: {
        'css-theme-loader': path.join(__dirname, './css-theme-loader'),
      }
    };

[stinoga]

Ok, so I updated to not overwrite the default resolve. Here is my config:

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');
var glob = require('glob');

module.exports = {
  title: 'HireVue Style Guide',
  styleguideDir: '../styleguide/react',
  components: function() {
    return glob.sync(path.resolve(__dirname, 'source/common/components/**/*.jsx')).filter(function(module) {
      return /\/[A-Z]\w*\.jsx$/.test(module);
    });
  },
  updateWebpackConfig: function(webpackConfig) {
    // Your source files folder or array of folders, should not include node_modules
    var dir = path.join(__dirname, 'source/common/components');

    webpackConfig.module.loaders.push (
      // Babel loader will use your project’s .babelrc
      {
        test: /\.(es6|jsx)?$/,
        include: dir,
        loader: 'babel'
      },
      {
        test: /\.css$/,
        include: dir,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader!css-theme-loader')
      },
      {
        test: /\.(ttf|eot|svg|woff|gif)(\?v=[0-9].[0-9].[0-9])?$/,
        include: /.*/, // Because styleguidist requires either include or exclude.
        loader: 'url?limit=8192'
      }
    );

    webpackConfig.resolveLoader = {
      alias: {
        'css-theme-loader': path.join(__dirname, './css-theme-loader'),
      }
    };

    return webpackConfig;
  }
};

… but I still get this error:

ERROR in ./~/react-styleguidist/src/index.js
Module not found: Error: Cannot resolve module 'styleguide' in /home/rstinogle/hv/webclient/app/products/node_modules/react-styleguidist/src
 @ ./~/react-styleguidist/src/index.js 36:18-48 61:1-64:3