Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug] Builder error with typescript 4.7.4

See original GitHub issue

What version of vite are you using?

2.9.12

System info and storybook versions

System: OS: Linux 5.15 Ubuntu 20.04.4 LTS (Focal Fossa) CPU: (16) x64 AMD EPYC 7B13 Binaries: Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node Yarn: 1.22.18 - ~/.nvm/versions/node/v16.15.1/bin/yarn npm: 8.8.0 - /workspace/seva-design-system/node_modules/.bin/npm npmPackages: @storybook/addon-a11y: ^6.5.9 => 6.5.9 @storybook/addon-essentials: ^6.5.9 => 6.5.9 @storybook/addon-links: ^6.5.9 => 6.5.9 @storybook/builder-vite: ^0.1.36 => 0.1.36 @storybook/mdx2-csf: ^0.0.3 => 0.0.3 @storybook/react: ^6.5.9 => 6.5.9

Describe the Bug

After upgrading to typescript 4.7.4, I ran start-storybook and build-storybook commands and I got this error.

info @storybook/react v6.5.9
info 
ERR! SyntaxError: /workspace/seva-design-system/.storybook/main.ts: Unexpected token, expected "from" (1:12)
ERR! 
ERR! > 1 | import type { StorybookViteConfig } from '@storybook/builder-vite';
ERR!     |             ^
ERR!   2 | import turbosnap from 'vite-plugin-turbosnap';
ERR!   3 | import svgrPlugin from 'vite-plugin-svgr';
ERR!   4 | import path from 'path';
ERR!     at instantiate (/workspace/seva-design-system/node_modules/@babel/parser/lib/index.js:72:32)
ERR!     at constructor (/workspace/seva-design-system/node_modules/@babel/parser/lib/index.js:358:12)
ERR!     at Parser.raise (/workspace/seva-design-system/node_modules/@babel/parser/lib/index.js:3335:19)
ERR!     at Parser.unexpected (/workspace/seva-design-system/node_modules/@babel/parser/lib/index.js:3373:16)
ERR!     at Parser.expectContextual (/workspace/seva-design-system/node_modules/@babel/parser/lib/index.js:3973:18)
ERR!     at Parser.parseImport (/workspace/seva-design-system/node_modules/@babel/parser/lib/index.js:16156:12)
ERR!     at Parser.parseStatementContent (/workspace/seva-design-system/node_modules/@babel/parser/lib/index.js:14643:27)
ERR!     at Parser.parseStatement (/workspace/seva-design-system/node_modules/@babel/parser/lib/index.js:14533:17)
ERR!     at Parser.parseBlockOrModuleBlockBody (/workspace/seva-design-system/node_modules/@babel/parser/lib/index.js:15176:25)
ERR!     at Parser.parseBlockBody (/workspace/seva-design-system/node_modules/@babel/parser/lib/index.js:15167:10)
ERR!     at Parser.parseProgram (/workspace/seva-design-system/node_modules/@babel/parser/lib/index.js:14451:10)
ERR!     at Parser.parseTopLevel (/workspace/seva-design-system/node_modules/@babel/parser/lib/index.js:14438:25)
ERR!     at Parser.parse (/workspace/seva-design-system/node_modules/@babel/parser/lib/index.js:16401:10)
ERR!     at parse (/workspace/seva-design-system/node_modules/@babel/parser/lib/index.js:16453:38)
ERR!     at parser (/workspace/seva-design-system/node_modules/@babel/core/lib/parser/index.js:52:34)
ERR!     at parser.next (<anonymous>)
ERR!  SyntaxError: /workspace/seva-design-system/.storybook/main.ts: Unexpected token, expected "from" (1:12)
ERR! 
ERR! > 1 | import type { StorybookViteConfig } from '@storybook/builder-vite';
ERR!     |             ^
ERR!   2 | import turbosnap from 'vite-plugin-turbosnap';
ERR!   3 | import svgrPlugin from 'vite-plugin-svgr';
ERR!   4 | import path from 'path';
ERR!     at instantiate (/workspace/seva-design-system/node_modules/@babel/parser/lib/index.js:72:32)
ERR!     at constructor (/workspace/seva-design-system/node_modules/@babel/parser/lib/index.js:358:12)
ERR!     at Parser.raise (/workspace/seva-design-system/node_modules/@babel/parser/lib/index.js:3335:19)
ERR!     at Parser.unexpected (/workspace/seva-design-system/node_modules/@babel/parser/lib/index.js:3373:16)
ERR!     at Parser.expectContextual (/workspace/seva-design-system/node_modules/@babel/parser/lib/index.js:3973:18)
ERR!     at Parser.parseImport (/workspace/seva-design-system/node_modules/@babel/parser/lib/index.js:16156:12)
ERR!     at Parser.parseStatementContent (/workspace/seva-design-system/node_modules/@babel/parser/lib/index.js:14643:27)
ERR!     at Parser.parseStatement (/workspace/seva-design-system/node_modules/@babel/parser/lib/index.js:14533:17)
ERR!     at Parser.parseBlockOrModuleBlockBody (/workspace/seva-design-system/node_modules/@babel/parser/lib/index.js:15176:25)
ERR!     at Parser.parseBlockBody (/workspace/seva-design-system/node_modules/@babel/parser/lib/index.js:15167:10)
ERR!     at Parser.parseProgram (/workspace/seva-design-system/node_modules/@babel/parser/lib/index.js:14451:10)
ERR!     at Parser.parseTopLevel (/workspace/seva-design-system/node_modules/@babel/parser/lib/index.js:14438:25)
ERR!     at Parser.parse (/workspace/seva-design-system/node_modules/@babel/parser/lib/index.js:16401:10)
ERR!     at parse (/workspace/seva-design-system/node_modules/@babel/parser/lib/index.js:16453:38)
ERR!     at parser (/workspace/seva-design-system/node_modules/@babel/core/lib/parser/index.js:52:34)
ERR!     at parser.next (<anonymous>) {
ERR!   code: 'BABEL_PARSE_ERROR',
ERR!   reasonCode: 'UnexpectedToken',
ERR!   loc: Position { line: 1, column: 12, index: 12 },
ERR!   pos: [Getter/Setter]
ERR! }
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.
/workspace/seva-design-system/node_modules/@babel/parser/lib/index.js:72
}, descriptor)), Object.assign(new constructor(), properties));
                               ^

SyntaxError: /workspace/seva-design-system/.storybook/main.ts: Unexpected token, expected "from" (1:12)

> 1 | import type { StorybookViteConfig } from '@storybook/builder-vite';
    |             ^
  2 | import turbosnap from 'vite-plugin-turbosnap';
  3 | import svgrPlugin from 'vite-plugin-svgr';
  4 | import path from 'path';
    at instantiate (/workspace/seva-design-system/node_modules/@babel/parser/lib/index.js:72:32)
    at constructor (/workspace/seva-design-system/node_modules/@babel/parser/lib/index.js:358:12)
    at Parser.raise (/workspace/seva-design-system/node_modules/@babel/parser/lib/index.js:3335:19)
    at Parser.unexpected (/workspace/seva-design-system/node_modules/@babel/parser/lib/index.js:3373:16)
    at Parser.expectContextual (/workspace/seva-design-system/node_modules/@babel/parser/lib/index.js:3973:18)
    at Parser.parseImport (/workspace/seva-design-system/node_modules/@babel/parser/lib/index.js:16156:12)
    at Parser.parseStatementContent (/workspace/seva-design-system/node_modules/@babel/parser/lib/index.js:14643:27)
    at Parser.parseStatement (/workspace/seva-design-system/node_modules/@babel/parser/lib/index.js:14533:17)
    at Parser.parseBlockOrModuleBlockBody (/workspace/seva-design-system/node_modules/@babel/parser/lib/index.js:15176:25)
    at Parser.parseBlockBody (/workspace/seva-design-system/node_modules/@babel/parser/lib/index.js:15167:10)
    at Parser.parseProgram (/workspace/seva-design-system/node_modules/@babel/parser/lib/index.js:14451:10)
    at Parser.parseTopLevel (/workspace/seva-design-system/node_modules/@babel/parser/lib/index.js:14438:25)
    at Parser.parse (/workspace/seva-design-system/node_modules/@babel/parser/lib/index.js:16401:10)
    at parse (/workspace/seva-design-system/node_modules/@babel/parser/lib/index.js:16453:38)
    at parser (/workspace/seva-design-system/node_modules/@babel/core/lib/parser/index.js:52:34)
    at parser.next (<anonymous>) {
  code: 'BABEL_PARSE_ERROR',
  reasonCode: 'UnexpectedToken',
  loc: Position { line: 1, column: 12, index: 12 },
  pos: [Getter/Setter]
}
error Command failed with exit code 1.

main.ts

import type { StorybookViteConfig } from '@storybook/builder-vite';
import turbosnap from 'vite-plugin-turbosnap';
import svgrPlugin from 'vite-plugin-svgr';
import path from 'path';
import { mergeConfig } from 'vite';

const aliasMap = {
  '@atoms': path.resolve(__dirname, '../src/components/atoms'),
  '@molecules': path.resolve(__dirname, '../src/components/molecules'),
  '@organisms': path.resolve(__dirname, '../src/components/organisms'),
  '@colors': path.resolve(__dirname, '../src/components/colors.json'),
  '@hooks': path.resolve(__dirname, '../src/components/hooks'),
  '@utils': path.resolve(__dirname, '../src/components/utils'),
  '@stories': path.resolve(__dirname, '../src/stories'),
  colors: path.resolve(__dirname, '../src/colors.scss'),
  spacing: path.resolve(__dirname, '../src/spacing.scss'),
  typography: path.resolve(__dirname, '../src/typography.scss'),
};

const config: StorybookViteConfig = {
  core: { builder: '@storybook/builder-vite' },
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-a11y', 'storybook-addon-performance'],
  staticDirs: ['../static'],
  features: { storyStoreV7: true, previewMdx2: true },
  framework: '@storybook/react',
  async viteFinal(config) {
    return mergeConfig(config, {
      base: '',
      esbuild: { jsxInject: `import 'react-loading-skeleton/dist/skeleton.css';` },
      plugins: [svgrPlugin(), { ...turbosnap({ rootDir: config.root! }), apply: 'build' }],
      css: { preprocessorOptions: { scss: { importPaths: ['src'].map((p) => path.resolve(p)) } } },
      resolve: { alias: aliasMap },
      build: {
        sourcemap: false,
        reportCompressedSize: false,
        chunkSizeWarningLimit: 1000,
        rollupOptions: {
          onwarn: (warning: { code: string }, next: (arg0: any) => void) => {
            if (warning.code === 'EVAL') return false;
            next(warning);
          },
        },
      },
    });
  },
};
export default config;

Link to Minimal Reproducible Example

Example

Participation

  • I am willing to submit a pull request for this issue.

Issue Analytics

  • State:open
  • Created a year ago
  • Reactions:1
  • Comments:11 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
bryanjtccommented, Jul 29, 2022

I found a solution that worked for me in another issue. https://github.com/storybookjs/storybook/issues/9854#issuecomment-1198909094 If this solution for works for everyone here, then the issue should be closed

1reaction
joshwoodingcommented, Jul 13, 2022

It’s worth adding here, that another way of working around this issue is to use module.exports in your main file. That’s the way I personally have TS working.

Read more comments on GitHub >

github_iconTop Results From Across the Web

ts-loader - npm
To output a built .d.ts file, you can use the DeclarationBundlerPlugin in your webpack config. Failing the build on TypeScript compilation error.
Read more >
Firebase JavaScript SDK Release Notes - Google
Upgraded TypeScript in each individual package to 4.7.4. ... Fixed a bug that caused Firebase SDKs to throw an error in Firefox browsers...
Read more >
Documentation - TypeScript 4.8
We've had a long-standing bug where TypeScript has a very hard time with certain file changes in --watch mode and editor scenarios. Sometimes...
Read more >
Bug listing with status RESOLVED with resolution OBSOLETE ...
Bug :1523 - "[IDEA] Offload work by distributing trivial ebuild maintenance to users, ... Bug:54727 - "gentoo-stats --update fails with error message" ...
Read more >
Announcing TypeScript 4.8 - Microsoft Developer Blogs
Today we're excited to announce the release of TypeScript 4.8! ... --build , --watch , and --incremental Performance Improvements; Errors ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

[Bug] 'mdx' is not exported by node_modules/@mdx-js/react/index.js

Next page

Error Cannot find module 'babel-plugin-macros'