Running yarn dev after a fresh clone & install fails due to duplicate babel plugin/preset about professional-ts HOT 8 OPEN

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"]
}

from professional-ts.

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

from professional-ts.

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

from professional-ts.

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

from professional-ts.

Thank you!

from professional-ts.

thanks it worked for me too

from professional-ts.

Thank you ❤️

from professional-ts.

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.

from professional-ts.