question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Fix Babel issue when running Storybook.

See original GitHub issue

Bug Description

A number of engineers have been seeing the following output from Babel in the terminal when attempting to run npm run storybook or processes that invoke this under the hood (e.g. npm run test:visualtest):

The “loose” option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding [“@babel/plugin-proposal-private-property-in-object”, { “loose”: true }] to the “plugins” section of your Babel config. Though the “loose” option was set to “false” in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the “loose” mode option was set to “true” for @babel/plugin-proposal-private-methods.

We should investigate the causes and determine an appropriate fix. It could be that be changing our Babel plugins as suggested in the warning fixes the issue, or perhaps we need to address some sort of dependency version mismatch.

Steps to reproduce

  1. Using the latest develop branch, run npm run storybook, and see the output in the terminal.
  2. Removing node_modules and re-running npm install did not fix the issue. If you are not seeing the issue, you could try doing this.

Additional Context

  • OS: Mac OS Big Sur 11.2
  • Node version: v14.15.4 (using NVM)

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

  • No babel warnings should be output when building Storybook

Implementation Brief

Test Coverage

  • N/A

Visual Regression Changes

  • No changes expected

QA Brief

  • Running the Storybook build should not generate the aforementioned Babel warnings
  • Storybook should work as before

Changelog entry

  • N/A

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
johnPhillipscommented, Jul 26, 2021

@wpdarren I think this is likely to be QA:eng, but will let Evan or Matt make the call 👍

1reaction
danielgentcommented, Jul 28, 2021

QA ✅

I no longer see all the babels warnings when running storybook 👍

Read more comments on GitHub >

github_iconTop Results From Across the Web

Yarn Build - Babel-loader issues with Storybook - Stack Overflow
To fix the dependency tree, try following the steps below in the exact order: 1. Delete package-lock.json (not package.json!) and/or yarn.lock ...
Read more >
babel-loader conflicts with create-react-app version #5183
There is a conflict with babel-loader version. Changing the line in package.json to "babel-loader": "8.0.4" seems to fix it. To Reproduce
Read more >
Babel - Storybook
Due to what appears to be a Babel bug, setting this flag causes Babel transpilation to fail on the file provided. Thus you...
Read more >
babel-loader conflicts with create-react-app version #5183
3. Remove "babel-loader" from dependencies and/or devDependencies in the package.json file in your project folder. 4. Run npm install or yarn ...
Read more >
Yarn Build - Babel-loader issues with Storybook-Reactjs
It is a known issue. ... For anyone facing the same issue with npm . I fixed it by deleting package-lock.json , node_modules...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found