Storybook: Module build failed, Unexpected token, expected ";" (39:25)

[Losses]

Describe the bug
Trying build react components, got errors after upgrading my config file, here are the error:

ERROR in ./src/components/Avatar/Avatar.tsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\Losses\temp_dev\paperclip\paperclipclub_frontend\src\components\Avatar\Avatar.tsx: Unexpected token, expected ";" (39:25)

  37 | }
  38 |
> 39 | export default Avatartry {
     |                          ^
  40 |     // @ts-ignore
  41 |     Avatar.displayName = "Avatar";
  42 |     // @ts-ignore
    at Object.raise (C:\Users\Losses\temp_dev\paperclip\paperclipclub_frontend\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:7017:17)
    at Object.unexpected (C:\Users\Losses\temp_dev\paperclip\paperclipclub_frontend\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:8395:16)
    at Object.semicolon (C:\Users\Losses\temp_dev\paperclip\paperclipclub_frontend\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:8377:40)
    at Object.parseExportDefaultExpression (C:\Users\Losses\temp_dev\paperclip\paperclipclub_frontend\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:11867:12)
    at Object.parseExportDefaultExpression (C:\Users\Losses\temp_dev\paperclip\paperclipclub_frontend\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:5961:18)
    at Object.parseExport (C:\Users\Losses\temp_dev\paperclip\paperclipclub_frontend\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:11768:31)
    at Object.parseExport (C:\Users\Losses\temp_dev\paperclip\paperclipclub_frontend\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:5939:20)
    at Object.parseStatementContent (C:\Users\Losses\temp_dev\paperclip\paperclipclub_frontend\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:10794:27)
    at Object.parseStatementContent (C:\Users\Losses\temp_dev\paperclip\paperclipclub_frontend\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:5976:18)
    at Object.parseStatement (C:\Users\Losses\temp_dev\paperclip\paperclipclub_frontend\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:10690:17)
    at Object.parseBlockOrModuleBlockBody (C:\Users\Losses\temp_dev\paperclip\paperclipclub_frontend\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:11264:25)
    at Object.parseBlockBody (C:\Users\Losses\temp_dev\paperclip\paperclipclub_frontend\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:11251:10)
    at Object.parseTopLevel (C:\Users\Losses\temp_dev\paperclip\paperclipclub_frontend\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:10621:10)
    at Object.parse (C:\Users\Losses\temp_dev\paperclip\paperclipclub_frontend\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:12222:10)
    at parse (C:\Users\Losses\temp_dev\paperclip\paperclipclub_frontend\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:12273:38)
    at parser (C:\Users\Losses\temp_dev\paperclip\paperclipclub_frontend\node_modules\@babel\core\lib\parser\index.js:54:34)
 @ ./src/stories/03-01-Avatar.stories.js 47:0-46 54:13-19 55:63-69
 @ ./src sync ^\.\/(?:(?:|[\\/]|(?:(?:(?!(?:|[\\/])\.).)*?)[\\/])(?!\.)(?=.)[^\\/]*?\.stories\.(?:\[tj\]|[tj])s)$
 @ ./.storybook/generated-entry.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js ./.storybook/config.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

The problem is: export default Avatartry { should be something like export default Avatar; try {

It seems that the packaging tool didn't add semicolon after export. but our code use a semicolon-less style.

the code context:

// somecode...
        ? <img className={styles.img} src={src} alt={alt} />
        : <Skeleton circle />
      }
    </span>
  )
}

export default Avatar

This is my main.js

const path = require('path')

module.exports = {
  stories: ['../src/**/*.stories.[tj]s'],
  addons: [
    // Presets
    {
      name: '@storybook/preset-create-react-app',
      options: {
        tsDocgenLoaderOptions: {
          tsconfigPath: path.resolve(__dirname, '../tsconfig.json'),
        },
      },
    },
    {
      name: '@storybook/addon-docs/preset',
      options: {
        configureJSX: true
      }
    },
    // Plugins
    '@storybook/addon-links/register',
    '@storybook/addon-actions/register',
    '@storybook/addon-knobs/register',
  ],
}

this is my webpack.config.js

const path = require('path')

module.exports = ({ config }) => {
  config.resolve.modules.push(path.resolve(__dirname, "../src"));
  return config;
}

version of related packages:

├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
└─ [email protected]

[Losses]

If you are facing the same problem, try do following things:

1. remove webpack.config.js which is generated by older version of storybook (maybe).
2. cleanup your preset configs:

const path = require('path')

module.exports = {
  stories: ['../src/**/*.stories.[tj]s'],
  addons: [
    // presets
    '@storybook/preset-create-react-app',
    '@storybook/addon-docs/preset',
    // plugins
    '@storybook/addon-links/register',
    '@storybook/addon-actions/register',
    '@storybook/addon-knobs/register',
  ],
}

I have no idea why this bug happened before, but if you are migrating from an old format of sb's config to a new one, and got the same problem, this solution may help.

[jeotte]

To anyone that comes across this problem in the future:

I just had this problem, and figured out why. It makes no sense, but for me, if I had an empty line at the bottom of my file, it worked fine, but if I didn't, then I'd get the error mentioned.

So, if you've tried everything else, try just making sure your file ends with a blank line.

[Amoodaa]

Its funny, it happened to me, bc i was writing in a .ts file, make it .stories.tsx instead it should work !