styleguidist/snapguidist

Cannot resolve Playground

kaisermann opened this issue · 7 comments

Hey! I've followed the tutorial to implement snapguidist on my react-styleguidist but I'm gettint the following error when I run the start script:

FAIL  Failed to compile

./node_modules/react-styleguidist/lib/rsg-components/Playground/index.js
Module not found: Can't resolve 'rsg-components/Playground/Playground' in '/<path-to-project>/node_modules/react-styleguidist/lib/rsg-components/Playground'

Here's the alias part of the loaded webpackconfig:

{ entry: 
   [ '/<path-to-project>/packages/css-packs/core-styles/src/index.scss',
     '/<path-to-project>/node_modules/react-styleguidist/lib/index',
     '/<path-to-project>/node_modules/react-dev-utils/webpackHotDevClient.js',
     '!!style-loader!css-loader!codemirror/lib/codemirror.css',
     '!!style-loader!css-loader!rsg-codemirror-theme.css',
     '!!style-loader!css-loader!/<path-to-project>/node_modules/snapguidist/lib/styles.css' ],
  output: 
   { path: '/<path-to-project>/styleguide',
     filename: 'build/[name].bundle.js',
     chunkFilename: 'build/[name].js' },
  resolve: 
   { 
     extensions: 
     [
        '.js',
        '.jsx',
        '.json',
        '.js',
        '.jsx',
        '.ts',
        '.tsx',
        '.json',
        '.less',
        '.scss',
        '.sass',
        '.styl',
        '.css'
      ],
     alias: {
      'rsg-components/Playground/PlaygroundRenderer': 'react-styleguidist/lib/rsg-components/Playground/PlaygroundRenderer',
      'rsg-components/Playground': '/<path-to-project>/node_modules/snapguidist/lib/components/Playground',
      'rsg-components/Preview': '/<path-to-project>/node_modules/snapguidist/lib/components/Preview',
      'rsg-codemirror-theme.css': 'codemirror/theme/base16-light.css',
      react: 'preact-compat',
      'react-dom': 'preact-compat',
      'rsg-components': '/<path-to-project>/node_modules/react-styleguidist/lib/rsg-components' 
    },
  modules: [ './node_modules' ] }
  ...
}

(I've used <path-to-project> here just to shorten the output)

I'm having the same issue

Hello @kaisermann @LorinWeb, thanks for opening the issue and commenting.
I'm sorry to hear you are experiencing a problem with the library.

Would you be able to provide more information (e.g. version of react-styleguidist, snapguidist, etc.) and/or a non-working example?
Thank you very much!

I've cloned the https://github.com/styleguidist/example and added snapguidist in this repo

Just do a yarn start and the error should appear.

Thank you very much, @kaisermann.
It was due to styleguidist/react-styleguidist@06a62e4, and it's now fixed in v3.1.2.

Thanks @MicheleBertoli!

I've exported my config wrapped within snapguidist() and now I'm getting:

image

You think this is a problem with my setup?

Oh, I'm sorry to hear you still have problems.
I tried v3.1.2 on your example repo yesterday and it worked.
Would you be able to provide another non-working example?
Thank you very much!

Oops, my bad.

I'm using preact with the appropriate react alias, but snapguidist uses the fiber API which preact-compat doesn't provide:

var ReactInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;

var ReactCurrentOwner = ReactInternals.ReactCurrentOwner;
var ReactDebugCurrentFrame = ReactInternals.ReactDebugCurrentFrame;