Storybook: Cannot run storybook after upgrading from 6.0.0-alpha30 to 6.0.0-beta.x

[shincurry]

Describe the bug

I try to upgrade Storybook from 6.0.0-alpha30 to 6.0.0-beta.15.
And I didn't change any other files except package.json and yarn.lock.
it throw some errors.

To Reproduce

Steps to reproduce the behavior:

1. run yarn upgrade-interactive
2. choose storybook related package and upgrade
3. run yarn storybook
4. see error messages

Code snippets

.storybook/main.js

module.exports = {
  stories: ['../stories/**/*.stories.(tsx|mdx)'],
  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-links',
    '@storybook/addon-storysource',
    '@storybook/addon-knobs',
    '@storybook/addon-docs',
    'storybook-addon-performance',
    '@storybook/addon-a11y',
  ],
  webpackFinal: (config) => {

    // ===================
    /**
     * modify storybook default config
     * remove svg default file-loader
     * use both @svgr/webpack and file-loader
     */
    const fileLoaderRule = config.module.rules.find(rule => {
      try {
        if (rule.test.test('.svg')) {
          return true
        }
      } catch (error) {
      }
      return false
    });
    fileLoaderRule.test = /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/
    config.module.rules.push({
      test: /\.svg$/,
      use: [{
        loader: '@svgr/webpack',
        options: {
          svgoConfig: {
            plugins: {
              removeViewBox: false
            }
          },
        },
      }, {
        loader: 'file-loader',
        options: { name: 'icons/assets/[name].[hash:8].[ext]', esModule: false },
      }],
    })
    // ===================

    return config
  }
}

.storybook/manager.js

import { addons } from '@storybook/addons';
import { create } from '@storybook/theming/create';

const uuiPackage = require('../package.json')

const theme = create({
  base: 'light',

  brandTitle: `UUI (v${uuiPackage.version})`,
});

addons.setConfig({
  panelPosition: 'bottom',
  theme,
});

.storybook/preview.js

import { addParameters } from '@storybook/react';
import { addDecorator } from '@storybook/react';
import { withPerformance } from 'storybook-addon-performance';
import { withA11y } from '@storybook/addon-a11y';

import '../stories/style/tailwind.css';
import '../src/styles/index.scss';
import '../stories/style/storybook.scss';

addDecorator(withPerformance);
addDecorator(withA11y);

addParameters({
  options: {
    /**
     * Custom Story Sorting
     * if story parameters contains a property `sortIndex`, sort by it and place on top,
     * else the resting stories will sorted by story kind by alphabetically.
     */
    storySort: (a, b) => {
      const sortIndexA = a[1].parameters['sortIndex']
      const sortIndexB = b[1].parameters['sortIndex']
      if (sortIndexA && !sortIndexB) {
        return false
      } else if (!sortIndexA && sortIndexB) {
        return true
      } else if (sortIndexA && sortIndexB) {
        return sortIndexA > sortIndexB
      } else {
        return a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true })
      }
    },
  },
});

.storybook/tsconfig.json

{
  "rootDirs": ["../src", "../stories"],
  "compilerOptions": {
    "baseUrl": "../src",
    "target": "es5",
    "lib": ["es2015", "dom"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": false,
    "jsx": "react",
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true
  },
  "include": [
    "../src/**/*.ts",
    "../src/**/*.tsx",
    "../stories/**/*.tsx",
    "./typing/*.d.ts"
  ],
  "exclude": [
    "../lib"
  ]
}

.storybook/webpack.config.js

const path = require('path');

module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: [
      {
        loader: require.resolve('ts-loader'),
        options: {
          ignoreDiagnostics: [1005]
        }
      },
      {
        loader: require.resolve('react-docgen-typescript-loader'),
        options: {
          // Provide the path to your tsconfig.json so that your stories can
          // display types from outside each individual story.
          tsconfigPath: path.resolve(__dirname, "./tsconfig.json"),
        },
      },
    ],
  });
  config.module.rules.push({
    test: /\.css$/,
    use: [
      {
        loader: 'postcss-loader',
        options: {
          config: {
            path: path.resolve(__dirname, 'postcss.config.js'),
          }
        }
      }
    ],
  })
  config.module.rules.push({
    test: /\.s[ac]ss$/i,
    use: [
      'style-loader',
      'css-loader',
      {
        loader: 'sass-loader',
        options: {
          // Prefer `dart-sass`
          implementation: require('sass'),
          sassOptions: {
            fiber: require('fibers'),
          },
        }
      },
    ],
  })
  config.module.rules.push({
    test: /\.less$/,
    use: [
      {
        loader: 'style-loader',
      },
      {
        loader: 'css-loader',
      },
      {
        loader: 'less-loader',
        options: {
          javascriptEnabled: true,
        },
      },
    ],
  })
  config.resolve.extensions.push('.ts', '.tsx');
  return config;
};

repo: https://github.com/HackPlan/UUI/tree/a4b8762a9837e926a5e0ca256a09dc6e5b04bab0

storybook config in .storybook directory

Additional context

ERROR in ./node_modules/@storybook/ui/node_modules/semver/classes/semver.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/kyon/dev/uui/node_modules/@storybook/ui/node_modules/semver/classes/semver.js: 'loose' mode configuration must be the same for both @babel/plugin-proposal-class-properties and @babel/plugin-proposal-private-methods
  4 |
  5 | const { compareIdentifiers } = require('../internal/identifiers')
> 6 | class SemVer {
    | ^
  7 |   constructor (version, options) {
  8 |     if (!options || typeof options !== 'object') {
  9 |       options = {
    at File.buildCodeFrameError (/Users/kyon/dev/uui/node_modules/@babel/core/lib/transformation/file/file.js:248:12)
    at NodePath.buildCodeFrameError (/Users/kyon/dev/uui/node_modules/@babel/traverse/lib/path/index.js:144:21)
    at verifyUsedFeatures (/Users/kyon/dev/uui/node_modules/@babel/helper-create-class-features-plugin/lib/features.js:55:16)
    at PluginPass.Class (/Users/kyon/dev/uui/node_modules/@babel/helper-create-class-features-plugin/lib/index.js:61:42)
    at newFn (/Users/kyon/dev/uui/node_modules/@babel/traverse/lib/visitors.js:179:21)
    at NodePath._call (/Users/kyon/dev/uui/node_modules/@babel/traverse/lib/path/context.js:55:20)
    at NodePath.call (/Users/kyon/dev/uui/node_modules/@babel/traverse/lib/path/context.js:42:17)
    at NodePath.visit (/Users/kyon/dev/uui/node_modules/@babel/traverse/lib/path/context.js:90:31)
    at TraversalContext.visitQueue (/Users/kyon/dev/uui/node_modules/@babel/traverse/lib/context.js:112:16)
    at TraversalContext.visitMultiple (/Users/kyon/dev/uui/node_modules/@babel/traverse/lib/context.js:79:17)
    at TraversalContext.visit (/Users/kyon/dev/uui/node_modules/@babel/traverse/lib/context.js:138:19)
    at Function.traverse.node (/Users/kyon/dev/uui/node_modules/@babel/traverse/lib/index.js:84:17)
    at NodePath.visit (/Users/kyon/dev/uui/node_modules/@babel/traverse/lib/path/context.js:97:18)
    at TraversalContext.visitQueue (/Users/kyon/dev/uui/node_modules/@babel/traverse/lib/context.js:112:16)
    at TraversalContext.visitSingle (/Users/kyon/dev/uui/node_modules/@babel/traverse/lib/context.js:84:19)
    at TraversalContext.visit (/Users/kyon/dev/uui/node_modules/@babel/traverse/lib/context.js:140:19)
 @ ./node_modules/@storybook/ui/node_modules/semver/index.js 9:10-37
 @ ./node_modules/@storybook/ui/dist/settings/about.js
 @ ./node_modules/@storybook/ui/dist/settings/about_page.js
 @ ./node_modules/@storybook/ui/dist/settings/index.js
 @ ./node_modules/@storybook/ui/dist/app.js
 @ ./node_modules/@storybook/ui/dist/index.js
 @ ./node_modules/@storybook/core/dist/client/manager/index.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./.storybook/manager.js ./node_modules/@storybook/core/dist/client/manager/index.js ./node_modules/@storybook/addon-actions/dist/register.js ./node_modules/@storybook/addon-links/dist/register.js ./node_modules/@storybook/addon-storysource/register.js ./node_modules/@storybook/addon-knobs/dist/register.js ./node_modules/@storybook/addon-docs/dist/register.js ./node_modules/storybook-addon-performance/register.js ./node_modules/@storybook/addon-a11y/register.js
Child HtmlWebpackCompiler:
                          Asset      Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  6.46 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/@storybook/core/node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core/dist/server/templates/index.ejs] 2.11 KiB {HtmlWebpackPlugin_0} [built]
WARN force closed preview build

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

94% after seal

[tooppaaa]

Maybe related to https://github.com/storybookjs/storybook/pull/10783
Looking at it now

[ahem]

I am seeing the same error. I think the problem is what it says on the box: @babel/plugin-proposal-private-methods must be set to loose mode.

I can at least fix it with stupid stuff like this config:

module.exports = {
  stories: ['../stories/**/*.stories.js'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
  webpackFinal: async (config) => {
    // do mutation to the config

      config.module.rules.filter(x => {
          return Array.isArray(x.use) && x.use[0].loader && x.use[0].loader.includes('babel-loader');
      }).forEach(babelLoaderSettings => {
        babelLoaderSettings.use[0].options.plugins.push([
            require.resolve('@babel/plugin-proposal-private-methods'),
            { loose: true }
        ]);
      });

    return config;
  },
};

With that it just runs.

[memark]

I get the same error in my CRA app (without much custom code in _.storybook_ at all).

[anark]

I started getting this error after upgrading from 6.0.0-beta.13 to 6.0.0-beta15

[shilman]

Ta-da!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-beta.16 containing PR #10941 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[anark]

That fixed it for me! Thanks for the quick fix!

[memark]

Works great, thanks!

[tannerbaum]

@shilman I am experiencing the same thing following the guide here with version 6.0.0-beta.31. Only difference is I am adding it to an existing React project (but one previously without storybook at all).

This screenshot is from me trying it on beta.30 as well.

[tooppaaa]

@tannerbaum What version of docs has been installed ?

We're seing that the version is not the one from next which can explain your issue.

If version is different, could you upgrade to @next ?

[tannerbaum]

@tooppaaa So I will admit that I hadn't installed the docs separately as mentioned in step 3, that is my bad 😅 I thought it would in theory run without that add-on. So I did what the guide said and ran yarn add @storybook/addon-docs@next @storybook/addon-controls@next --dev. Resulted in what appears to be the same error.

info @storybook/react v6.0.0-beta.31
info 
info => Loading static files from: /Users/tanner/Documents/br24/br24-cms/public .
info => Loading presets
info => Loading presets
info => Loading config/preview file in "./.storybook".
info => Adding stories defined in ".storybook/main.js".
info => Loading Webpack configuration from `node_modules/react-scripts`
info => Removing existing JavaScript and TypeScript rules.
info => Modifying Create React App rules.
info => Using default Webpack setup.
60% building 423/434 modules 11 active /Users/tanner/Documents/br24/br24-cms/node_modules/@storybook/addon-actions/node_modules/uuid/dist/esm-browser/v5.js✖ ｢wdm｣: Hash: 5e48c08ace1f71709d76
Version: webpack 4.43.0
Time: 12347ms
Built at: 06/19/2020 1:37:43 PM
                                      Asset      Size        Chunks                                Chunk Names
                                 index.html  2.41 KiB                [emitted]                     
        main.a156ff350f98f24231f8.bundle.js  75.6 KiB          main  [emitted] [immutable]         main
runtime~main.99691078705b39185f99.bundle.js  6.12 KiB  runtime~main  [emitted] [immutable]         runtime~main
vendors~main.cf48e29027cd471c91dd.bundle.js  1.97 MiB  vendors~main  [emitted] [immutable]  [big]  vendors~main
Entrypoint main [big] = runtime~main.99691078705b39185f99.bundle.js vendors~main.cf48e29027cd471c91dd.bundle.js main.a156ff350f98f24231f8.bundle.js
[0] multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/client/manager/index.js ./node_modules/@storybook/addon-links/dist/register.js ./node_modules/@storybook/addon-docs/dist/register.js ./node_modules/@storybook/addon-controls/dist/register.js ./node_modules/@storybook/addon-actions/dist/register.js ./.storybook/generated-refs.js 100 bytes {main} [built]
[./.storybook/generated-refs.js] 2.03 KiB {main} [built] [failed] [1 error]
[./node_modules/@storybook/addon-actions/dist/constants.js] 541 bytes {vendors~main} [built]
[./node_modules/@storybook/addon-actions/dist/containers/ActionLogger/index.js] 8.63 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-actions/dist/register.js] 804 bytes {vendors~main} [built]
[./node_modules/@storybook/addon-controls/dist/components/ControlsPanel.js] 4.29 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-controls/dist/constants.js] 247 bytes {vendors~main} [built]
[./node_modules/@storybook/addon-controls/dist/register.js] 2.34 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-controls/dist/title.js] 573 bytes {vendors~main} [built]
[./node_modules/@storybook/addon-docs/dist/register.js] 1.99 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-docs/dist/shared.js] 337 bytes {vendors~main} [built]
[./node_modules/@storybook/addon-links/dist/constants.js] 450 bytes {vendors~main} [built]
[./node_modules/@storybook/addon-links/dist/register.js] 1.92 KiB {vendors~main} [built]
[./node_modules/@storybook/core/dist/client/manager/index.js] 521 bytes {vendors~main} [built]
[./node_modules/@storybook/core/dist/server/common/polyfills.js] 120 bytes {vendors~main} [built]
    + 412 hidden modules

ERROR in ./.storybook/generated-refs.js
Module build failed (from ./node_modules/@storybook/core/node_modules/babel-loader/lib/index.js):
Error: /Users/tanner/Documents/br24/br24-cms/.storybook/generated-refs.js: 'loose' mode configuration 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).
    at enableFeature (/Users/tanner/Documents/br24/br24-cms/node_modules/@babel/helper-create-class-features-plugin/lib/features.js:50:13)
    at PluginPass.pre (/Users/tanner/Documents/br24/br24-cms/node_modules/@babel/helper-create-class-features-plugin/lib/index.js:51:35)
    at transformFile (/Users/tanner/Documents/br24/br24-cms/node_modules/@storybook/core/node_modules/babel-loader/node_modules/@babel/core/lib/transformation/index.js:96:27)
    at transformFile.next (<anonymous>)
    at run (/Users/tanner/Documents/br24/br24-cms/node_modules/@storybook/core/node_modules/babel-loader/node_modules/@babel/core/lib/transformation/index.js:35:12)
    at run.next (<anonymous>)
    at Function.transform (/Users/tanner/Documents/br24/br24-cms/node_modules/@storybook/core/node_modules/babel-loader/node_modules/@babel/core/lib/transform.js:27:41)
    at transform.next (<anonymous>)
    at step (/Users/tanner/Documents/br24/br24-cms/node_modules/gensync/index.js:254:32)
    at /Users/tanner/Documents/br24/br24-cms/node_modules/gensync/index.js:266:13
    at async.call.result.err.err (/Users/tanner/Documents/br24/br24-cms/node_modules/gensync/index.js:216:11)
    at /Users/tanner/Documents/br24/br24-cms/node_modules/gensync/index.js:184:28
    at /Users/tanner/Documents/br24/br24-cms/node_modules/@storybook/core/node_modules/babel-loader/node_modules/@babel/core/lib/gensync-utils/async.js:72:7
    at /Users/tanner/Documents/br24/br24-cms/node_modules/gensync/index.js:108:33
    at step (/Users/tanner/Documents/br24/br24-cms/node_modules/gensync/index.js:280:14)
    at /Users/tanner/Documents/br24/br24-cms/node_modules/gensync/index.js:266:13
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/client/manager/index.js ./node_modules/@storybook/addon-links/dist/register.js ./node_modules/@storybook/addon-docs/dist/register.js ./node_modules/@storybook/addon-controls/dist/register.js ./node_modules/@storybook/addon-actions/dist/register.js ./.storybook/generated-refs.js main[6]
Child HtmlWebpackCompiler:
                          Asset      Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  6.47 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/@storybook/core/node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core/dist/server/templates/index.ejs] 2.13 KiB {HtmlWebpackPlugin_0} [built]
WARN force closed preview build

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

94% after seal

Could provide all the dependencies if helpful but the storybook ones are here:

    "@storybook/addon-actions": "^6.0.0-beta.31",
    "@storybook/addon-controls": "6.0.0-beta.31",
    "@storybook/addon-docs": "6.0.0-beta.31",
    "@storybook/addon-links": "^6.0.0-beta.31",
    "@storybook/preset-create-react-app": "^3.1.2",
    "@storybook/react": "^6.0.0-beta.31",

For what it is worth the current version of Storybook does work in this project using the init cli command.

[passionkind]

We fixed the error by simply turning '@babel/plugin-proposal-class-properties' into ['@babel/plugin-proposal-class-properties', { loose: true }] in our custom .babelrc.js as done in https://github.com/storybookjs/storybook/pull/10941

[shilman]

Does somebody with this problem have a public repro repo they can share?

[PascalPixel]

@shilman I can share one with just you 👍

[KevinGhadyani-minted]

I upgraded from beta.28 to rc.27 and now I have this error as well. Sadly, I haven't been able to fix it with the loose: true. It solved the Storybook errors, but Babel now breaks on code in my library with the same error message.

[tooppaaa]

@KevinGhadyani-minted any chance your repo is public to investigate a bit more ?

[KevinGhadyani-minted]

Sadly no :/.

The best I can do is show this error:

ERROR in ./src/styles/colors.js
Module build failed (from ./node_modules/@storybook/core/node_modules/babel-loader/lib/index.js):
Error: D:\Projects\Companies\Minted\minted-components\src\styles\colors.js: 'loose' mode configuration 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).
    at enableFeature (D:\Projects\Companies\Minted\minted-components\node_modules\@babel\helper-create-class-features-plugin\lib\features.js:50:13)
    at PluginPass.pre (D:\Projects\Companies\Minted\minted-components\node_modules\@babel\helper-create-class-features-plugin\lib\index.js:53:35)
    at transformFile (D:\Projects\Companies\Minted\minted-components\node_modules\@babel\core\lib\transformation\index.js:96:27)
    at transformFile.next (<anonymous>)
    at run (D:\Projects\Companies\Minted\minted-components\node_modules\@babel\core\lib\transformation\index.js:35:12)
    at run.next (<anonymous>)
    at Function.transform (D:\Projects\Companies\Minted\minted-components\node_modules\@babel\core\lib\transform.js:27:41)
    at transform.next (<anonymous>)
    at step (D:\Projects\Companies\Minted\minted-components\node_modules\gensync\index.js:254:32)
    at gen.next (D:\Projects\Companies\Minted\minted-components\node_modules\gensync\index.js:266:13)
    at async.call.value (D:\Projects\Companies\Minted\minted-components\node_modules\gensync\index.js:216:11)
 @ ./src/styleguide/mintedTheme.js 11:0-38 15:16-22 16:18-24 18:9-15 19:16-22 20:18-24 26:13-19 27:35-41 29:16-22 30:20-26 31:9-15 33:11-17 34:15-21 35:18-24
 @ ./src/styleguide/manager.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./src/styleguide/manager.js ./node_modules/@storybook/core/dist/client/manager/index.js ./src/styleguide/generated-refs.js

Here's the .babelrc:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "loose": true, // Need this for Storybook v6 beta.
        "modules": false
      }
    ],
    "@babel/preset-react",
    [
      "@emotion/babel-preset-css-prop",
      {
        "sourceMap": true,
        "autoLabel": true
      }
    ]
  ],
  "plugins": [
    "react-docgen",
    "react-hot-loader/babel",
    [
      "@babel/plugin-proposal-class-properties",
      {
        loose: true, // Need this for Storybook v6 beta.
      }
    ],
    "@babel/plugin-proposal-object-rest-spread",
  ]
}

[davidcsally]

For what it’s worth, I encountered this and fixed it by removing all Babel packages, installing, then adding them back and installing.

[tooppaaa]

@shincurry @KevinGhadyani-minted @PascalPixel is the last answer helping you ?

Is that still an issue for you on the latest 6.x ?

[tangentlin]

I have this issue when running build-storybook

[KevinGhadyani-minted]

@shincurry @KevinGhadyani-minted @PascalPixel is the last answer helping you ?

Is that still an issue for you on the latest 6.x ?

Which v6 version? Something released as of the last few weeks?

[morinted]

I couldn't work around this error without setting the plugins to "loose", which I ideally didn't want to do. For now, my workaround was to take my config file and modify it, just for storybook.

I have .babelrc.js and .storybook/.babelrc.js

.storybook/.babelrc.js is the following:

const projectConfig = require('../.babelrc.js')

/**
 * Take the project config, but set loose to true for class properties and private methods for Storybook.
 *
 * As Storybook updates, it's probably worth trying to delete this file and seeing if it will run without
 * the workaround.
 */
projectConfig.plugins = projectConfig.plugins.map((plugin) => {
  if (
    [
      '@babel/plugin-proposal-class-properties',
      '@babel/plugin-proposal-private-methods',
    ].includes(plugin)
  ) {
    return [plugin, { loose: true }]
  }
  return plugin
})

module.exports = projectConfig

[drewjs]

Just fixed this in a project running [email protected] by making sure babel and presets+plugins are up-to-date, delete node_modules and lockfile (in my case yarn.lock), and reinstall.

[KevinGhadyani-minted]

@drewjs Removing yarn.lock doesn't necessarily fix anything, but it _could_ force-upgrade all your packages. This is because it has to reference package.json and downloads the latest versions of packages using the values contained in there.

Sometimes, your yarn.lock can become out of sync with package.json by running yarn upgrade or by merging GitHub dependabot security PRs.

In general, removing yarn.lock is not considered a best-practice as it could introduce runtime bugs without your knowledge.

[drewjs]

@KevinGhadyani-minted I agree not an ideal solution and it does come at a risk, but occasionally I've had lock files go out of sync and causes issues. Just sharing for others to try as a potential fix, but it’s good idea to draw attention to other issues it could create if not careful.