Storybook: is-map: 'return' outside of function

Upgrading from which version? What other packages do you have installed? Do you have a repro you can share?

I will share my package.json for you now

{
  "name": "Demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@casl/ability": "^3.3.0",
    "@casl/react": "^1.0.4",
    "@material-ui/core": "^4.8.0",
    "@material-ui/icons": "^4.5.1",
    "@material-ui/lab": "^4.0.0-alpha.36",
    "@reach/router": "^1.2.1",
    "@sentry/browser": "^5.10.1",
    "@types/jest": "24.0.23",
    "@types/lodash.get": "4.4.6",
    "@types/node": "12.12.17",
    "@types/reach__router": "1.2.6",
    "@types/react": "16.9.16",
    "@types/react-dom": "16.9.4",
    "@types/yup": "0.26.26",
    "@xstate/react": "^0.8.1",
    "axios": "^0.19.0",
    "clsx": "^1.0.4",
    "http-errors": "^1.7.3",
    "immer": "^5.0.0",
    "lodash.get": "^4.4.2",
    "material-ui-dropzone": "^2.4.7",
    "notistack": "^0.9.7",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-hook-form": "^3.29.2",
    "react-scripts": "3.3.0",
    "recharts": "^1.8.5",
    "typescript": "3.7.3",
    "use-immer": "^0.3.5",
    "xstate": "^4.7.3",
    "yup": "^0.27.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 9009 -s public",
    "build-storybook": "build-storybook -s public"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.7.5",
    "@storybook/addon-a11y": "^5.3.0-beta.23",
    "@storybook/addon-actions": "^5.3.0-beta.23",
    "@storybook/addon-backgrounds": "^5.3.0-beta.23",
    "@storybook/addon-docs": "^5.3.0-beta.23",
    "@storybook/addon-knobs": "^5.3.0-beta.23",
    "@storybook/addon-links": "^5.3.0-beta.23",
    "@storybook/addon-notes": "^5.3.0-beta.23",
    "@storybook/addon-viewport": "^5.3.0-beta.23",
    "@storybook/addons": "^5.3.0-beta.23",
    "@storybook/preset-create-react-app": "^1.4.0",
    "@storybook/react": "^5.3.0-beta.23",
    "@typescript-eslint/eslint-plugin": "^2.10.0",
    "@typescript-eslint/parser": "^2.10.0",
    "babel-loader": "^8.0.6",
    "eslint": "^6.7.2",
    "eslint-config-google": "^0.14.0",
    "eslint-config-prettier": "^6.7.0",
    "eslint-plugin-prettier": "^3.1.2",
    "eslint-plugin-react": "^7.17.0",
    "husky": "^3.1.0",
    "lint-staged": "^9.4.3",
    "prettier": "^1.19.1"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.ts?(x)": [
      "prettier --write",
      "eslint --fix",
      "git add"
    ]
  }
}

Let me know anything you need!

I don't remember the exact previous version, but I make sure that it must be 5.3.0-beta.21 or 5.3.0-beta.22

using version 3.4.12 of @storybook/react and I got the same error, see the full log

~https://github.com/inspect-js/is-map/pull/3~

It seems that the problem is babel-loader applied to node_modules.

And the error on [email protected] is a webpack issue. https://github.com/webpack/webpack/issues/8509

I couldn't confirm the exact release version of the patch for this issue, but guessing from PR's date, it was 4.x. So we can't use storybook@3 anymore? 🤔

This appears to be due to https://github.com/storybookjs/presets/issues/78

I'm going to pursue this issue there, but will leave this issue open until it's resolved, since I bet a lot of people will be looking for this.

downgrade to "@storybook/react": "3.4.10" seem to work until there will be a fix

@laviro This is a problem with @storybook/preset-create-react-app. No need to downgrade Storybook.

@shilman
It's @storybook/[email protected], which has no presets support...

@pocka You don't need to downgrade at all though. Simply remove the preset and use 5.2 or 5.3-beta. You can see my test results here: https://github.com/storybookjs/presets/issues/78#issuecomment-565890399

@shilman
For @laviro 's case, they is using [email protected], which uses webpack@3 internally and it causes the error. It's not relevant to preset-cra, because it can't use preset.

I can't see why downgrading works though.

Fixed in @storybook/[email protected]!! Please upgrade and try it out! Thanks @mrmckeb for the fix 🙌

@shilman These are my storybook dependencies:

"@storybook/addon-actions": "^4.1.11",
"@storybook/addon-knobs": "^4.1.11",
"@storybook/addon-links": "^4.1.11",
"@storybook/addon-options": "^4.1.11",
"@storybook/addon-viewport": "^4.1.11",
"@storybook/addons": "^4.1.11",
"@storybook/cli": "^4.1.11",
"@storybook/react": "^4.1.11"

I'm not using the presets package but I've also started experiencing it today.

@alonfixlerfiverr Ugh, sorry to hear that. Looking into it now.

UPDATE: Here's what I've got.

1. The standalone preset @storybook/preset-create-react-app fix works for 5.2.x / 5.3.x, and for everybody on 5.2 and later we recommend using the fix in 1.5.0.
2. If you are using the latest version of preset-create-react-app (1.5.0) and are still experiencing the problem, please comment.
3. If you're using an older version of Storybook, we recommend upgrading to the latest stable version (currently 5.2.8) and using the standalone preset.
4. If you can't upgrade and somebody has already commented with your major version (3.x, 4.x, 5.0/5.1), please upvote that comment. If not, please comment.
5. If you are not using CRA and are experiencing this issue, please comment.

@shilman we are still using webpack 3 therefore we can't upgrade at the moment,
are you dropping support in v3.x?

Hi,

@shilman I am also now getting this error but my dependencies is like this:

"devDependencies": {
    "@dump247/storybook-state": "^1.5.0",
    "@storybook/addon-options": "^3.4.10",
    "@storybook/react": "^3.4.10",
    "@types/fetch-mock": "^6.0.1",
    "@types/webpack-env": "^1.13.3",
    "awesome-typescript-loader": "^3.2.3",
    "babel-core": "^6.26.3",
    "css-loader": "^0.28.7",
    "es6-promise": "4.1.1",
    "faker": "^4.1.0",
    "fetch-mock": "^6.3.0",
    "file-loader": "^0.11.1",
    "raw-loader": "^0.5.1",
    "storybook-readme": "^3.2.1",
    "style-loader": "^0.19.0"
  }

Error Screenshot:

Can someone please help. Thank you so much in advance.

exactly same issue with "@storybook/preact": "5.2.1"
The error is throw by babel-loader so not sure what's causing this error

@webdevelperify can you pin to "@storybook/react": "3.4.10" instead? without the '^'

@shilman, seems that is-map and is-set modules are used by airbnb-js-shims which was added in @storybook/react@ v3.4.11: https://github.com/storybookjs/storybook/blob/release/3.4/CHANGELOG.md#3411

that's might be the reason that v3.4.10 works for me.

@laviro thank you so much for your instruction. It works as suggested by you. I am very new in this space can you please point me to some article where it explains how to debug these kind of issues. I never get this part and stuck where to start.

please point me to some article where it explains how to debug these kind of issues

@webdevelperify you can check out this short documentation: https://docs.npmjs.com/about-semantic-versioning

@laviro Great tip on 3.4.10 and airbnb-js-shims. We generally don't support older versions of Storybook, only next and latest versions (currently 5.3 / 5.2). However, in the case of issues like this that might affect all of our users, we might release a 3.4.x and a 4.1.x patch. It's a bit of a pain, so I'm waiting to see how many people complain. It seems like for 3.x, your workaround is sufficient.

@eugenefm Not able to reproduce. Can you share your repo with me?

@shilman nevermind it was actually different error, sorry about that, was jumping between issues trying to troubleshoot and mixed up this thread with another one.

@shilman Is there any hotfix that could be applied to version 4.x.x?

Downgrading within the major's boundaries doesn't seem to help.

@sahariko can you upgrade to 5.2?

@shilman Thanks for the quick fix. Unfortunately it does not (seem to) work, if you're not using CRA as the base...
My Gatsby-based setup keeps throwing the is-map error, or an error related to core-js.
I'm using beta.31 including [email protected] but this preset is not set in presets.js, it seems to be needed though to prevent the core-js issue

@thuringia can you share a repro?

deep-equal 2.0.1 may be the culprit. DOWNGRADING to deep-equal 1.1.1 resolves it for me.

Posted the following issue over there:
deep-equal issue #78

Top level return is perfectly valid in node modules. If something is breaking on them, that is what needs fixing.

@shilman No, that would force me to release a breaking change of my package. Are you not planning to provide support for older majors at all?

We're having the same problem - without using@storybook/preset-create-react-app.

These are our Storybook packages;

"@storybook/addon-actions": "5.2.8",
"@storybook/addon-knobs": "5.2.8",
"@storybook/addon-links": "5.2.8",
"@storybook/addons": "5.2.8",
"@storybook/react": "5.2.8"

We can see that is-map's grandparent is @storybook/react - but is-map is quite a few levels deep.

What should we update to?

@shilman I extracted a repro from our repo at https://github.com/thuringia/storybook-build-issue-repro

@n8sabes Thanks for the tip! Unfortunately it did not work for us.
Let's see if the repro helps, otherwise I will migrate to CRA as a base. That won't be too big of an undertaking

@sahariko we sometimes provide updates to old majors in situations like this. however, in this case i'd like to push people on 4.x to upgrade to 5.x. why would upgrading a dev dependency necessitate a major version bump for your package?

Thanks @thuringia! I'll take a look.

UPDATE the repo you linked to contains a bunch of merge conflicts. can you fix?

@shilman It's not a devDependency in our case, it's a dependency in a package that functions similarily to CRA in the sense that it encapsulates configurations and dependencies for consumers.

If they're using version 4 features today, they might get broken due to this update.

Not sure if it's helpful or not, but I've put together a simple set of steps that exhibits the exact same anomaly (using CRA and deep-equal):

STEPS:

yarn create react-app my-app --template typescript
cd my-app
yarn add deep-equal
vi src/index.tsx

# Add lines to index.tsx before render()
    import deepEqual from "deep-equal"; // NEW LINE
    deepEqual({}, {});                  // NEW LINE

yarn build

Output:

Failed to compile.

./node_modules/is-map/index.js
SyntaxError: .../my-app/node_modules/is-map/index.js: 'return' outside of function (12:1)

  10 |      return false;
  11 |  };
> 12 |  return;
     |  ^
  13 | }
  14 |
  15 | var $mapHas = $Map ? Map.prototype.has : null;


error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

@shilman Looks like the auto-stashing of the pre-commit hook was a bit over-eager. I removed all the "conflicts", sorry for the noise. I updated the repo

Hi,

This issue appears randomly on a fresh install of Vulcan, but not on all machines... We don't use CRA.
@loustak can reproduce systematically on his machine, but we can't reproduce on other machines.

We use Node 8.

Here is our package list:

"dependencies": {
    "@babel/runtime": "7.1.2",
    "analytics-node": "^2.1.1",
    "apollo-cache-inmemory": "^1.4.2",
    "apollo-client": "2.6.3",
    "apollo-engine": "1.1.2",
    "apollo-errors": "^1.9.0",
    "apollo-link-error": "^1.1.5",
    "apollo-link-http": "^1.5.14",
    "apollo-link-schema": "^1.1.1",
    "apollo-link-state": "^0.4.2",
    "apollo-server": "2.3.3",
    "apollo-server-express": "2.3.3",
    "apollo-utilities": "^1.3.2",
    "bcrypt": "^3.0.2",
    "body-parser": "^1.18.2",
    "chalk": "2.2.0",
    "classnames": "^2.2.3",
    "compression": "^1.7.1",
    "cookie-parser": "^1.4.3",
    "cross-fetch": "^0.0.8",
    "crypto-js": "^3.1.9-1",
    "dataloader": "^1.3.0",
    "deepmerge": "^1.2.0",
    "dot-object": "^1.7.0",
    "enzyme-adapter-react-16": "^1.14.0",
    "escape-string-regexp": "^1.0.5",
    "express": "^4.14.0",
    "flat": "^4.0.0",
    "graphql": "14.1.1",
    "graphql-anywhere": "^3.0.1",
    "graphql-date": "^1.0.2",
    "graphql-tag": "^2.0.0",
    "graphql-type-json": "^0.1.4",
    "graphql-voyager": "^1.0.0-rc.26",
    "handlebars": "^4.0.5",
    "he": "^1.1.1",
    "history": "^3.0.0",
    "html-to-text": "^2.1.0",
    "immutability-helper": "^2.0.0",
    "import": "0.0.6",
    "intl": "^1.2.4",
    "intl-locales-supported": "1.4.6",
    "juice": "^5.1.0",
    "lodash": "^4.17.10",
    "mailchimp": "^1.1.6",
    "marked": "^0.3.9",
    "meteor-node-stubs": "^0.2.3",
    "mingo": "^2.2.0",
    "moment": "^2.13.0",
    "pluralize": "7.0.0",
    "prop-types": "^15.6.0",
    "qs": "^6.6.0",
    "react": "^16.4.1",
    "react-addons-pure-render-mixin": "^15.4.1",
    "react-apollo": "3.0.0",
    "react-bootstrap": "^1.0.0-beta.5",
    "react-bootstrap-datetimepicker": "0.0.22",
    "react-cookie": "^2.1.4",
    "react-datetime": "^2.11.1",
    "react-dom": "^16.4.1",
    "react-dropzone": "10.1.5",
    "react-helmet": "^5.1.3",
    "react-intl": "^2.1.3",
    "react-loadable": "^4.0.3",
    "react-markdown": "^3.1.4",
    "react-places-autocomplete": "^5.0.0",
    "react-redux": "^5.0.6",
    "react-router": "^4.3.1",
    "react-router-bootstrap": "^0.24.4",
    "react-router-dom": "^4.3.1",
    "react-router-scroll": "^0.4.4",
    "react-stripe-checkout": "^2.4.0",
    "recompose": "^0.26.0",
    "redux": "^3.6.0",
    "rss": "^1.2.1",
    "sanitize-html": "^1.16.3",
    "simpl-schema": "^1.4.2",
    "speakingurl": "^9.0.0",
    "stripe": "^4.23.1",
    "styled-components": "^2.1.1",
    "underscore": "^1.8.3",
    "universal-cookie-express": "^2.1.5",
    "url": "^0.11.0"
  },
  "private": true,
  "devDependencies": {
    "@apollo/react-testing": "^3.1.0",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@material-ui/core": "^4.5.1",
    "@storybook/addon-actions": "5.0.8",
    "@storybook/addon-knobs": "5.0.8",
    "@storybook/addon-links": "5.0.1",
    "@storybook/addons": "5.0.1",
    "@storybook/react": "5.0.8",
    "@storybook/theming": "5.0.8",
    "@userfrosting/merge-package-dependencies": "^1.2.0",
    "auto-changelog": "^1.16.1",
    "autoprefixer": "^6.3.6",
    "autosuggest-highlight": "^3.1.1",
    "babel-eslint": "^10.0.1",
    "babylon": "^6.18.0",
    "chromedriver": "^2.46.0",
    "colors": "^1.3.2",
    "css-loader": "^2.1.1",
    "diff": "^3.5.0",
    "enzyme": "^3.3.0",
    "eslint": "^5.16.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-meteor": "0.1.1",
    "eslint-import-resolver-meteor": "^0.4.0",
    "eslint-plugin-babel": "^5.3.0",
    "eslint-plugin-import": "^2.16.00",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-meteor": "^5.1.0",
    "eslint-plugin-mocha": "^5.3.0",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-react": "^7.12.4",
    "expect": "^24.7.1",
    "glob": "^7.1.3",
    "husky": "^1.2.0",
    "jsdom": "^11.11.0",
    "jsdom-global": "^3.0.2",
    "mdi-material-ui": "^5.11.0",
    "moment-timezone": "^0.5.25",
    "node-sass": "^4.11.0",
    "prettier": "^1.15.2",
    "react-autosuggest": "^9.4.3",
    "react-isolated-scroll": "^0.1.1",
    "react-jss": "^8.6.1",
    "react-keyboard-event-handler": "^1.3.2",
    "sass-loader": "^7.1.0",
    "scrap-meteor-loader": "0.0.1",
    "selenium-webdriver": "^3.6.0",
    "sinon": "^6.3.5",
    "storybook-addon-intl": "^2.4.1",
    "storybook-react-router": "^1.0.5",
    "vulcan-loader": "0.0.1",
    "waait": "^1.0.5",
    "webpack": "4.28.4"
  },

@thuringia can't repro ... can you try again?

Still exploring the issue but basically the responsibility chain seems to be:

@storybook/[email protected] > @storybook/react > @storybook/[email protected] > [email protected] > [email protected] > [email protected].

es-get-iterator update has just been published 18 hours ago so it could be the responsible?

@shilman Oh no... I cleaned out all node_module, caches and cleared the yarn cache but still get the error:

@ 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 (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/is-set/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\robert.wawrzyniak\Developer\EinfachLecker20\repronode_modules\is-
set\index.js: 'return' outside of function (12:1)

10 | return false;
11 | };
> 12 | return;
| ^
13 | }
14 |
15 | var $mapHas = $Map ? Map.prototype.has : null;

It does appear to build cleanly though, until Storybook builds the HTML includes... I could interpret the Webpack output wrong though

@thuringia what are your steps to repro? I did yarn && yarn build && yarn storybook and it worked for me

@shilman I did exactly the same

I am trying to reproduce this using CRA but so far no luck. With CRA it works

@eric-burel nice detective work. @mrmckeb @ljharb do you have a clear understanding of the root cause here? @mrmckeb it seems like your fix works for CRA, but it seems like it's only a bandaid and it's affecting a whole host of different use cases.

Explictely installing npm i --save-dev --save-exact [email protected] fixes it for us, 2.2.1 is the problematic version (it installs [email protected] which installs is-map).

Edit: it was not enough, see https://github.com/storybookjs/storybook/issues/9154#issuecomment-566700007
We also need to lock [email protected].

The idea is that a call to npm ls should not list either is-set or is-map, because some webpack config seems unable to use them (older versions probably).

However I have a lot of issues lately with all those ES6 updates and all, half my apps don't build when I rerun them, always due to sub-dependencies... even when using Webpack or Babel...

@eric-burel you rock. @thuringia @n8sabes @sahariko please try @eric-burel 's workaround: upvote his comment if it's working for you & comment here if it doesn't. thanks!

Opened PRs for both faulty packages:
https://github.com/inspect-js/is-map/pull/5
https://github.com/inspect-js/is-set/pull/5

still seeing the error after npm i --save-dev --save-exact [email protected] explicit. This work around is for current version of SB? Or do I need to rollback?
my current SB dependencies are,

"@storybook/addon-actions": "^5.0.11",
"@storybook/addon-links": "^5.0.11",
"@storybook/addons": "^5.0.11",
"@storybook/react": "^5.0.11",
"airbnb-js-shims": "2.2.0",
"storybook-react-router": "^1.0.5",

@TFisch I had to add

"resolutions": {
    "airbnb-js-shims": "2.2.0",
    "es-get-iterator": "1.0.1",
    "is-map": "1.0.1",
    "is-set": "1.0.0"
  },

to package.json and regenerate the lockfile

Update:
This doesn't appear to be a great workaround. Storybook builds now, but creates a very long list of warnings with imports that cannot be found.
I get the Storybook UI now up and running, but none of my stories are present...
There was a weird exclusion rule for node_modules left from the Gatsby starter. Everything is working now

@sahariko neither package is faulty. Top level return is valid in node modules; it’s probably webpack not being configured properly.

@thuringia thanks for the suggestion but I'm using npm so resolutions seems to not be accessible.

@ljharb Regardless, I think it's a good idea to provide support for consumers that use webpack, which is arguably a whole lot.

That is quite true, but webpack v4.31+ supports top level return as far as i am aware.

@TFisch did you try to add is-set and is-map as dependencies and dedupe? That should create the same effect using npm

If someone can identify the exact thing that’s failing to properly parse is-map and is-set, i could easily be convinced to alter those packages to not rely on that feature of CJS. Has anyone done that?

Are you inherently opposed to this fix - https://github.com/inspect-js/is-map/pull/5? It also cleans up the module a little bit.

I’ll review it when i get to a computer, but I’m philosophically opposed to any change forced on my module by broken tools, at least not without understanding exactly which tools are broken so i can pursue fixing them.

@thuringia
so adding
"es-get-iterator": "1.0.1", "is-map": "1.0.1", "is-set": "1.0.0" as dependencies, then "airbnb-js-shims": "2.2.0", as a dev-depend? I've done that followed by npm dedupe and I'm still seeing the error.

Update: Im now receiving the same error, but its pointing to the modules of the dependency instead of the project.

Previous error path: myProject/node_modules/is-map/index.js

New error path: myProject/node_modules/es-get-iterator/node_modules/is-map/index.js

Did I do something silly?

That is quite true, but webpack v4.31+ supports top level return as far as i am aware.

It also brings some bugs, we had to lock to 4.28 due to this issue with dynamic-loader: https://github.com/webpack/webpack/issues/8656.

Maybe it has been solved since but it was a real blocker for a Webpack update

It seems that some other package may import es-get-iterator, my own workaround does not work this good :/ what's your versions of Webpack for those having solved the issue or still facing it?

Maybe try npm i --save-dev --save-exact [email protected] [email protected]

Basically subdependencies don't necessarily lock version so we have to identify all culprits for this to work, so we have 0 dependency on is-map, is-set.

The real solution is probably either including "faulty" modules in the Babel build, or updating Webpack to support those modules. Basically the is-set, is-map modules are "right" but many build system may lag behind for some reason (regression in new versions of Webpack etc.)

Edit: tested, working for me

I got the workaround working following what @eric-burel and @thuringia mentioned. Thanks, guys!

What I've done is installing the conflicting libs to a previous version.

yarn add [email protected] [email protected] [email protected] [email protected]

Once installed, then added the resolutions property in package.json.

  "resolutions": {
    "airbnb-js-shims": "2.2.0",
    "es-get-iterator": "1.0.1",
    "is-map": "1.0.1",
    "is-set": "1.0.0"
  },

For those using npm, perhaps you can check npm-force-resolutions.

Essentially, the issue is caused both by webpack being broken prior to v4.31, and babel/CRA not enabling allowTopLevelReturn by default, and it's worsened by the (highly unsafe) behavior of transpiling third party code.

I'll have a change published for is-map and is-set soon which should address this.

v2.0.1 of both is-map and is-set have been released; this can be closed.

Thanks so much for the fix @ljharb!

It sounds like there's something fishy going on in the ecosystem, and we'll do our best to sort this out on the Storybook side too.

In the meantime, hopefully this unbreaks a lot of people! 🙌

With Jenkins build throwing the same error.