Laravel - React component Does not like importing comps in other comps

Question

Hey I'm super new to Laravel and finally was able to get a react component to show up on the screen. however when I import another component for example.

import ReactDOM from "react-dom" import SelectInput from "../components/SelectInput" import React from "react" export default class Head extends React.Component { render() { return ( <div> header <SelectInput /> </div> ) } }ReactDOM.render(<Head />, document.getElementById("Head"))

//test
import React from "react"
import styled from "styled-components"

const Container = styled.container``

class SelectInput extends React.Component {
    render() {
        return <div>test</div>
    }
}

export default SelectInput

Compiler Image DevTools Image

heres my Babelrc File. { "presets": [ [ "env", { "modules": false } ], "react" ], "plugins": ["babel-plugin-transform-class-properties"] }

It will render the component when Im not trying to import Test but when its uncommented it will render nothing on the screen. could it be Laravel doesn't compile it? any thoughts on what it may be?

I'm on Laravel 5.5.44

Answer 1

Looks like my error was having styled components within. If anyone has this issue I fixed it by downlaoding babel-plugin-styled-components then adding "babel-plugin-styled-components", { "displayName": false } to my babel.rc file Thanks Salman for helping out

Laravel - React component Does not like importing comps in other comps

Question

1 answers

solution1
0 ACCPTED 2019-02-25 23:31:08

Laravel - React component Does not like importing comps in other comps

Question

1 answers

solution1 0 ACCPTED 2019-02-25 23:31:08

solution1
0 ACCPTED 2019-02-25 23:31:08