Running yarn dev after a fresh clone & install fails due to duplicate babel plugin/preset

[jo-flynn]

Hi! I just started your course and ran into an issue getting up and running. Upon running yarn dev, I see this error:

➜ yarn dev
yarn run v1.22.5
$ node ./server/index.js
⠋ Building...Serving on http://localhost:3000
🚨  /Users/josie.flynn/dev/professional-ts/src/index.js: Duplicate plugin/preset detected.
If you'd like to use two separate instances of a plugin,
they need separate names, e.g.

  plugins: [
    ['some-plugin', {}],
    ['some-plugin', {}, 'some unique name'],
  ]

Duplicates detected are:
[
  {
    "alias": "/Users/josie.flynn/dev/professional-ts/node_modules/@babel/plugin-proposal-class-properties/lib/index.js",
    "dirname": "/Users/josie.flynn/dev/professional-ts",
    "ownPass": false,
    "file": {
      "request": "@babel/plugin-proposal-class-properties",
      "resolved": "/Users/josie.flynn/dev/professional-ts/node_modules/@babel/plugin-proposal-class-properties/lib/index.js"
    }
  },
  {
    "alias": "base$1",
    "options": {
      "loose": "#__internal__@babel/preset-env__prefer-false-but-true-is-ok-if-it-prevents-an-error"
    },
    "dirname": "/Users/josie.flynn/dev/professional-ts",
    "ownPass": false

I think this is happening because @babel/preset-env now includes the @babel/plugin-proposal-class-properties proposal as of their 7.10.0 release: https://babeljs.io/blog/2020/05/25/7.10.0#class-properties-and-private-methods-to-shippedproposals-option-of-babelpreset-env-11451httpsgithubcombabelbabelpull11451

Commenting out "plugins": ["@babel/plugin-proposal-class-properties"] from .babelrc seems to resolve the issue for me.

Thanks for putting your course together, it's been great so far! Just wanted to submit this in case it helps other folks who got stuck on it too.

[carlorizzante]

Thanks for the suggestion, it did not work for me though. Is there anything else I could try to get the repo working?

[ScottTear-Which]

Hi! I just started your course and ran into an issue getting up and running. Upon running yarn dev, I see this error:

➜ yarn dev
yarn run v1.22.5
$ node ./server/index.js
⠋ Building...Serving on http://localhost:3000
🚨  /Users/josie.flynn/dev/professional-ts/src/index.js: Duplicate plugin/preset detected.
If you'd like to use two separate instances of a plugin,
they need separate names, e.g.

  plugins: [
    ['some-plugin', {}],
    ['some-plugin', {}, 'some unique name'],
  ]

Duplicates detected are:
[
  {
    "alias": "/Users/josie.flynn/dev/professional-ts/node_modules/@babel/plugin-proposal-class-properties/lib/index.js",
    "dirname": "/Users/josie.flynn/dev/professional-ts",
    "ownPass": false,
    "file": {
      "request": "@babel/plugin-proposal-class-properties",
      "resolved": "/Users/josie.flynn/dev/professional-ts/node_modules/@babel/plugin-proposal-class-properties/lib/index.js"
    }
  },
  {
    "alias": "base$1",
    "options": {
      "loose": "#__internal__@babel/preset-env__prefer-false-but-true-is-ok-if-it-prevents-an-error"
    },
    "dirname": "/Users/josie.flynn/dev/professional-ts",
    "ownPass": false

I think this is happening because @babel/preset-env now includes the @babel/plugin-proposal-class-properties proposal as of their 7.10.0 release: https://babeljs.io/blog/2020/05/25/7.10.0#class-properties-and-private-methods-to-shippedproposals-option-of-babelpreset-env-11451httpsgithubcombabelbabelpull11451

Commenting out "plugins": ["@babel/plugin-proposal-class-properties"] from .babelrc seems to resolve the issue for me.

Thanks for putting your course together, it's been great so far! Just wanted to submit this in case it helps other folks who got stuck on it too.

This worked for me 👍 Thanks for the heads up

[floroz]

Hi! I just started your course and ran into an issue getting up and running. Upon running yarn dev, I see this error:

➜ yarn dev
yarn run v1.22.5
$ node ./server/index.js
⠋ Building...Serving on http://localhost:3000
🚨  /Users/josie.flynn/dev/professional-ts/src/index.js: Duplicate plugin/preset detected.
If you'd like to use two separate instances of a plugin,
they need separate names, e.g.

  plugins: [
    ['some-plugin', {}],
    ['some-plugin', {}, 'some unique name'],
  ]

Duplicates detected are:
[
  {
    "alias": "/Users/josie.flynn/dev/professional-ts/node_modules/@babel/plugin-proposal-class-properties/lib/index.js",
    "dirname": "/Users/josie.flynn/dev/professional-ts",
    "ownPass": false,
    "file": {
      "request": "@babel/plugin-proposal-class-properties",
      "resolved": "/Users/josie.flynn/dev/professional-ts/node_modules/@babel/plugin-proposal-class-properties/lib/index.js"
    }
  },
  {
    "alias": "base$1",
    "options": {
      "loose": "#__internal__@babel/preset-env__prefer-false-but-true-is-ok-if-it-prevents-an-error"
    },
    "dirname": "/Users/josie.flynn/dev/professional-ts",
    "ownPass": false

I think this is happening because @babel/preset-env now includes the @babel/plugin-proposal-class-properties proposal as of their 7.10.0 release: https://babeljs.io/blog/2020/05/25/7.10.0#class-properties-and-private-methods-to-shippedproposals-option-of-babelpreset-env-11451httpsgithubcombabelbabelpull11451

Commenting out "plugins": ["@babel/plugin-proposal-class-properties"] from .babelrc seems to resolve the issue for me.

Thanks for putting your course together, it's been great so far! Just wanted to submit this in case it helps other folks who got stuck on it too.

This worked for me too! thanks

// .babelrc.js
{
  "presets": [
    ["@babel/preset-env", { "targets": { "node": "10" } }],
    "@babel/preset-react",
    "@babel/preset-typescript"
  ]
  // "plugins": ["@babel/plugin-proposal-class-properties"]
}

[maximimby]

Thank you!

[tarandeep-simform]

thanks it worked for me too

[satyambnsal]

Thank you ❤️

[youssef-tharwat]

Wasted so much time on this. @mike-north consider fixing this because it really ruins the learning experience

[johnhunter]

Thanks for the info everyone. What I needed to do was:

1. Remove the @babel/plugin-proposal-class-properties plugin from .babelrc (as per @floroz answer).
2. yarn remove @babel/plugin-proposal-class-properties to avoid duplicate config warnings.
3. Update the browserlist db npx browserslist@latest --update-db to silence warnings.

Once those were done the application started up as expected.