search

mtiller / typescript-storyshots

Sample project using StoryShots, Jest and TypeScript
54 stars 20 forks source link

Does not compile? #1

Open jonaskello opened 7 years ago

jonaskello commented 7 years ago

Thanks for this repo, it is something I'm looking into doing and it is very helpful.

When I just cloned the repo and did yarn install and then tried to compile I got:

$ yarn compile
yarn compile v0.27.5
$ tsc
test/stories.ts(2,28): error TS7016: Could not find a declaration file for module '@storybook/addon-storyshots'. '/xxx/typescript-storyshots/node_modules/@storybook/addon-storyshots/dist/index.js' implicitly has an 'any' type.
  Try `npm install @types/@storybook/addon-storyshots` if it exists or add a new declaration (.d.ts) file containing `declare module '@stor
ybook/addon-storyshots';`
error Command failed with exit code 2.

I can solve this by adding a simple typing file but just wanted to check if you have run across this error?

xogeny commented 7 years ago

I have not seen this. That is very odd. I got the impression that @types/storybook__react might take care of that.

xogeny commented 7 years ago

I definitely don't want to add typings. We should use @types/... if at all possible. Perhaps I missed one, but I don't see how (it works for me AND I use the same approach on other projects). I'm about to go on vacation, so I can't test this now. But I'll leave this open...

xogeny commented 7 years ago

Ah, I see the issue. I didn't run yarn compile, I just did yarn test. I think the issue is that if I were to actually compile this (as an npm package), I wouldn't bundle the tests. It seems that those are meant to be compiled via either ts-jest or awesome-typescript-loader.

Ideally, there should be configuration option to avoid compiling the stories when running yarn compile and have them only compiled by jest or storybook.

jonaskello commented 7 years ago

Ok, good then at least it is not just my machine :-). So yarn test works for me too. However yarn storybook and yarn compile does not work.

jonaskello commented 7 years ago

I guess we could contribute some typings to @types/storybook__addon_storyshots or something like that.

ghost commented 7 years ago

yarn test works, I am also experiencing an issue of running the storybook locally.

➜  typescript-storyshots git:(master) yarn storybook
yarn storybook v0.27.5
$ start-storybook -p 6006
@storybook/react v3.1.7

=> Loading custom addons config.
=> Loading custom webpack config (full-control mode).
 10% building modules 2/2 modules 0 activeevents.js:160
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE :::6006
    at Object.exports._errnoException (util.js:1018:11)
    at exports._exceptionWithHostPort (util.js:1041:20)
    at Server._listen2 (net.js:1262:14)
    at listen (net.js:1298:10)
    at Server.listen (net.js:1394:5)
    at EventEmitter.listen (/Users/li-xinyang/Desktop/typescript-storyshots/node_modules/express/lib/application.js:618:24)
    at Object.<anonymous> (/Users/li-xinyang/Desktop/typescript-storyshots/node_modules/@storybook/react/dist/server/index.js:160:27)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
error Command failed with exit code 1.
jonaskello commented 7 years ago

@li-xinyang The error seems to indicate that you have something else already listening on port 6006. Maybe check that?

ghost commented 7 years ago

My bad... This is the error message (the same issue you mentioned earlier)

ERROR in [at-loader] ./test/stories.ts:2:28
    TS7016: Could not find a declaration file for module '@storybook/addon-storyshots'. '/Users/li-xinyang/Desktop/typescript-storyshots/node_modules/@storybook/addon-storyshots/dist/index.js' implicitly has an 'any' type.
  Try `npm install @types/@storybook/addon-storyshots` if it exists or add a new declaration (.d.ts) file containing `declare module '@storybook/addon-storyshots';`
jonaskello commented 7 years ago

Aha, that makes more sense :-).

code4cake commented 7 years ago

Hey guys, still having the same problem here. I ran the tests and it works, but the scripts compile and storybook do not work for me.

Getting this at the moment...

storyshooterror
xogeny commented 7 years ago

I've pinged the storybook guys to try and get the necessary TypeScript definitions into their repo.

code4cake commented 7 years ago

xogeny thanks, I will see if I could perhaps add them as a PR. Thanks.

stabenfeldt commented 6 years ago

Any update here? :-) npm run test works but npm run storybook gives this error:

➜  typescript-storyshots git:(master) npm run build-storybook

> typescript-storyshots@1.0.0 build-storybook /private/tmp/typescript-storyshots
> build-storybook

@storybook/react v3.2.8

=> Loading custom addons config.
=> Loading custom webpack config (full-control mode).
Building storybook ...

[at-loader] Using typescript@2.4.1 from typescript and "tsconfig.json" from /private/tmp/typescript-storyshots/tsconfig.json.

[at-loader] Checking started in a separate process...

[at-loader] Checking finished with 174 errors
Failed to build the storybook
[at-loader] ../node_modules/@types/react-native/index.d.ts:3434:42
    TS2304: Cannot find name 'Map'.
[at-loader] ../node_modules/@types/react-native/index.d.ts:3451:42
    TS2304: Cannot find name 'Map'.
[at-loader] ../node_modules/@types/react/index.d.ts:3533:13
    TS2403: Subsequent variable declarations must have the same type.  Variable 'a' must be of type 'HTMLProps<HTMLAnchorElement>', but here has type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'.
[at-loader] ../node_modules/@types/react/index.d.ts:3534:13
    TS2403: Subsequent variable declarations must have the same type.  Variable 'abbr' must be of type 'HTMLProps<HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
[at-loader] ../node_modules/@types/react/index.d.ts:3535:13
    TS2403: Subsequent variable declarations must have the same type.  Variable 'address' must be of type 'HTMLProps<HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
[at-loader] ../node_modules/@types/react/index.d.ts:3536:13
    TS2403: Subsequent variable declarations must have the same type.  Variable 'area' must be of type 'HTMLProps<HTMLAreaElement>', but here has type 'DetailedHTMLProps<AreaHTMLAttributes<HTMLAreaElement>, HTMLAreaElement>'.
[at-loader] ../node_modules/@types/react/index.d.ts:3537:13
xogeny commented 6 years ago

@stabenfeldt I think something else is going on there. The errors about Map seem to imply that react-native requires a target level of JS above what tsconfig.json is targeting. Those errors with react/index.d.ts seem like you've got type bindings that are not compatible with the version of TypeScript you are using. But I'm just guessing. In any case, I don't see anything in there that is specifically related to storybook.

stabenfeldt commented 6 years ago

@xogeny Yeah, not sure what that was. I deleted the repo and did a fresh checkout after upgrading OSX and restarting. Now I get this error:

ERROR in [at-loader] ./node_modules/@types/jest/index.d.ts:1026:34
    TS2304: Cannot find name 'Set'.

Full log

➜  typescript-storyshots git:(master) ✗ npm run storybook

> typescript-storyshots@1.0.0 storybook /private/tmp/typescript-storyshots
> start-storybook -p 6006

info @storybook/react v3.3.9
info
Failed to load ./.env.
info => Loading custom addons config.
info => Loading custom webpack config (full-control mode).
 21% building modules 99/118 modules 19 active ...ode_modules/util-deprecate/browser.js
[at-loader] Using typescript@2.6.2 from typescript and "tsconfig.json" from /private/tmp/typescript-storyshots/tsconfig.json.

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

[at-loader] Checking finished with 2 errors
webpack built a2ee9fa16493c64e21e1 in 4675ms
Hash: a2ee9fa16493c64e21e1
Version: webpack 3.10.0
Time: 4675ms
                       Asset       Size  Chunks                    Chunk Names
    static/manager.bundle.js    2.65 MB       0  [emitted]  [big]  manager
    static/preview.bundle.js    1.66 MB       1  [emitted]  [big]  preview
static/manager.bundle.js.map    3.29 MB       0  [emitted]         manager
static/preview.bundle.js.map    2.02 MB       1  [emitted]         preview
                  index.html     1.2 kB          [emitted]
                 iframe.html  583 bytes          [emitted]
 [263] (webpack)/buildin/module.js 517 bytes {0} {1} [built]
 [282] ./node_modules/@storybook/react/dist/server/config/polyfills.js 113 bytes {0} {1} [built]
 [675] 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]
 [676] ./.storybook/addons.js 182 bytes {0} [built]
 [677] ./node_modules/@storybook/addon-actions/register.js 30 bytes {0} [built]
 [678] ./node_modules/@storybook/addon-links/register.js 30 bytes {0} [built]
 [679] ./node_modules/@storybook/react/dist/client/manager/index.js 404 bytes {0} [built]
 [885] ./node_modules/@storybook/react/dist/client/manager/provider.js 3.31 kB {0} [built]
 [887] 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]
 [888] ./node_modules/@storybook/react/dist/server/config/globals.js 105 bytes {1} [built]
 [889] (webpack)-hot-middleware/client.js?reload=true 7.35 kB {1} [built]
 [900] (webpack)-hot-middleware/process-update.js 4.33 kB {1} [built]
 [901] ./.storybook/config.js 228 bytes {1} [built]
 [902] (webpack)/buildin/harmony-module.js 596 bytes {1} [built]
 [974] ./stories/index.tsx 355 bytes {1} [built]
    + 962 hidden modules

ERROR in [at-loader] ./node_modules/@types/jest/index.d.ts:1026:34
    TS2304: Cannot find name 'Set'.

ERROR in [at-loader] ./test/stories.ts:2:28
    TS7016: Could not find a declaration file for module '@storybook/addon-storyshots'. '/private/tmp/typescript-storyshots/node_modules/@storybook/addon-storyshots/dist/index.js' implicitly has an 'any' type.
  Try `npm install @types/@storybook/addon-storyshots` if it exists or add a new declaration (.d.ts) file containing `declare module '@storybook/addon-storyshots';`
Child html-webpack-plugin for "index.html":
         Asset    Size  Chunks  Chunk Names
    index.html  569 kB       0
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/react/dist/server/index.html.ejs 1.72 kB {0} [built]
       [1] ./node_modules/html-webpack-plugin/node_modules/lodash/lodash.js 540 kB {0} [built]
       [2] (webpack)/buildin/global.js 509 bytes {0} [built]
       [3] (webpack)/buildin/module.js 517 bytes {0} [built]
Child html-webpack-plugin for "iframe.html":
          Asset    Size  Chunks  Chunk Names
    iframe.html  568 kB       0
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/react/dist/server/iframe.html.ejs 999 bytes {0} [built]
       [1] ./node_modules/html-webpack-plugin/node_modules/lodash/lodash.js 540 kB {0} [built]
       [2] (webpack)/buildin/global.js 509 bytes {0} [built]
       [3] (webpack)/buildin/module.js 517 bytes {0} [built]
xogeny commented 6 years ago

@stabenfeldt Part of your (new) issue is that you are not using yarn. Specifically, npm is just grabbing the latest version of everything and that means you are running very different things from what the yarn.lock file says you should be running. Most glaringly, you are running TypeScript 2.6.x, but the yarn.lock file has the TypeScript dependency pinned at 2.4.1.