0

Hola como va? Este es mi primer post. Les cuento el problema. Estoy aprendiendo react y empece a hacer una pagina. He generado componentes (< Button > en este caso) que me han funcionado bien, pero ahora he querido pasarle informacion a traves de un JSON a ese componente para que no este hardcodeada y me arroja el siguiente error:

Error: Cannot find module '"../images/HomeFooter-Explorar.svg"'

el tema es que cuando utilizo los componentes en forma directa sin el json, no me arroja el error

<Button text="Explorar" path={require("../images/HomeFooter-Explorar.svg")} link="tuBusqueda"></Button>

pero cuando tomo la informacion del json:

<div>
      {data.HomeButtons.map(aButton => 
                            <Button text={(aButton.text)} path={require(aButton.path)} />)}
                </div>

me arroja el error mencionado y no entiendo que estoy haciendo mal

Simplifico los archivos para que se entienda mejor.

La estructura de directorios es la siguiente:

-Proyecto
--node_modules
--public
--src
---components
---css
---Data
---images
---pages

el archivo LocalData.json seria:

{
  "HomeButtons": [
    {
      "text" : "Explorar",
      "path" : "\"../images/HomeFooter-Explorar.svg\"",
      "link" : "tuBusqueda"
    }
  ]
}

el archivo app.js:

import React from 'react';
import {BrowserRouter, Route, Switch, Link} from 'react-router-dom'
import Home from "../pages/Home";

function App() {
    return (
        <BrowserRouter>
            <Switch>
                <Route path="/home" component={Home}/>
            </Switch>
        </BrowserRouter>
    )
}

export default App

el archivo de la home.js:

import React from 'react';
import data from '../Data/LocalData'
import Button from "../components/Button";

class Home extends React.Component {
    render() {
        return (<div>
                    {data.HomeButtons.map(aButton => <Button text={(aButton.text)} path={require(aButton.path)}  />)}
               </div>
export default Home

y el componente Button.js:

import React from "react";
import "../css/Button.css"
import { Link } from "react-router-dom"

class Button extends React.Component {
    render() {
        return <div className={"Button"}>
            <Link to={this.props.link}>
                <img src={this.props.path}/>
            </Link>
        </div>
    }
}

export default Button

Bueno desde ya estoy muy agradecido por cualquier ayuda que puedan darme. Saludos.

1
  • quisiera saber si solucionaste tu problema o que solucion hallaste trate ya que tengo tu mismo problema Commented el 20 nov. 2020 a las 1:33

1 respuesta 1

0

Al parecer el error está en como tienes escrito tu path en el JSON.

intenta con "path" : "../images/HomeFooter-Explorar.svg",

De la otra manera estás llamando require('"../images/HomeFooter-Explorar.svg"'), agregando comillas innecesarias.

1
  • Gracias por contestar tan pronto, si lo he probado tambien y me arroja el mismo error: Error: Cannot find module '../images/HomeFooter-Explorar.svg' Commented el 26 feb. 2020 a las 19:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.