import React from "react";
import logo from "./logo.svg";
import text from "./compiler/test/index.txt";
import "./App.css";
const App: React.FC = () => {
// const compiler = new Compiler("../test/index.jack");
// compiler.save();
console.log("text: ", text);
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
};
export default App;
I'm using react-app-rewired to override webpack configuration, without ejecting.
This component reads a .txt file and logs its content, but there is an error, Cannot find module './compiler/test/index.txt'. TS2307 in the third line of import.
As my comment seemed to resolve the issue, here as an official answer:
You probably just need to declare the type .txt somewhere in your typescript definitions. For create-react-app, this would be in react-app-env.d.ts. E.g.:
declare module '*.txt' {
const content: string;
export default content;
}
Related
I am getting below error when I converted my js based react app into typescript.
Type 'FunctionComponent<SVGAttributes<SVGElement>>' is not assignable to type 'string'.ts(2322)
index.d.ts(2188, 9): The expected type comes from property 'src' which is declared here on type 'DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>'
Below is my App.tsx file
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
Here the src attribute of image tag shows this compile error
No idea how to resolve this
My react version is 9.1.2
I tried creating a react app with template specified as typescript, the same code works fine and I copied that tsx file contents into my react app, it shows the same error.
npx create-react-app myapp --template typescript
The same content on that app works without any problem. I coped the tsconfig.json as well into my main project. That doesn't helped in anyway.
Change your content from
declare module "*.svg" {
const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
export default content;
}
to
declare module "*.svg" {
const content: any;
export default content;
}
Here are few ways you can achieve that: https://blog.logrocket.com/how-to-use-svgs-in-react/
I recommend this option as is easy to write and enables you to change stroke, fill of svg later.
import { ReactComponent as ReactLogo } from './logo.svg';
const App = () => {
return (
<div className="App">
<ReactLogo />
</div>
);
};
I am trying to split my code using React.Lazy() with Route-based code splitting (https://reactjs.org/docs/code-splitting.html)
For example that's the component (Reports.jsx)
import React from 'react';
const Reports = () => {
return <div>Reports</div>;
};
export default Reports;
And I have in my route.js:
const LazyReports = React.lazy(() => import ('../../containers/team/reports/Reports'));
and I'm getting this error, and the bundle is not loaded.
Argument type function(): Promise<{readonly default?: function()}> is not assignable to parameter type () => Promise<{default: ComponentType}> Type Promise<{readonly default?: function()}> is not assignable to type Promise<{default: ComponentType}>
I figured out it's not related to the routing, but I don't know why it doesn't recognize the component as "ComponentType"
I am not sure about the complete code but below code is working fine with lazy code syntax. I feel above seem ok to me. Hoping the container code is only have above component code.
One thing you can do , delete the build folder and build again with yarn build/npm build.
Below is simple code without any router /redux.
import React from 'react';
import logo from './logo.svg';
import './App.css';
const LazyReports = React.lazy(() => import ('./Reports'))
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
<LazyReports/>
</div>
);
}
export default App;
import React, {Component} from 'react'
const Greet=()=> <h1>Say helllo</h1>
export default Greet;
This functional component i've created and imported in App.js
import logo from './logo.svg';
import './App.css';
import './Components/Greet'
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
<br></br>
<button>Submit</button>
</header>
<Greet/>
</div>
);
}
export default App;
But getting error in chrome web:
**src\App.js
Line 24:8: 'Greet' is not defined react/jsx-no-undef
src\Components\Greet.js
Line 7:16: 'Greet' is not defined no-undef**
New to React Helpful if someone can help me with this.
const greet=()=> <h1>Say helllo</h1>
Try Greet instead of greet
Also in your App.js write in this way
import Greet from "./Components/Greet";
I have been trying add an image using the tag on CodeSandbox.io. However, every time I try to add it, it doesn't show and just defaults to the alt tag (Displays logo).
import React from "react";
import logo from "./logo.svg";
import "./App.css";
function App() {
return (
<div className="App">
<header className="App-header">
<img src={require("./logo.svg")} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
You can checkout my code and a live demo at this codesandbox link
Codesandbox doesn't support directly importing images. Instead, you can either add them as static uploads and reference their uploaded URL or import them as React components:
I'm not able to get a 'react' application beyond Screen with the "atom icon" and "learn React" link.
There is a message saying 'Edit src/App.js and save to reload.'
But there's nothing giving any information or clue about what changes need to be made to the App.js file, what configuration or other settings to check (and what the values should be), etc.
What do I need to do to get a React app to actually work?
//=========================
// BEGIN App.js SourceCode:
// ------------------------
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
// ----------------------
// END App.js SourceCode
//=======================
The changes you need to make to App.js is the code for the initial page of your React App.
Replace your code with this, and change the "Hello":
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<p>Hello</p>
</div>
);
}
export default App;