I use styled-component but couldn't find a way to find match element. I got error of
TypeError: Cannot read property 'styledComponentId' of undefined
This is my index.js
const Container = styled.h1`
font-size: 14px;
import React from 'react'
import styled from 'styled-components'
const Container = styled.h1`
font-size: 14px;
`
export default () => (<div>
<Container>Hello</Container>
</div>)
export { Container }
This is my test (index.spec.js)
import React from 'react'
import { shallow } from 'enzyme'
import IndexPage from './index'
import { Container } from './index'
import { enzymeFind } from 'styled-components/test-utils'
describe('Pages', () => {
describe('Index page', () => {
it('should have a container', function() {
const wrapper = shallow(<IndexPage />)
expect(enzymeFind(wrapper, Container).exists()).toBe(true)
})
})
})
In your index.spec.js you have:
import IndexPage from './index'
import { Container } from './index'
Yet the code you posted only has a default export in index.js - you might be mixing files you are importing from.
Related
I'm trying to use the lightweight-charts package in my nextjs project, however when i try to call the createChart function I get this error in my nodejs console.
...\lightweight-charts\dist\lightweight-charts.esm.development.js:7
import { bindToDevicePixelRatio } from 'fancy-canvas/coordinate-space';
^^^^^^
SyntaxError: Cannot use import statement outside a module
Component:
import styled from "styled-components"
import { createChart } from 'lightweight-charts';
const Wrapper = styled.div``
const CoinPriceChart = () => {
const chart = createChart(document.body, { width: 400, height: 300 });
return <Wrapper></Wrapper>
}
export default CoinPriceChart
Page:
import styled from "styled-components"
import CoinPriceChart from "../../components/charts/CoinPriceChart"
const Wrapper = styled.div``
const CoinDetailPage = () => {
return (
<Wrapper>
<CoinPriceChart />
</Wrapper>
)
}
export default CoinDetailPage
Does someone have an idea what I could do to enable me to use the library within nextjs?
Thank you!
That because you are trying to import the library in SSR context.
Using next.js Dynamic with ssr : false should fix the issue :
import styled from "styled-components"
import dynamic from "next/dynamic";
const CoinPriceChart = dynamic(() => import("../../components/charts/CoinPriceChart"), {
ssr: false
});
const Wrapper = styled.div``
const CoinDetailPage = () => {
return (
<Wrapper>
<CoinPriceChart />
</Wrapper>
)
}
export default CoinDetailPage
I am getting this error: error message
Not really sure what I did wrong because everything looks right with my code, at least if I missed something.
import React, { useState } from "react";
import Home from "./screens/home";
import { View } from "react-native";
import * as Font from "expo-font";
import { AppLoading } from "expo-app-loading";
const getFonts = () =>
Font.loadAsync({
"poppins-regular": require("./assets/fonts/Poppins-Regular.ttf"),
"poppins-bold": require("./assets/fonts/Poppins-Bold.ttf"),
});
export default function App() {
const [fontsLoaded, setFontsLoaded] = useState(false);
if (fontsLoaded) {
return <Home />;
} else {
return (
<AppLoading startAsync={getFonts} onFinish={() => setFontsLoaded(true)} />
);
}
}
Can you try changing
import { AppLoading } from "expo-app-loading";
to this:
import AppLoading from 'expo-app-loading';
App.js
import React, { useRef, useEffect } from "react";
import Token from "./Token";
export default function App() {
const tokenizerRef = useRef(new Token());
useEffect(() => {
console.log("current token index: ", tokenizerRef.current.currentIndex);
}, [tokenizerRef.current.currentIndex]);
return <button onClick={tokenizerRef.current.advance}>Next</button>;
}
Token.js
class Token {
constructor() {
this.currentIndex = -1;
}
advance() {
this.currentIndex++;
}
}
export default Token;
I've a Token object ref inside App.js, and would like to watch the object field values(for this case when currentTokenIndex changes).
Currently clicking Next button, doesn't trigger the useEffect.
A better way of doing this, pointing to the right direction, will be appreciated.
We can use observer/subscriber pattern, specifically mobx for this purpose.
Token.js
import { makeAutoObservable } from "mobx";
class Token {
constructor() {
this.currentIndex = -1;
makeAutoObservable(this);
}
advance() {
this.currentIndex++;
}
}
export default Token;
App.js
import React, { useEffect } from "react";
import { observer } from "mobx-react";
const App = observer(({ tokenizer }) => {
useEffect(() => {
console.log('current index changed: ', tokenizer.currentIndex)
}, [tokenizer.currentIndex])
return (
<div>
<h1>{tokenizer.currentIndex}</h1>
<button onClick={() => tokenizer.advance()}>Next</button>
</div>
);
});
export default App;
Index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import Token from "./Token";
const tokenizer = new Token();
const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>
<App tokenizer={tokenizer} />
</React.StrictMode>,
rootElement
);
I'm trying to extract all my component styling using styled-component to a single file.
However, I am running into an error where if I extract the styling and the component which the styling is reliant into a separate file, the themes stop working.
Button.jsx
import {ButtonWrapper} from './Button.styled';
import {Button as MUButton} from '#material-ui/core/Button';
export const Button = () => {
return <ButtonWrapper>
<Button/>
</ButtonWrapper>
}
SmallButton.jsx
import {StyledSmallButton} from './Button.styled';
// import {Button} from './Button'
// const StyledSmallButton = styled(Button)` // This works.
// width: 50%
// `
export const SmallButton = () => {
return <StyledSmallButton/>
}
Button.styled.jsx
import {Button} from './Button';
export const ButtonWrapper = styled.div`
width: 100%
`;
export const StyledSmallButton = styled(Button)` //Doesn't work.
width: 50%
`;
Error
Uncaught Error: Cannot create styled-component for component: undefined
I believe there is a cyclic dependency problem here i.e. SmallButton requires Button which is themed by ButtonWrapper.
How can I solve this?
I think you've imported the MUButton wrong. Should the <Button /> component actually be <MUButton />?
import {ButtonWrapper} from './Button.styled';
import {Button as MUButton} from '#material-ui/core/Button';
// ^ this is the alias
export const Button = ({ className }) => {
return <ButtonWrapper>
<MUButton className={className} />
// ^ This should be MUButton
</ButtonWrapper>
}
Edit: passed the className prop down as mentioned by Andy int he comments
i am trying to include my common component in my main.js
this one I did it it successfully.
but in my common component, I am trying to print my redux data values.
so I created a method called handleClickForRedux to print the values.
I have included mapStateToProps and mapDispatchToProps
but still value is not printing at this line. console.log("event reddux props--->", props);
can you tell me how to fix it.
providing my code snippet and sandbox below.
https://codesandbox.io/s/react-redux-example-265sd
scroll.js
import React, { useEffect, useState, Fragment } from "react";
import PropTypes from "prop-types";
import { withStyles } from "#material-ui/core/styles";
import Card from "#material-ui/core/Card";
//import CardActions from "#material-ui/core/CardActions";
import CardContent from "#material-ui/core/CardContent";
import Typography from "#material-ui/core/Typography";
import Drawer from "#material-ui/core/Drawer";
import { bindActionCreators } from "redux";
import * as actionCreators from "../actions/actionCreators";
import { connect } from "react-redux";
import { compose } from "redux";
function SportsMouse(classes, props) {
// const [canEdit, setCanEdit] = useState(false);
function handleClickForRedux(event) {
console.log("event--->", event);
console.log("event reddux props--->", props);
}
return (
<Card>
<div onClick={handleClickForRedux}>I am here </div>
</Card>
);
}
SportsMouse.propTypes = {
classes: PropTypes.object.isRequired
};
function mapStateToProps(state) {
return {
posts: state.posts,
comments: state.comments
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(actionCreators, dispatch);
}
export default compose(
connect(
mapStateToProps,
mapDispatchToProps
)
)(SportsMouse);
main.js
import React from "react";
import { Link } from "react-router-dom";
import Scroll from "../commonComponents/scroll";
const Main = props => {
const { children, match, ...rest } = props;
return (
<div>
<h1>
<Scroll />
<Link to="/">Reduxstagram</Link>
</h1>
{React.Children.map(children, child => React.cloneElement(child, rest))}
</div>
);
};
export default Main;
Even when using material-ui, components only accept one argument. classes exists inside props. If you console.log(classes) you'll see that it contains all of your props, including material-ui's styles. It should be this:
function SportsMouse(props) {