0

I'm using babel 7.

In their docs they mention the new naming for plugin is with @babel/ prefix.

React-hot-loader babrlrc config recommendation is:

{
  "plugins": ["react-hot-loader/babel"]
}

my .babelrc config is:

{
  "presets": ["@babel/env", "@babel/react"],
  "env": {
    "development": {
      "plugins": ["@babel/react-hot-loader"]
    },
    "production": {}
  }
}

Is it correct to assume that @babel/react-hot-loader is correct definision?

I could not find any more docs about it.

yotke
  • 1,170
  • 2
  • 12
  • 26

3 Answers3

2

Saying @babel/react-hot-loader will have babel look within itself for a plugin called react-hot-loader. From what I can tell the package/plugin you're trying to use is not maintained/owned by babel itself. Therefore @babel/react-hot-loader will not work. You should configure your .babelrc as per the documentation of the plugin you're trying to use.

I think this is the plugin you're referring to in your question: react-hot-loader

Follow these setup instructions: react-hot-loader/getting-started

sxkx
  • 512
  • 5
  • 13
  • I see now. @babel is for Babel related plugin only. Thanks – yotke Aug 07 '18 at 18:08
  • 1
    @shmotam The **@** in the package name is used for namespacing. See this question on scoped packages: [Stack Overflow: @ prefix question](https://stackoverflow.com/questions/36667258/what-is-the-meaning-of-the-at-prefix-on-npm-packages). This is also documented in the NPM docs: [NPM docs: Scoped packages](https://docs.npmjs.com/misc/scope) – sxkx Aug 08 '18 at 13:25
1

you have to still use it as mentioned in react hot reloader docs. below is the link

https://github.com/gaearon/react-hot-loader#user-content-add-babel-before-typescript

Mohit Tilwani
  • 2,716
  • 1
  • 13
  • 13
1

I don't think so, react-hot-loader does not update there docs for prefix definition and I also found there given example https://github.com/gaearon/react-hot-loader/blob/master/examples/typescript/.babelrc

Using babel 7 prefix for other plugins but for react-hot-loader still the same

{ "plugins": [ "@babel/plugin-syntax-typescript", "@babel/plugin-syntax-decorators", "@babel/plugin-syntax-jsx", "react-hot-loader/babel" ] }

Owais Ahmed Qureshi
  • 94
  • 1
  • 4