build-storybook failing: Unexpected token: name (Service)

[chyyran]

Whenever I try to build my project with build-storybook, I get the following error:

~\coding\snowflake\js\snowflake-react-boilerplate [remoting] *$ >
❯ yarn build-storybook
yarn build-storybook v0.24.5
$ cross-env NODE_PATH=src build-storybook -s public
@storybook/react v3.1.7

=> Loading custom addons config.
=> Using default webpack setup based on "Create React App".
=> Copying static files from: public
Building storybook ...
Failed to build the storybook
static/preview.50ad2797cb6bb85ec544.bundle.js from UglifyJs
Unexpected token: name (Service) [static/preview.50ad2797cb6bb85ec544.bundle.js:102557,6]
error Command failed with exit code 1.

Here is my repo for repro

[pascalduez]

Same here:

> build-storybook -s static

@storybook/react v3.1.8

=> Loading custom addons config.
=> Loading custom webpack config (full-control mode).
=> Copying static files from: static
Building storybook ... 
Failed to build the storybook 
static/preview.a245b8999e185284d091.bundle.js from UglifyJs
Invalid assignment [static/preview.a245b8999e185284d091.bundle.js:216641,34]

So at line 216641:34 is an untranspiled fat arrow function, which Uglify no like.

module.exports = (val, opts, pad) => {

[shilman]

@RonnChyran when I try running your repo, I get an error in running storybook itself even before build-storybook:

      [ ModuleNotFoundError: Module not found: Error: Can't resolve 'material-ui/styles/palette' in '/Users/shilman/Downloads/js/snowflake-react-boilerplate/src/stories/utils'
            at factoryCallback (/Users/shilman/Downloads/js/snowflake-react-boilerplate/node_modules/@storybook/react/node_modules/webpack/lib/Compilation.js:265:39)
            at factory (/Users/shilman/Downloads/js/snowflake-react-boilerplate/node_modules/@storybook/react/node_modules/webpack/lib/NormalModuleFactory.js:247:20)
            at resolver (/Users/shilman/Downloads/js/snowflake-react-boilerplate/node_modules/@storybook/react/node_modules/webpack/lib/NormalModuleFactory.js:65:21)

For what it's worth, build-storybook works fine in our kitchen sink example https://github.com/storybooks/storybook/tree/master/examples/cra-kitchen-sink

[chyyran]

@shilman I've fixed the ModuleNotFoundError in 5496ae6, but I continue to get the same error when using build-storybook.

❯ yarn storybook
yarn storybook v0.24.5
$ cross-env NODE_PATH=src start-storybook -p 9009 -s public
@storybook/react v3.1.7

=> Loading static files from: C:\Users\chyran\coding\snowflake\js\snowflake-react-boilerplate\public .
=> Loading custom addons config.
=> Using default webpack setup based on "Create React App".
webpack built ce79f0535e30b310666a in 9281ms
Storybook started on => http://localhost:9009/

webpack building...
webpack built ce79f0535e30b310666a in 984ms
Terminate batch job (Y/N)? y
~\coding\snowflake\js\snowflake-react-boilerplate [remoting] *$ =
❯ yarn build-storybook
yarn build-storybook v0.24.5
$ cross-env NODE_PATH=src build-storybook -s public
@storybook/react v3.1.7

=> Loading custom addons config.
=> Using default webpack setup based on "Create React App".
=> Copying static files from: public
Building storybook ...
Failed to build the storybook
static/preview.f3b1ea4a8d87ac02bb6c.bundle.js from UglifyJs
Unexpected token: name (Service) [static/preview.f3b1ea4a8d87ac02bb6c.bundle.js:110411,6]
error Command failed with exit code 1.
~\coding\snowflake\js\snowflake-react-boilerplate [remoting] *$% =
❯

It seems like at line 110411 there is an untranspiled class declaration

class Service {
    constructor(rootUrl, serviceName) {
        this.getServiceUrl = (...path) => {
            return [this.rootUrl, this.serviceName, ...path].join('/');
        };
        this.rootUrl = rootUrl;
        this.serviceName = serviceName;
    }
}

[pascalduez]

I downgraded too a couple versions and get it working back. Will try to do more precise isolation when I get a bit of time.

[obartra]

3.1.6 is the latest working version for storybook-build for me. I can repro the issue in 3.1.7, 3.1.8 and 3.1.9

[tko]

Seeing similar issue, upgrading to v3.2.4 did not help.

[danielduan]

the static build does not use read the babel file in .storybook/.babelrc, could the build be missing some transforms such that uglify doesn't work?

also, our babel preset has recently been updated to use env. #1668

are there still issues with the static build here?

[pascalduez]

the static build does not use read the babel file in .storybook/.babelrc, could the build be missing some transforms such that uglify doesn't work?

That's exactly it, the JS is not properly transpiled before being sent to Uglify.
Fact is this used to work previously, it was using custom babel config, and is now broken on the same semver range.

are there still issues with the static build here?

Just tried again @storybook/[email protected], still failing.

Related to #1570

[Gijsjan]

3.2.12 is also failing.

[danielduan]

The issue has been open for a while: #1731

Does anyone want to take a stab at making it work?

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 60 days. Thanks!

[huntwj]

Just in case it is relevant, build-storybook was working ok for me until I swapped from babel to the awesome-typescript-loader. It would be nice to have this fixed, but I can work around it by having our stakeholders look at a running storybook server for now.

As always thanks for your work on this awesome project. :)

[ggarek]

Same here. I am using webpack with awesome typescript loader and the build-storybook fails with:

[at-loader] Ok, 0.902 sec.
Failed to build the storybook
static/preview.f92687c9aa8052b8bb4d.bundle.js from UglifyJs
Unexpected token: name (mm) [static/preview.f92687c9aa8052b8bb4d.bundle.js:7301,6]

whereas start-storybook works fine.

i am using @storybook/cli#3.2.18 and @storybook/react#3.2.18

[ggarek]

Here is what i found out.

○ the react-storybook project uses default UglifyJS provided by webpack v3, which is old version and thus it can not handle es6+ features (e.g. let, const, =>, etc).

It means, that your build produces es6+ code, which is passed to old UglifyJS, hence the error

○ For those, who use at-loader, the reason may be tsconfig.compilerOptions.module. If it is set to esnext, then tsc will produce esnext module code (import statements will be there). This feature can not be handled by used UglifyJS as well.

---

No matter the case, one, experiencing UglifyJS error while using storybook, may want to check the generated code passed to UglifyJS.

[Hypnosphi]

We replaced the uglify plugin in #2530

Can you please check if the problem is still present in 3.3.3 version?

[ohtake]

The issue was fixed in v3.3.3. Thank you.

[wasinsandiego]

In case anyone is seeing this issue after v3.3.3 and runs across this, check that your .storybook/.babelrc has configuration for production if using babel-env. That's what fixed this for me.