We Keep Coding

how to import md file when I use create-react-app with javascript?

I'm trying to run the blog example in material ui getting started page . the problem is that the source code is:
in blog.js
import post1 from './blog-post.1.md';
.
.
.
return( <Main>{post1}<Main/>);
and in Main.js:
import ReactMarkdown from 'markdown-to-jsx';
export default function Main(props) {
return <ReactMarkdown options={options} {...props} />;
}
if I run the code I get this output:
/static/media/blog-post.1.0c315da1f0a7af641a3a.md instead of the data inside the MD file.
I want to do the same ,how can I import MD files in my create-react-app version? (without typescript)

You'll need to read the markdown object and then load it into the ReactMarkdown component. Common methods of doing this use fetch as an intermediary. For example:
import * as React from "react";
import ReactMarkdown from "markdown-to-jsx";
import post from "./post.md";
export default function MarkdownImport() {
let [readable, setReadable] = React.useState({ md: "" });
React.useEffect(() => {
fetch(post)
.then((res) => res.text())
.then((md) => {
setReadable({ md });
});
}, []);
return (
<div>
<ReactMarkdown children={readable.md} />
</div>
);
}
Working example: https://codesandbox.io/s/reactmarkdown-example-20vmg

How do I correctly use ReactJS Reach Router with TypeScript & ESLint?

I'm trying to implement client-only routes using Reach Router in a project using TypeScript & ESLint. This is my initial implementation:
// src/pages/app/[...].tsx
import { Router, Redirect, useLocation } from '#reach/router';
import * as React from 'react';
import BrowseMain from '../../components/BrowseMain';
import Layout from '../../components/Layout';
import UploadMain from '../../components/UploadMain';
import * as styles from '../../styles/[...].module.scss';
const IndexPage = () => {
const currLocation = useLocation();
return (
<Layout>
<main className={styles.indexMain}>
<Router basepath="/app">
{['/', '/browse', '/browse/'].map((path) => <BrowseMain key={path} path={path} />)}
{['/upload', '/upload/'].map((path) => <UploadMain key={path} path={path} />)}
{/* Redirect 404 */}
<Redirect noThrow default from={currLocation.pathname} to="/" />
</Router>
</main>
</Layout>
);
};
export default IndexPage;
// src/components/BrowseMain.tsx
import * as React from 'react';
import '../styles/BrowseMain.module.scss';
import Main from './Main';
const BrowseMain = () => <Main>Browse</Main>;
export default BrowseMain;
// UploadMain is similar to BrowseMain, so they are facing the same issue here.
// src/components/Main.tsx
import * as React from 'react';
import '../styles/Main.module.scss';
type MainProps = {
children: string,
};
const Main = ({ children }: MainProps) => <>{children}</>;
export default Main;
At this point, TypeScript threw the following error on the BrowseMain and UploadMain routes in [...].tsx:
TS2322: Type '{ key: string; path: string; }' is not assignable to type 'IntrinsicAttributes'.   Property 'path' does not exist on type 'IntrinsicAttributes'.
Following Reach Router's documentation for Usage with TypeScript, I made the following change:
import { RouteComponentProps } from '#reach/router';
import * as React from 'react';
import '../styles/BrowseMain.module.scss';
import Main from './Main';
const BrowseMain = (props: RouteComponentProps) => <Main>Browse</Main>;
export default BrowseMain;
This solves the previous linting error, however two new ones are raised:
TS6133: 'props' is declared but its value is never read.
ESLint: 'props' is defined but never used.(#typescript-eslint/no-unused-vars)
At this point, I'm stuck. I tried two different things, but they both raised linting errors:
// ESLint: Unexpected empty object pattern.(no-empty-pattern)
const BrowseMain = ({}: RouteComponentProps) => (
// ESLint: '_' is defined but never used.(#typescript-eslint/no-unused-vars)
const BrowseMain = (_: RouteComponentProps) => (
I feel like I'm in a damned if you do, damned if you don't situation right now. What's the correct way to declare an explicit type for props that will not be used?

You can specify the props using generics. In your case it will look like:
const BrowserMain: React.FC<RouteComponentProps> = () => <Main>Browse</Main
Using React.FC is however discouraged so you may also do it with a typescript call signature
type BrowserMainFC = {
(props: RouteComponentProps): JSX.Element
}
const BrowseMain: BrowserMainFC = () => <div />
Check out this resource: https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components/

Trying to import external common component in expo form outside the root directory

This is the common component
import React from "react";
// import { Text } from "react-native";
const PrintHello = () => {
return <div> Hello Im working </div>;
};
export default PrintHello;
// import _ from "lodash";
this is the folder structure
common/components
app1/src/components
app2/src
And i got this error
/Users/mac3/Documents/GitHub/curb-food/common/utils.js 4:9
Module parse failed: Unexpected token (4:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| // import { Text } from "react-native";
| const PrintHello = () => {
> return <div> Hello Im working </div>;
| };
|
i tried all the babel-loader but nothing workes

The file type should be .jsx to handle React components instead of .js. Also <div> is not a React Native component, you should be using <Text>. If you change the file name to utils.jsx and replace your code with the below it should work.
import React from "react";
import { Text } from "react-native";
const PrintHello = () => {
return <Text> Hello Im working </Text>;
};

Getting SyntaxError when using lightweight-charts in NextJS

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

react js unexpected token export on export{default as Cards}

on my freshly installed app i try to import my components like this:
import {Cards , Chart , CountryPicker} from '../components'
and i made an index.js directory:
export {default as Cards} from './Cards/Cards'
export {default as Chart} from './Chart/Chart'
export {default as CountryPicker} from './CountryPicker/CountryPicker'
but it return error :Uncaught SyntaxError: Unexpected token 'export'.
i am doing this trying to copy a tutorial and it looks like it works for the tutor but not me!

This is the basic format for Reactjs.
for more you can Basic example here
//Card
import React from 'react';
const Card = (props) => {
return (
// JSX code
)
}
export default Card;
//Chart
import React from 'react';
const Chart = (props) => {
return (
// JSX code
)
}
export default Chart;
//CountryPicker
import React from 'react';
const CountryPicker = (props) => {
return (
// JSX code
)
}
export default CountryPicker;
//index.JSX
import {Card} from './component/Card';
import {Chart} from './component/Chart';
import {CountryPicker} from './component/CountryPicker';

I think you should first define the components individually and each component should be exported at the bottom of the definition page like so...
import React from "react"
const Cards = () => {
//Helper functions here
return (
//Jsx here
)
}
export default Cards
And then you can now import this component in your App.js component based on the relative path like so...
import Cards from "./components/Cards/Cards";
This is assuming Cards is 2 folders deep from your home directory.

the problem was that i have not put my component folder inside the src folder. hence webpack did nothing about it and it was interpreted as a raw js file which resulted in the error. moving it to the src folder did the trick!