Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

SyntaxError in Vue project with preset-typescript 3.0.0 #121

Closed
macdaddyaz opened this issue Mar 28, 2020 · 5 comments
Closed

SyntaxError in Vue project with preset-typescript 3.0.0 #121

macdaddyaz opened this issue Mar 28, 2020 · 5 comments
Labels
question Further information is requested typescript

Comments

@macdaddyaz
Copy link

I've hit what seems like a bug with using preset-typescript 3.0.0 in a Vue.js project. I've created a simple project to demonstrate: https://github.com/macdaddyaz/sb-ts-bug

  1. Generated a simple Vue.js app using the Vue CLI:
$ npx -p @vue/cli vue create sb-ts-bug


Vue CLI v4.2.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Linter, Unit
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Pick a linter / formatter config: Airbnb
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
...
  1. Added Storybook, using the integration instructions for Vue.js:
npx -p @storybook/cli sb init --type vue

 sb init - the simplest way to add a storybook to your project.

 • Installing Storybook for user specified project type. ✓
...
  1. Installed TypeScript preset (version 3.0.0), and integrated it into the Storybook config:
module.exports = {
  stories: ['../stories/**/*.stories.js'],
  addons: ['@storybook/preset-typescript', '@storybook/addon-actions', '@storybook/addon-links'],
};

At this point, Storybook still runs fine using the example stories.

  1. Switched the config to look for stories co-located with the components, and created a basic story for the HelloWorld component.
module.exports = {
  stories: ['../src/**/*.stories.[jt]s'],
  addons: ['@storybook/preset-typescript', '@storybook/addon-actions', '@storybook/addon-links'],
};
import HelloWorld from './HelloWorld.vue';

export default {
  title: 'HelloWorld',
};

export const basic = () => ({
  components: { HelloWorld },
  template: '<hello-world msg="Hello, Storybook"></hello-world>',
});

It's at this point that Storybook stops working. When I run it, I get syntax errors on the TypeScript in the component:

$ yarn storybook --ci
yarn run v1.22.4
$ start-storybook -p 6006 --ci
info @storybook/vue v5.3.17
info
info => Loading presets
info => Loading presets
info => Adding stories defined in ".storybook/main.js".
info => Using default Webpack setup.
Starting type checking service...
No type errors found
Version: typescript 3.7.5
Time: 3056ms
webpack built 0185a4c4b5010793c87d in 8825ms
✖ ｢wdm｣: Hash: 0185a4c4b5010793c87d
Version: webpack 4.42.1
Time: 8825ms
Built at: 03/27/2020 5:03:44 PM
                                          Asset      Size        Chunks                                Chunk Names
                                    iframe.html  2.87 KiB                [emitted]
            main.0185a4c4b5010793c87d.bundle.js  32.9 KiB          main  [emitted] [immutable]         main
        main.0185a4c4b5010793c87d.bundle.js.map  15.3 KiB          main  [emitted] [dev]               main
    runtime~main.0185a4c4b5010793c87d.bundle.js  31.2 KiB  runtime~main  [emitted] [immutable]         runtime~main
runtime~main.0185a4c4b5010793c87d.bundle.js.map  32.3 KiB  runtime~main  [emitted] [dev]               runtime~main
    vendors~main.0185a4c4b5010793c87d.bundle.js  2.58 MiB  vendors~main  [emitted] [immutable]  [big]  vendors~main
vendors~main.0185a4c4b5010793c87d.bundle.js.map  2.69 MiB  vendors~main  [emitted] [dev]               vendors~main
Entrypoint main [big] = runtime~main.0185a4c4b5010793c87d.bundle.js runtime~main.0185a4c4b5010793c87d.bundle.js.map vendors~main.0185a4c4b5010793c87d.bundle.js vendors~main.0185a4c4b5010793c87d.bundle.js.map main.0185a4c4b5010793c87d.bundle.js main.0185a4c4b5010793c87d.bundle.js.map
[0] multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true 64 bytes {main} [built]
[./.storybook/generated-entry.js] 234 bytes {main} [built]
[./node_modules/@storybook/core/dist/server/common/polyfills.js] 120 bytes {vendors~main} [built]
[./node_modules/@storybook/core/dist/server/preview/globals.js] 93 bytes {vendors~main} [built]
[./node_modules/@storybook/vue/dist/client/index.js] 1.21 KiB {vendors~main} [built]
[./node_modules/airbnb-js-shims/index.js] 40 bytes {vendors~main} [built]
[./node_modules/core-js/features/symbol/index.js] 359 bytes {vendors~main} [built]
[./node_modules/global/window.js] 232 bytes {vendors~main} [built]
[./node_modules/querystring-es3/index.js] 127 bytes {vendors~main} [built]
[./node_modules/regenerator-runtime/runtime.js] 23.6 KiB {vendors~main} [built]
[./node_modules/webpack-hot-middleware/client-overlay.js] (webpack)-hot-middleware/client-overlay.js 2.17 KiB {vendors~main} [built]
[./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true] (webpack)-hot-middleware/client.js?reload=true&quiet=true 7.68 KiB {vendors~main} [built]
[./node_modules/webpack-hot-middleware/node_modules/strip-ansi/index.js] (webpack)-hot-middleware/node_modules/strip-ansi/index.js 161 bytes {vendors~main} [built]
[./node_modules/webpack-hot-middleware/process-update.js] (webpack)-hot-middleware/process-update.js 4.35 KiB {vendors~main} [built]
[./node_modules/webpack/buildin/harmony-module.js] (webpack)/buildin/harmony-module.js 573 bytes {vendors~main} [built]
    + 621 hidden modules

ERROR in ./src/components/HelloWorld.vue?vue&type=script&lang=ts& (./node_modules/babel-loader/lib??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/HelloWorld.vue?vue&type=script&lang=ts&)
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/emcintyre/Development/src/sandbox/sb-ts-bug/src/components/HelloWorld.vue: Unexpected token (40:18)

  38 | @Component
  39 | export default class HelloWorld extends Vue {
> 40 |   @Prop() private msg!: string;
     |                   ^
  41 | }
  42 |
    at Object._raise (/Users/emcintyre/Development/src/sandbox/sb-ts-bug/node_modules/@babel/parser/lib/index.js:742:17)
    at Object.raiseWithData (/Users/emcintyre/Development/src/sandbox/sb-ts-bug/node_modules/@babel/parser/lib/index.js:735:17)
    at Object.raise (/Users/emcintyre/Development/src/sandbox/sb-ts-bug/node_modules/@babel/parser/lib/index.js:729:17)
    at Object.unexpected (/Users/emcintyre/Development/src/sandbox/sb-ts-bug/node_modules/@babel/parser/lib/index.js:8757:16)
    at Object.parseClassMemberWithIsStatic (/Users/emcintyre/Development/src/sandbox/sb-ts-bug/node_modules/@babel/parser/lib/index.js:12047:12)
    at Object.parseClassMember (/Users/emcintyre/Development/src/sandbox/sb-ts-bug/node_modules/@babel/parser/lib/index.js:11940:10)
    at /Users/emcintyre/Development/src/sandbox/sb-ts-bug/node_modules/@babel/parser/lib/index.js:11885:14
    at Object.withTopicForbiddingContext (/Users/emcintyre/Development/src/sandbox/sb-ts-bug/node_modules/@babel/parser/lib/index.js:10956:14)
    at Object.parseClassBody (/Users/emcintyre/Development/src/sandbox/sb-ts-bug/node_modules/@babel/parser/lib/index.js:11862:10)
    at Object.parseClass (/Users/emcintyre/Development/src/sandbox/sb-ts-bug/node_modules/@babel/parser/lib/index.js:11836:22)
    at Object.parseExportDefaultExpression (/Users/emcintyre/Development/src/sandbox/sb-ts-bug/node_modules/@babel/parser/lib/index.js:12272:19)
    at Object.parseExport (/Users/emcintyre/Development/src/sandbox/sb-ts-bug/node_modules/@babel/parser/lib/index.js:12185:31)
    at Object.parseStatementContent (/Users/emcintyre/Development/src/sandbox/sb-ts-bug/node_modules/@babel/parser/lib/index.js:11185:27)
    at Object.parseStatement (/Users/emcintyre/Development/src/sandbox/sb-ts-bug/node_modules/@babel/parser/lib/index.js:11081:17)
    at Object.parseBlockOrModuleBlockBody (/Users/emcintyre/Development/src/sandbox/sb-ts-bug/node_modules/@babel/parser/lib/index.js:11656:25)
    at Object.parseBlockBody (/Users/emcintyre/Development/src/sandbox/sb-ts-bug/node_modules/@babel/parser/lib/index.js:11642:10)
 @ ./src/components/HelloWorld.vue?vue&type=script&lang=ts& 1:0-180 1:196-199 1:201-378 1:201-378
 @ ./src/components/HelloWorld.vue
 @ ./src/components/HelloWorld.stories.ts
 @ ./src sync ^\.\/(?:(?:|\/|(?:(?:(?!(?:|\/)\.).)*?)\/)(?!\.)(?=.)[^\/]*?\.stories\.(?:\[jt\]|[jt])s)$
 @ ./.storybook/generated-entry.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true
Child HtmlWebpackCompiler:
                          Asset      Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  6.49 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/@storybook/core/node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core/dist/server/templates/index.ejs] 2.14 KiB {HtmlWebpackPlugin_0} [built]

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.
  1. When I downgrade the version of preset-typescript to 2.1.0, then Storybook starts just fine (another workaround is eliminating the TypeScript-specific syntax in the HelloWorld component, which of course defeats the purpose).

Based on #114, I realize that the preset recently switched from ts-loader to babel-loader, so maybe all that's needed is some additional configuration to get it working again?
@shilman
Copy link
Member

shilman commented Mar 28, 2020 •
edited
Loading

@graup can you help out here? cc @mrmckeb @Aaron-Pool

@shilman shilman added question Further information is requested typescript labels Mar 28, 2020
@graup
Copy link
Contributor

graup commented Mar 28, 2020

Thanks for the perfect bug report. I was going to test the 3.0 preset with vue-cli soon, great to have the steps already written up. I can reproduce this issue by following the steps. Looks like we have some digging to do here.

@graup graup mentioned this issue Mar 28, 2020
Closed
@macdaddyaz
Copy link
Author

I saw you guys have been busy with 6.0, specifically as it relates to TypeScript, so I thought I'd give this setup a shot again.

TL;DR: Still not working for me, but error is different.

The repo in my original report is still there, and has all the changes I describe here. I tried upgrading to 6.0 beta, using these migration steps.

  1. Removed the @storybook/preset-typescript dependency
  2. Installed @next versions of all other Storybook dependencies
  3. Upgraded all other dependencies, for good measure
  4. In .storybook/main.js, tweaked the stories glob, and changed the addons references to point to the new preset module.

When I run Storybook, I get the following output:

info => Loading presets
info => Loading presets
info => Loading config/preview file in "./.storybook".
info => Adding stories defined in ".storybook/main.js".
info => Using default Webpack setup.
webpack built 148f711186461575ce23 in 10904ms
✖ ｢wdm｣: Hash: 148f711186461575ce23
Version: webpack 4.43.0
Time: 10904ms
Built at: 06/09/2020 2:16:36 PM
                                          Asset       Size        Chunks                                Chunk Names
                                    iframe.html   2.92 KiB                [emitted]                     
            main.148f711186461575ce23.bundle.js   9.01 KiB          main  [emitted] [immutable]         main
        main.148f711186461575ce23.bundle.js.map  234 bytes          main  [emitted] [dev]               main
    runtime~main.148f711186461575ce23.bundle.js   33.5 KiB  runtime~main  [emitted] [immutable]         runtime~main
runtime~main.148f711186461575ce23.bundle.js.map   34.7 KiB  runtime~main  [emitted] [dev]               runtime~main
    vendors~main.148f711186461575ce23.bundle.js   2.21 MiB  vendors~main  [emitted] [immutable]  [big]  vendors~main
vendors~main.148f711186461575ce23.bundle.js.map   1.77 MiB  vendors~main  [emitted] [dev]               vendors~main
Entrypoint main [big] = runtime~main.148f711186461575ce23.bundle.js runtime~main.148f711186461575ce23.bundle.js.map vendors~main.148f711186461575ce23.bundle.js vendors~main.148f711186461575ce23.bundle.js.map main.148f711186461575ce23.bundle.js main.148f711186461575ce23.bundle.js.map
[0] multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false 112 bytes {main} [built]
[./.storybook/generated-stories-entry.js] 2.26 KiB {main} [built] [failed] [1 error]
[./.storybook/storybook-init-framework-entry.js] 2.27 KiB {main} [built] [failed] [1 error]
[./node_modules/@storybook/addon-actions/dist/preset/addArgs.js] 2.41 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js] 2.17 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js] 216 bytes {vendors~main} [built]
[./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js] 2.17 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-links/dist/preset/addDecorator.js] 214 bytes {vendors~main} [built]
[./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js] 2.17 KiB {vendors~main} [built]
[./node_modules/@storybook/client-api/dist/index.js] 4.63 KiB {vendors~main} [built]
[./node_modules/@storybook/client-logger/dist/index.js] 3.71 KiB {vendors~main} [built]
[./node_modules/@storybook/core/dist/server/common/polyfills.js] 120 bytes {vendors~main} [built]
[./node_modules/@storybook/core/dist/server/preview/globals.js] 93 bytes {vendors~main} [built]
[./node_modules/@storybook/core/node_modules/core-js/features/symbol/index.js] 359 bytes {vendors~main} [built]
[./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false] 7.68 KiB {vendors~main} [built]
    + 1200 hidden modules

ERROR in ./.storybook/generated-stories-entry.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: [BABEL] /Users/emcintyre/Development/src/sandbox/sb-ts-bug/.storybook/generated-stories-entry.js: Cannot read property 'android' of undefined (While processing: "/Users/emcintyre/Development/src/sandbox/sb-ts-bug/node_modules/@babel/preset-env/lib/index.js")
    at getLowestImplementedVersion (/Users/emcintyre/Development/src/sandbox/sb-ts-bug/node_modules/@babel/preset-env/node_modules/@babel/helper-compilation-targets/lib/utils.js:58:24)
    at /Users/emcintyre/Development/src/sandbox/sb-ts-bug/node_modules/@babel/preset-env/node_modules/@babel/helper-compilation-targets/lib/filter-items.js:26:77
    at Array.filter (<anonymous>)
    at targetsSupported (/Users/emcintyre/Development/src/sandbox/sb-ts-bug/node_modules/@babel/preset-env/node_modules/@babel/helper-compilation-targets/lib/filter-items.js:25:54)
    at isRequired (/Users/emcintyre/Development/src/sandbox/sb-ts-bug/node_modules/@babel/preset-env/node_modules/@babel/helper-compilation-targets/lib/filter-items.js:58:11)
    at filterItems (/Users/emcintyre/Development/src/sandbox/sb-ts-bug/node_modules/@babel/preset-env/node_modules/@babel/helper-compilation-targets/lib/filter-items.js:70:9)
    at /Users/emcintyre/Development/src/sandbox/sb-ts-bug/node_modules/@babel/preset-env/lib/index.js:262:65
    at /Users/emcintyre/Development/src/sandbox/sb-ts-bug/node_modules/@babel/preset-env/node_modules/@babel/helper-plugin-utils/lib/index.js:19:12
    at /Users/emcintyre/Development/src/sandbox/sb-ts-bug/node_modules/@babel/core/lib/config/full.js:199:14
    at Generator.next (<anonymous>)
    at Function.<anonymous> (/Users/emcintyre/Development/src/sandbox/sb-ts-bug/node_modules/@babel/core/lib/gensync-utils/async.js:26:3)
    at Generator.next (<anonymous>)
    at step (/Users/emcintyre/Development/src/sandbox/sb-ts-bug/node_modules/gensync/index.js:254:32)
    at evaluateAsync (/Users/emcintyre/Development/src/sandbox/sb-ts-bug/node_modules/gensync/index.js:284:5)
    at Function.errback (/Users/emcintyre/Development/src/sandbox/sb-ts-bug/node_modules/gensync/index.js:108:7)
    at errback (/Users/emcintyre/Development/src/sandbox/sb-ts-bug/node_modules/@babel/core/lib/gensync-utils/async.js:70:18)
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false main[6]

ERROR in ./.storybook/storybook-init-framework-entry.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: [BABEL] /Users/emcintyre/Development/src/sandbox/sb-ts-bug/.storybook/storybook-init-framework-entry.js: Cannot read property 'android' of undefined (While processing: "/Users/emcintyre/Development/src/sandbox/sb-ts-bug/node_modules/@babel/preset-env/lib/index.js")
    at getLowestImplementedVersion (/Users/emcintyre/Development/src/sandbox/sb-ts-bug/node_modules/@babel/preset-env/node_modules/@babel/helper-compilation-targets/lib/utils.js:58:24)
    at /Users/emcintyre/Development/src/sandbox/sb-ts-bug/node_modules/@babel/preset-env/node_modules/@babel/helper-compilation-targets/lib/filter-items.js:26:77
    at Array.filter (<anonymous>)
    at targetsSupported (/Users/emcintyre/Development/src/sandbox/sb-ts-bug/node_modules/@babel/preset-env/node_modules/@babel/helper-compilation-targets/lib/filter-items.js:25:54)
    at isRequired (/Users/emcintyre/Development/src/sandbox/sb-ts-bug/node_modules/@babel/preset-env/node_modules/@babel/helper-compilation-targets/lib/filter-items.js:58:11)
    at filterItems (/Users/emcintyre/Development/src/sandbox/sb-ts-bug/node_modules/@babel/preset-env/node_modules/@babel/helper-compilation-targets/lib/filter-items.js:70:9)
    at /Users/emcintyre/Development/src/sandbox/sb-ts-bug/node_modules/@babel/preset-env/lib/index.js:262:65
    at /Users/emcintyre/Development/src/sandbox/sb-ts-bug/node_modules/@babel/preset-env/node_modules/@babel/helper-plugin-utils/lib/index.js:19:12
    at /Users/emcintyre/Development/src/sandbox/sb-ts-bug/node_modules/@babel/core/lib/config/full.js:199:14
    at Generator.next (<anonymous>)
    at Function.<anonymous> (/Users/emcintyre/Development/src/sandbox/sb-ts-bug/node_modules/@babel/core/lib/gensync-utils/async.js:26:3)
    at Generator.next (<anonymous>)
    at step (/Users/emcintyre/Development/src/sandbox/sb-ts-bug/node_modules/gensync/index.js:254:32)
    at evaluateAsync (/Users/emcintyre/Development/src/sandbox/sb-ts-bug/node_modules/gensync/index.js:284:5)
    at Function.errback (/Users/emcintyre/Development/src/sandbox/sb-ts-bug/node_modules/gensync/index.js:108:7)
    at errback (/Users/emcintyre/Development/src/sandbox/sb-ts-bug/node_modules/@babel/core/lib/gensync-utils/async.js:70:18)
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false main[2]
Child HtmlWebpackCompiler:
                          Asset      Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  6.49 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/@storybook/core/node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core/dist/server/templates/index.ejs] 2.14 KiB {HtmlWebpackPlugin_0} [built]

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

@mrmckeb
Copy link
Member

mrmckeb commented Jun 10, 2020 •
edited
Loading

@macdaddyaz We know this is not working well for Vue right now and plan to deprecate this preset when Storybook 6 hits shortly - in favour of a built-in solution which supports Vue.

In the meantime, can you modify the Webpack config in your project to match your Vue config?

@macdaddyaz
Copy link
Author

Ah, sorry @mrmckeb. I forgot this issue is on 'presets', not on Storybook itself. In fact, I'll go ahead and close this issue. If needed, I can open another on the main repo.

Regarding the modifications, I'm not sure what you mean, but instead of taking this issue on a tangent, I'll move the conversation to Discord.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
question Further information is requested typescript
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@macdaddyaz @shilman @graup @mrmckeb