[Bug] [tag] is not a function | React: desenvolvendo componentes customizados e acessíveis com Emotion

2
respostas

por Theo Furtado de Oliveira

| 2k xp | 1 posts

Console ta dando esse erro e nao sei como resolver:

_emotion_styled__WEBPACK_IMPORTED_MODULE_0__.default)[tag] is not a function
    at Typography (bundle.js:454:90)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)

Meu codigo Typography.jsx

import styled from "@emotion/styled";

const components = {
  h1: "h1",
  body: "p",
};

const styles = {
  h1: `
        font-weight: 600;
        font-size: 40px;
        line-height: 49px;
    `,
  body: `
        font-weight: 400;
        font-size: 20px;
        line-height: 24px;
    `,
};

export const Typography = ({ variable, component, children }) => {
  const tag = components[component];
  const UsedComponents = styled[tag]`${styles[variable]}`;
  return <UsedComponents>
        { children }
    </UsedComponents>;
};

2 respostas

por Renan Cezar Wuicik

| 3166.9k xp | 6165 posts

Instrutor Suporte Educacional Start By Alura

23/11/2023

Olá Theo! Tudo ok contigo?

O erro que você está recebendo, indica que o problema está na linha onde você está definindo a constante UsedComponents no seu código Typography.jsx. O erro indica que [tag] is not a function, o que significa que o valor de tag não é uma função.

Esse erro ocorre porque a propriedade styled do pacote @emotion/styled espera receber uma tag HTML válida como argumento, mas está recebendo um valor inválido. Verifique se a propriedade component está sendo passada corretamente para o componente Typography e se corresponde a uma das tags HTML mapeadas no objeto components. Certifique-se também de que a propriedade variable está sendo passada corretamente e corresponde a uma das variantes de estilo definidas no objeto styles.

E também, ao analisar o código, percebi que você está usando a sintaxe de template literals para definir o estilo do componente UsedComponents. No entanto, o problema está justamente na forma como a propriedade está sendo passada.

Em vez de usar styled[tag], você deve usar styled(tag). A função styled espera receber o nome da tag HTML como argumento, e não como uma propriedade de um objeto.

Portanto, sugiro que você altere a linha const UsedComponents = styled[tag]`${styles[variable]}`; para const UsedComponents = styled(tag)`${styles[variable]}`; no seu código Typography.jsx.

Após fazer essa alteração, o erro deve ser resolvido e o seu componente Typography deve funcionar corretamente.

Em suma, era isso! Se precisar eu estarei por aqui.

Espero ter ajudado, abraços e bons estudos!

por Estudante

| 569.5k xp | 1338 posts

23/11/2023

Oi Theo!

O erro tá dizendo que [tag] is not a function lá no seu console.

Dá uma olhada no seu código em Typography.jsx. Aparentemente, tá rolando algum pepino com a função styled[tag]. Confere se tag tá sendo passado direitinho ou se tá rolando alguma confusão com o Emotion. Às vezes pode ser só um typo ou algo assim.

Dá uma revisada nesse trecho e vê se consegue identificar o que tá pegando. Se precisar de mais detalhes, dá um grito aqui.

Boa sorte!