search

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.15k stars 9.25k forks source link

is-map: 'return' outside of function #9154

Closed hckhanh closed 4 years ago

hckhanh commented 4 years ago

When I try to update to v5.3.0-beta.23 I get this error when building the project

ERROR in ./node_modules/is-map/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: node_modules\is-map\index.js: 'return' outside of function (12:1)
shilman commented 4 years ago

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

hckhanh commented 4 years ago

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"
    ]
  }
}
hckhanh commented 4 years ago

Let me know anything you need!

hckhanh commented 4 years ago

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

Ron-Lavi commented 4 years ago

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

pocka commented 4 years ago

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

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

pocka commented 4 years ago

And the error on storybook@3.x 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? 🤔

shilman commented 4 years ago

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.

Ron-Lavi commented 4 years ago

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

shilman commented 4 years ago

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

pocka commented 4 years ago

@shilman It's @storybook/react@3.4.10, which has no presets support...

shilman commented 4 years ago

@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

pocka commented 4 years ago

@shilman For @laviro 's case, they is using SB@3.4, 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.

shilman commented 4 years ago

Fixed in @storybook/preset-create-react-app@1.5.0!! Please upgrade and try it out! Thanks @mrmckeb for the fix 🙌

alonfixler commented 4 years ago

@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.

shilman commented 4 years ago

@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.
Ron-Lavi commented 4 years ago

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

webdevelperify commented 4 years ago

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: image

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

pdr0 commented 4 years ago

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

Ron-Lavi commented 4 years ago

@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.

webdevelperify commented 4 years ago

@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.

Ron-Lavi commented 4 years ago

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

shilman commented 4 years ago

@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.

shilman commented 4 years ago

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

eugenefm commented 4 years ago

@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.

sahariko commented 4 years ago

@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.

shilman commented 4 years ago

@sahariko can you upgrade to 5.2?

thuringia commented 4 years ago

@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 preset-create-reactapp@1.5.0 but this preset is not set in presets.js, it seems to be needed though to prevent the core-js issue

shilman commented 4 years ago

@thuringia can you share a repro?

n8sabes commented 4 years ago

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

ljharb commented 4 years ago

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

sahariko commented 4 years ago

@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?

TomFoyster commented 4 years ago

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?

thuringia commented 4 years ago

@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

shilman commented 4 years ago

@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?

shilman commented 4 years ago

Thanks @thuringia! I'll take a look.

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

sahariko commented 4 years ago

@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.

n8sabes commented 4 years ago

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.
thuringia commented 4 years ago

@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

eric-burel commented 4 years ago

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"
  },
shilman commented 4 years ago

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

eric-burel commented 4 years ago

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

@storybook/react@5.0.8 > @storybook/react > @storybook/core@5.0.8 > airbnb-js-shims@2.2.1 > es-get-iterator@1.0.2 > is-map@2.0.0.

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

thuringia commented 4 years ago

@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\repro\node_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

shilman commented 4 years ago

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

thuringia commented 4 years ago

@shilman I did exactly the same

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

shilman commented 4 years ago

@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.

eric-burel commented 4 years ago

Explictely installing npm i --save-dev --save-exact airbnb-js-shims@2.2.0 fixes it for us, 2.2.1 is the problematic version (it installs es-get-iterator@1.0.2 which installs is-map).

Edit: it was not enough, see https://github.com/storybookjs/storybook/issues/9154#issuecomment-566700007 We also need to lock promise.allsettled@1.0.1.

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).

eric-burel commented 4 years ago

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...

shilman commented 4 years ago

@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!

sahariko commented 4 years ago

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