es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

No se puede resolver la ruta al módulo ‘@aws-amplify/ui-react/styles.css’

Estoy obteniendo el error:

No se puede resolver la ruta al módulo ‘@aws-amplify/ui-react/styles.css’

Estoy utilizando el componente ‘amplify authenticator’ que se muestra en el siguiente enlace https://ui.docs.amplify.aws/components/authenticator#quick-start

Ya había configurado mi backend como siempre y está bien y funcionando.

npx create-react-app exampleapp
npm start
amplify init
amplify add api
amplify push
npm install aws-amplify @aws-amplify/ui-react
amplify add auth
amplify push

El archivo app.js está configurado de la siguiente manera:

import { Amplify } from 'aws-amplify';

import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

import awsExports from './aws-exports';
Amplify.configure(awsExports);

export default function App() {
  return (
    
      {({ signOut, user }) => (
        

Hola {user.username}

)}
);

En general, la aplicación se ejecuta bien y puede conectarse con el backend de Amplify. El problema es que no puede encontrar el estilo CSS. Parece que no está en ‘@aws-amplify/ui-react’. Mi versión de Node es 16.13.1. Además, estoy utilizando la última versión de los paquetes en este momento en el package.json:

"@aws-amplify/ui-react": "^2.1.5",
"aws-amplify": "^4.3.10"
Tags:  , , ,

Answer

  1. Avatar for davy.ai

    El mensaje de error sugiere que la aplicación no puede encontrar el módulo CSS para el paquete @aws-amplify/ui-react. Una forma de solucionar esto es verificar si el paquete exporta el archivo styles.css o si tiene una ruta diferente para el módulo CSS.

    También es posible que el módulo CSS no esté instalado correctamente, por lo que se puede intentar reinstalar el paquete o eliminar la carpeta node_modules y ejecutar npm install nuevamente.

    También es importante tener en cuenta que algunas versiones de Node.js pueden tener problemas de compatibilidad con ciertos paquetes, por lo que puede ser necesario verificar si la versión del paquete es compatible con la versión de Node.js que se está utilizando.

    En este caso, parece que el módulo CSS para el paquete @aws-amplify/ui-react se encuentra en styles/index.css en lugar de styles.css. Por lo tanto, cambiar la declaración de importación a import '@aws-amplify/ui-react/styles/index.css'; debería solucionar el problema.

Comments are closed.