Are the aliases being transpiled?

[jordymeow]

Hi guys,

I am not sure this module should still be used: until now, I have been using the aliases in WebPack, and that module might just simply do exactly the same thing and nothing more (but from the Babel's perspective).

In advance, please excuse my ignorance, I am a bit lost between Webpack and Babel and how they actually really interact with each other. Couldn't find a good book covering all those subjects in once neither...

My problem is that, by using aliases with WebPack, the code is not transpiled. I tried this plugin hoping I would be able to create aliases which are transpiled, but in fact, they aren't. My .babelrc looks like this:

{
  "presets": [ 
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-transform-react-jsx", 
    "@babel/plugin-transform-runtime",
    "@babel/plugin-proposal-class-properties",
    ["module-resolver", {
      "root": ["./src"],
      "alias": {
        "@common": "../common"
      }
    }]
  ]
}

As you can see, I have a /common directory outside the project. It contains simple React/JSX components which need to be transpiled.

The exact error is I am getting this:

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

Indeed, I might be wrong, and my issue might be something else entirely, though definitely linked to the building process of that project.

So back to my main question: Are the aliases being transpiled? :) Of course, I would be also very thankful if you understand the real issue I have and know a way to fix it.

[Softverovich]

I'm not so sure that this is definitely related to the building process of your project. What file are you getting this error from in your project?

That error tells you that you are using a React Hook function outside of the body of a React function component. I would check to make sure I wasn't using some useSomeHook type of function outside of a React component to begin with.

See https://reactjs.org/docs/hooks-rules.html

[varoot]

It might be because they're referring to different instance of react and react-dom (the "@common" module and the main module)

It might help to add react and react-dom to alias

"alias": {
  "@common": "../common",
  "react": "./node_modules/react",
  "react-dom": "./node_modules/react-dom",
}