Cannot execute yarn run storybook.

[horcrux2301]

Hello everyone.

I am trying to learn how to use React Diagrams in one of my projects. To do that I followed the steps mentioned here -> Issue 83

1. Clone the repo.
2. npm install .
3. npm run storybook

However I get the following error in Terminal.

ERROR in [at-loader] ./src/Common.ts:3:22
    TS2307: Cannot find module '_debugger'.

What should I do?

The complete terminal log:-

> start-storybook -p 9001 -c .storybook

@storybook/react v3.2.17

Failed to load ./.env.
=> Loading custom addons config.
=> Loading custom webpack config (extending mode).
 12% building modules 24/25 modules 1 active ...agrams/react-diagrams/demos/index.tsx
[at-loader] Using typescript@2.6.2 from typescript and "tsconfig.json" from /Users/horcrux2304/Desktop/React Diagrams/react-diagrams/tsconfig.json.

 94% asset optimization
[at-loader] Checking started in a separate process...

[at-loader] Checking finished with 1 errors
webpack built 96ee17ffc564c2fe184f in 8005ms
Hash: 96ee17ffc564c2fe184f
Version: webpack 3.10.0
Time: 8005ms
                       Asset     Size  Chunks                    Chunk Names
    static/manager.bundle.js   2.6 MB       0  [emitted]  [big]  manager
    static/preview.bundle.js  3.13 MB       1  [emitted]  [big]  preview
static/manager.bundle.js.map  3.15 MB       0  [emitted]         manager
static/preview.bundle.js.map  3.68 MB       1  [emitted]         preview
  [86] (webpack)/buildin/module.js 517 bytes {0} {1} [built]
 [200] ./node_modules/@storybook/react/dist/server/config/polyfills.js 113 bytes {0} {1} [built]
 [491] multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./.storybook/addons.js ./node_modules/@storybook/react/dist/client/manager/index.js 52 bytes {0} [built]
 [492] ./.storybook/addons.js 43 bytes {0} [built]
 [493] ./node_modules/@storybook/addon-actions/register.js 30 bytes {0} [built]
 [494] ./node_modules/@storybook/react/dist/client/manager/index.js 404 bytes {0} [built]
 [710] ./node_modules/@storybook/react/dist/client/manager/provider.js 3.31 kB {0} [built]
 [712] multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js (webpack)-hot-middleware/client.js?reload=true ./.storybook/config.js 64 bytes {1} [built]
 [713] ./node_modules/@storybook/react/dist/server/config/globals.js 105 bytes {1} [built]
 [714] (webpack)-hot-middleware/client.js?reload=true 7.35 kB {1} [built]
 [718] ./node_modules/strip-ansi/index.js 161 bytes {1} [built]
 [720] (webpack)-hot-middleware/client-overlay.js 2.21 kB {1} [built]
 [725] (webpack)-hot-middleware/process-update.js 4.33 kB {1} [built]
 [726] ./.storybook/config.js 185 bytes {1} [built]
 [802] ./demos/index.tsx 1.99 kB {1} [built]
    + 862 hidden modules

ERROR in [at-loader] ./src/Common.ts:3:22
    TS2307: Cannot find module '_debugger'.

[JokerNN]

Hey @horcrux2301 , I'm having this issue too, because _debugger module was removed from nodejs, IDK is it really neccessary to keep this import, but as a workaround you can comment out 3rd line in ./src/Common.ts

[horcrux2301]

@JokerNN Thanks but I had already tried it.

On a side note, this repo frankly has a very weak documentation for a beginner in React (and related technologies like WebPack etc). trying to integrate this repo in his/her project.

As of this moment I have spent hours trying to read docs and examples and TypeScript integration with React and videos about WebPack and have not written a single line of code.

[dylanvorster]

Busy looking into this now.

[dylanvorster]

@horcrux2301 I don't think this repo should actually show how to use React and Webpack, as that is out of the scope of this project.

[horcrux2301]

@dylanvorster I think I communicated my point in a wrong manner. What I want is better documentation or some resource about how to integrate this repo into an already running React App.

For example I have a React App that I created using create-react-app and now I executed the npm install storm-react-diagrams. And then I went on to the TypeScript Website and learned how to integrate WebPack and React and TypeScript ( Resource ). But after this I am clueless. I tried a bunch of things but none seem to work. :(

I am sorry if all of this sounds too naive though.

[dylanvorster]

hey man, no worries it can be really tough learning how to use all these technologies together. I just updated all the code quite a bit and made sure that it all works with the current node modules. Try checkout the code again after the changes I made and then run yarn install --check-files and then run yarn run storybook. That worked fine on my end using the binaries installed inside ./node_modules

[dylanvorster]

Common.js is also no more :)

[dylanvorster]

Closing in favour of #103 as I cannot reproduce the issue on my side using the master branch