Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
hckhanh opened this issue Dec 15, 2019 · 69 comments
Closed

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

hckhanh opened this issue Dec 15, 2019 · 69 comments
Labels
bug cra Prioritize create-react-app compatibility has workaround

Comments

@hckhanh
Copy link

hckhanh commented Dec 15, 2019

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
Copy link
Member

shilman commented Dec 15, 2019

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

@hckhanh
Copy link
Author

hckhanh commented Dec 15, 2019

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
Copy link
Author

hckhanh commented Dec 15, 2019

Let me know anything you need!

@hckhanh
Copy link
Author

hckhanh commented Dec 15, 2019

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
Copy link

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

@pocka
Copy link
Contributor

pocka commented Dec 15, 2019

inspect-js/is-map#3

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

@pocka
Copy link
Contributor

pocka commented Dec 15, 2019

And the error on storybook@3.x is a webpack issue. webpack/webpack#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 shilman added bug cra Prioritize create-react-app compatibility high priority labels Dec 16, 2019
@shilman
Copy link
Member

shilman commented Dec 16, 2019

This appears to be due to storybookjs/presets#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
Copy link

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

@shilman
Copy link
Member

shilman commented Dec 16, 2019

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

@pocka
Copy link
Contributor

pocka commented Dec 16, 2019

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

@shilman
Copy link
Member

shilman commented Dec 16, 2019

@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: storybookjs/presets#78 (comment)

@pocka
Copy link
Contributor

pocka commented Dec 16, 2019

@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
Copy link
Member

shilman commented Dec 16, 2019

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

@shilman shilman closed this as completed Dec 16, 2019
@alonfixler
Copy link

alonfixler commented Dec 16, 2019

@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
Copy link
Member

shilman commented Dec 16, 2019

@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
Copy link

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

@webdevelperify
Copy link

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
Copy link

pdr0 commented Dec 16, 2019

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
Copy link

@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
Copy link

webdevelperify commented Dec 16, 2019

@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
Copy link

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
Copy link
Member

shilman commented Dec 16, 2019

@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
Copy link
Member

shilman commented Dec 16, 2019

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

@eugenefm
Copy link

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

@eric-burel
Copy link
Contributor

eric-burel commented Dec 17, 2019

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 #9154 (comment)
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
Copy link
Contributor

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
Copy link
Member

shilman commented Dec 17, 2019

@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
Copy link

Opened PRs for both faulty packages:
inspect-js/is-map#5
inspect-js/is-set#5

@TFisch
Copy link

TFisch commented Dec 17, 2019

still seeing the error after npm i --save-dev --save-exact airbnb-js-shims@2.2.0 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",

@thuringia
Copy link

thuringia commented Dec 17, 2019

@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

@ljharb
Copy link
Contributor

ljharb commented Dec 17, 2019

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

@TFisch
Copy link

TFisch commented Dec 17, 2019

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

@sahariko
Copy link

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

@ljharb
Copy link
Contributor

ljharb commented Dec 17, 2019

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

@thuringia
Copy link

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

@ljharb
Copy link
Contributor

ljharb commented Dec 17, 2019

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?

@sahariko
Copy link

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

@ljharb
Copy link
Contributor

ljharb commented Dec 17, 2019

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.

@TFisch
Copy link

TFisch commented Dec 17, 2019

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

@eric-burel
Copy link
Contributor

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: webpack/webpack#8656.

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

@eric-burel
Copy link
Contributor

eric-burel commented Dec 17, 2019

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?

@eric-burel
Copy link
Contributor

eric-burel commented Dec 17, 2019

Maybe try npm i --save-dev --save-exact airbnb-js-shims@2.2.0 promise.allsettled@1.0.1

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

@emoriarty
Copy link

emoriarty commented Dec 17, 2019

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 is-set@1.0.0 is-map@1.0.1 es-get-iterator@1.0.1 airbnb-js-shims@2.2.0

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.

@ljharb
Copy link
Contributor

ljharb commented Dec 17, 2019

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.

@ljharb
Copy link
Contributor

ljharb commented Dec 17, 2019

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

@shilman
Copy link
Member

shilman commented Dec 18, 2019

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

@vijayakumartech
Copy link

With Jenkins build throwing the same error.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug cra Prioritize create-react-app compatibility has workaround
Projects
None yet
Development

No branches or pull requests