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.

Sign up for GitHub

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

Jump to bottom

Basic CRA preset does not work on clean project #78

Closed
colingm opened this issue Dec 15, 2019 · 9 comments
Closed

Basic CRA preset does not work on clean project #78

colingm opened this issue Dec 15, 2019 · 9 comments
Labels
bug Something isn't working create-react-app

Comments

@colingm
Copy link

colingm commented Dec 15, 2019

Hey I have tried setting up a new CRA project using CRA 3.3.0 and adding storybook (cli version 5.2.8) with the CRA preset and it immediately errors out. Below I am including the steps I took, the error message received, and a link to the git repo to reproduce the issue. Any help with what to do in this case would be great.

https://github.com/colingm/storybook-cra-error

npm i -g create-react-app@3.3.0 storybook@5.2.8
create-react-app sanity --template typescript
cd sanity
sb init
npm i @storybook/preset-create-react-app
echo "module.exports = ['@storybook/preset-create-react-app'];" > .storybook/presets.js
npm run storybook

ERROR in ./node_modules/is-map/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/cmaxfield/workspace/audit/sanity/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;
    at Parser.raise (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:6983:17)
    at Parser.parseReturnStatement (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:11027:12)
    at Parser.parseStatementContent (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:10714:21)
    at Parser.parseStatement (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:10666:17)
    at Parser.parseBlockOrModuleBlockBody (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:11242:25)
    at Parser.parseBlockBody (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:11229:10)
    at Parser.parseBlock (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:11213:10)
    at Parser.parseStatementContent (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:10742:21)
    at Parser.parseStatement (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:10666:17)
    at Parser.parseIfStatement (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:11020:28)
    at Parser.parseStatementContent (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:10711:21)
    at Parser.parseStatement (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:10666:17)
    at Parser.parseBlockOrModuleBlockBody (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:11242:25)
    at Parser.parseBlockBody (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:11229:10)
    at Parser.parseTopLevel (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:10597:10)
    at Parser.parse (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:12107:10)
 @ ./node_modules/es-get-iterator/index.js 131:16-33
 @ ./node_modules/iterate-value/index.js
 @ ./node_modules/promise.allsettled/implementation.js
 @ ./node_modules/promise.allsettled/polyfill.js
 @ ./node_modules/promise.allsettled/shim.js
 @ ./node_modules/promise.allsettled/auto.js
 @ ./node_modules/airbnb-js-shims/target/es2020.js
 @ ./node_modules/airbnb-js-shims/target/es2019.js
 @ ./node_modules/airbnb-js-shims/target/es2018.js
 @ ./node_modules/airbnb-js-shims/target/es2017.js
 @ ./node_modules/airbnb-js-shims/target/es2016.js
 @ ./node_modules/airbnb-js-shims/target/es2015.js
 @ ./node_modules/airbnb-js-shims/target/es5.js
 @ ./node_modules/airbnb-js-shims/index.js
 @ ./node_modules/@storybook/core/dist/server/common/polyfills.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.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: /Users/cmaxfield/workspace/audit/sanity/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;
    at Parser.raise (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:6983:17)
    at Parser.parseReturnStatement (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:11027:12)
    at Parser.parseStatementContent (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:10714:21)
    at Parser.parseStatement (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:10666:17)
    at Parser.parseBlockOrModuleBlockBody (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:11242:25)
    at Parser.parseBlockBody (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:11229:10)
    at Parser.parseBlock (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:11213:10)
    at Parser.parseStatementContent (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:10742:21)
    at Parser.parseStatement (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:10666:17)
    at Parser.parseIfStatement (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:11020:28)
    at Parser.parseStatementContent (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:10711:21)
    at Parser.parseStatement (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:10666:17)
    at Parser.parseBlockOrModuleBlockBody (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:11242:25)
    at Parser.parseBlockBody (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:11229:10)
    at Parser.parseTopLevel (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:10597:10)
    at Parser.parse (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:12107:10)
 @ ./node_modules/es-get-iterator/index.js 133:16-33
 @ ./node_modules/iterate-value/index.js
 @ ./node_modules/promise.allsettled/implementation.js
 @ ./node_modules/promise.allsettled/polyfill.js
 @ ./node_modules/promise.allsettled/shim.js
 @ ./node_modules/promise.allsettled/auto.js
 @ ./node_modules/airbnb-js-shims/target/es2020.js
 @ ./node_modules/airbnb-js-shims/target/es2019.js
 @ ./node_modules/airbnb-js-shims/target/es2018.js
 @ ./node_modules/airbnb-js-shims/target/es2017.js
 @ ./node_modules/airbnb-js-shims/target/es2016.js
 @ ./node_modules/airbnb-js-shims/target/es2015.js
 @ ./node_modules/airbnb-js-shims/target/es5.js
 @ ./node_modules/airbnb-js-shims/index.js
 @ ./node_modules/@storybook/core/dist/server/common/polyfills.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true&quiet=true
@shilman shilman added bug Something isn't working create-react-app labels Dec 16, 2019
@shilman
Copy link
Member

shilman commented Dec 16, 2019 •
edited
Loading

What I did:

cra sb result
3.3.0 sb@5.2.8 O
3.3.0 sb@5.2.8 + preset-cra@1.4 X
3.3.0 sb@5.3.0-beta.25 (auto-installs preset-cra) X
3.3.0 sb@5.3.0-beta.25 - preset-cra@1.4 O
3.3.0 sb@5.3.0-beta.25 + preset-cra@1.0-1.3 X

In other words, the problem appears to be an incompatibility between @storybook/preset-create-react-app and something else in the ecosystem (latest version of CRA? some change in inspect-js (see also: inspect-js/is-map#3)?

Other comments suggest that babel-loader is being applied to node_modules (see inspect-js/is-map#3 (comment))

This was referenced Dec 16, 2019
Closed
Closed
@pocka
Copy link

pocka commented Dec 16, 2019

It seems that this rule tries to transpile is-map and fails?

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/webpack.config.js#L455

@mrmckeb
Copy link
Member

mrmckeb commented Dec 16, 2019

I've found the issue here and will push it shortly.

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

colingm commented Dec 16, 2019

Upgrading takes care of it, thank you so much for the quick turn around everyone!

@n8sabes
Copy link

n8sabes commented Dec 17, 2019

@mrmckeb and @shilman -- What was the cause and solution of this issue? I am running into the same problem with another (more mature) CRA project. Downgrading deep-equal to 1.1.1 works around the problem but unsure of the true origin or "correct" fix. Any insight is appreciated.

Please see:
deep-equal issue #78

@ljharb
Copy link

ljharb commented Dec 17, 2019

Top-level return is perfectly valid inside node modules; transpiling code you didn't author is unsafe; if you're going to transpile node_modules, then you should be sure to use settings that work on valid node modules :-)

@mrmckeb
Copy link
Member

mrmckeb commented Dec 17, 2019 •
edited
Loading

@n8sabes, this was caused by the CRA preset applying the wrong loader to files imported by Storybook.

The correction is here:
https://github.com/storybookjs/presets/pull/77/files#diff-80b3f28ef184f3c7a4ac83b1974c3dc6R147

@mrmckeb
Copy link
Member

mrmckeb commented Dec 17, 2019 •
edited
Loading

@ljharb you're right - but this was never meant to be transpiled. The loader was simply omitted from the original preset, the new preset was forked from that, and the bug was carried over.

This is the related code:
https://github.com/SeedJobs/react-scripts/blob/master/packages/react-scripts/config/webpack.config.js#L489

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working create-react-app
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@ljharb @shilman @mrmckeb @n8sabes @colingm @pocka