Main config in typescript throwing error with export default

[fernandopasik]

Describe the bug
main.ts with typescript export default breaks

To Reproduce

1. rename your config if it's in js to ts and have something like

export default {
  addons: ['@storybook/addon-docs', '@storybook/addon-knobs'],
};

Expected behavior
No error produced and server starts

Screenshots

info @storybook/web-components v6.0.0-beta.35
info 
WARN Unable to close preview build!
ERR! /hello-web-components/.storybook/main.ts:1
ERR! export default {
ERR! ^^^^^^
ERR! 
ERR! SyntaxError: Unexpected token 'export'
ERR!     at compileFunction (<anonymous>)
ERR!     at Object.compileFunction (vm.js:344:18)
ERR!     at wrapSafe (internal/modules/cjs/loader.js:1106:15)
ERR!     at Module._compile (internal/modules/cjs/loader.js:1140:27)
ERR!     at Module._compile (/hello-web-components/node_modules/pirates/lib/index.js:99:24)
ERR!     at Module._extensions..js (internal/modules/cjs/loader.js:1196:10)
ERR!     at Object.newLoader [as .ts] (/hello-web-components/node_modules/pirates/lib/index.js:104:7)
ERR!     at Module.load (internal/modules/cjs/loader.js:1040:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:929:14)
ERR!     at Module.require (internal/modules/cjs/loader.js:1080:19)
ERR!     at require (internal/modules/cjs/helpers.js:72:18)
ERR!     at interopRequireDefault (/hello-web-components/node_modules/@storybook/core/dist/server/utils/server-require.js:66:16)
ERR!     at serverRequire (/hello-web-components/node_modules/@storybook/core/dist/server/utils/server-require.js:103:10)
ERR!     at loadCustomPresets (/hello-web-components/node_modules/@storybook/core/dist/server/common/custom-presets.js:21:47)
ERR!     at _default (/hello-web-components/node_modules/@storybook/core/dist/server/manager/manager-config.js:146:143)
ERR!     at _default (/hello-web-components/node_modules/@storybook/core/dist/server/dev-server.js:59:51)
ERR!  /hello-web-components/.storybook/main.ts:1
ERR! export default {
ERR! ^^^^^^
ERR! 
ERR! SyntaxError: Unexpected token 'export'
ERR!     at compileFunction (<anonymous>)
ERR!     at Object.compileFunction (vm.js:344:18)
ERR!     at wrapSafe (internal/modules/cjs/loader.js:1106:15)
ERR!     at Module._compile (internal/modules/cjs/loader.js:1140:27)
ERR!     at Module._compile (/hello-web-components/node_modules/pirates/lib/index.js:99:24)
ERR!     at Module._extensions..js (internal/modules/cjs/loader.js:1196:10)
ERR!     at Object.newLoader [as .ts] (/hello-web-components/node_modules/pirates/lib/index.js:104:7)
ERR!     at Module.load (internal/modules/cjs/loader.js:1040:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:929:14)
ERR!     at Module.require (internal/modules/cjs/loader.js:1080:19)
ERR!     at require (internal/modules/cjs/helpers.js:72:18)
ERR!     at interopRequireDefault (/hello-web-components/node_modules/@storybook/core/dist/server/utils/server-require.js:66:16)
ERR!     at serverRequire (/hello-web-components/node_modules/@storybook/core/dist/server/utils/server-require.js:103:10)
ERR!     at loadCustomPresets (/hello-web-components/node_modules/@storybook/core/dist/server/common/custom-presets.js:21:47)
ERR!     at _default (/hello-web-components/node_modules/@storybook/core/dist/server/manager/manager-config.js:146:143)
ERR!     at _default (/hello-web-components/node_modules/@storybook/core/dist/server/dev-server.js:59:51)

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

[shilman]

@fernandopasik I believe this can be configured in your tsconfig.json using the compilerOptions.module option.

[fernandopasik]

I'm using "module": "ESNext" in tsconfig.json

[fernandopasik]

I was looking also to the examples in the repo, all of the main.ts use module.exports

[shilman]

main.ts is handled by node. So it requires module generation that’s compatible with the version of node you’re using. If your Node is handling ESNext modules then your setting will work. Maybe there’s some kind of transformation we can do when we load the file so we can get away with more modern module formats. Cc @igor-dv

[fernandopasik]

Yes, sorry, I didn't specify, I'm using node 14.2.0 and type: "module" in package.json

[fernandopasik]

Actually I was using export default and it was working fine until I added @storybook/addon-docs

I see a few constrains in the package requirements adding old versions of babel, but I haven't pinpointed the one that's causing the problem

[shilman]

That's pretty strange that addon-docs would change that. Does the default export work if you remove addon-docs temporarily?

[fernandopasik]

Yes, it does. I know it's strange.

[fernandopasik]

Narrowing down it a bit the adding of vue-docgen-loader produces the error, I'm still analyzing where is the problem from there

[fernandopasik]

Digging deeper into the rabbit hole vue-docgen-loader installs jscodeshift which installs @babel/register and the last one produces the error

[fernandopasik]

Not sure if possible to try out https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-simple-docgen-loader looks more official than vue-docgen-loader

[shilman]

Related: #8936

[fernandopasik]

I know it's related to that issue, but looks like that ticket will take further to be done.

Would it be ok as a solution for this to replace the loader with the official one?

[shilman]

@fernandopasik that would be great. feel free to take that!

[fernandopasik]

thanks to #11759 there's no need for this one anymore