I want to use ts-nameof in my React app created with create-react-app. How can I do that without ejection?
Hint: I also use craco, so a solution involving craco would be also fine for me.
Thanks!
It's possible to achieve with babel-macro called ts-nameof.macro without ejecting.
I've tested on fresh application generated with:
npx create-react-app temp --template typescript
# install macro dependecies
yarn add -D ts-nameof.macro
# or
# npm i --save-dev ts-nameof.macro
NOTE: if your react-scripts version lower than 2.0, you also need to install babel-plugin-macros as dev dependency.
Update App.tsx
import React from 'react';
import nameof from "ts-nameof.macro"; // import nameof
import logo from './logo.svg';
import './App.css';
function App() {
console.log(nameof(window.alert)) // "alert"
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;
Related
I am trying to make an app with react. I want to use react bootstrap. I downloaded bootstrap and react bootstrap in the project.
`
npm i bootstrap#5.2.3
`
`
npm install react-bootstrap bootstrap
`
this is my package.json:
enter image description here
I have imported the css in the App.js, I have also tried to import it in the index.js, but it still doesn't recognize it.
enter image description here
I have copied the link in the index.html of the public folder
enter image description here
when importing react bootstrap components I have done the imports for each component, but it doesn't recognize the styles, my 'card' looks like this : enter image description here
enter image description here
I don't know if I'm missing some import, or some npm to do. I have changed the imports of site a thousand times and it still does not work. does anyone know what could be happening?
1.) install bootstrap from npm package
npm install bootstrap
2.) Open your index file (Index.js) and have these two lines there like so
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css'; //<-- Add this
import 'bootstrap/dist/js/bootstrap.bundle.min'; // <-- Add this
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
reportWebVitals();
3.) Add button to see if Bootstrap button does show in App.js
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>
<a className="btn btn-primary"
data-bs-toggle="collapse"
href="#collapseExample"
role="button"
aria-expanded="false"
aria-controls="collapseExample">
Bootstrap button
</a>
</header>
</div>
);
}
export default App;
4.) Run app with npm start and see if your bootstrap has been installed and ready to go. My case
I have worked with create-react-app repo before. But recently I am using create-next-app repo for server side rendering.
I created a project with npx create-react-app and install a package for example npm install react-burger-menu --save from github and then use it in App.js. everything is working:
import './App.css';
import { slide as Menu } from 'react-burger-menu'
function App() {
var styles = {
...
}
return (
<div className="App">
<Menu styles={styles}>
<a id="home" className="menu-item" href="/">Home</a>
<a id="about" className="menu-item" href="/about">About</a>
<a id="contact" className="menu-item" href="/contact">Contact</a>
<a className="menu-item--small" href="">Settings</a>
</Menu>
</div>
);
}
export default App;
but I use this package in project npx create-next-app:
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.scss'
import {slide as Menu} from "react-burger-menu";
export default function Home() {
var styles = {
...
}
return (
<Menu styles={ styles } >
<a id="home" className="menu-item" href="/">Home</a>
<a id="about" className="menu-item" href="/about">About</a>
<a id="contact" className="menu-item" href="/contact">Contact</a>
<a className="menu-item--small" href="">Settings</a>
</Menu>
);
}
but it creates following error:
Server Error
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
this error apears almost with every package I install
When you create next app using npx create-next-app it creates your project inside a folder (default my-app). So before installing any package (or init git) you need to run cd my-app (in Git bash terminal) to be in project directory. otherwise it will create a new package.json in the wrong directory.
I am developing a React component package which I plan to publish it to NPM.
I use following things in the package
TypeScript
Webpack
But when I tested it locally in a new CRA app (I tested the NPM package locally by using 'yarn link'), I got the following error message in the CRA app.
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got:
object. You likely forgot to export your component from the file it's
defined in, or you might have mixed up default and named imports.
Check the render method of App.
I created a simplified version of the NPM package and pushed it to my repo:
https://github.com/spencerfeng/my-react-npm-package
Below is the code where I used in the CRA app for testing purpose:
import MyReactNpmPackage from 'my-react-npm-package'
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" />
<MyReactNpmPackage />
<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;
I have solved the issue. Basically, I need to export the package as a commonjs2 in module in webpack.
The fixed version is here: https://github.com/spencerfeng/my-react-npm-package
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;
}
I am running a create-react-app with react-16.8.6, and no modifications except for adding react-router to the mix. Now tests don't work.
After rolling things back, I found that the base test fails as soon as I import ANY part of the "react-router-dom" library. Any ideas whats going wrong?
Below is the App.js and App.test.js when I comment out the line:
import { Switch } from "react-router-dom";
the tests run without issue. When I return the line to the code I get the following error:
Test suite failed to run
Cannot find module 'react' from 'react-router-dom.js'
However, Jest was able to find:
'./App.css'
'./App.js'
'./App.test.js'
App.js
import React from "react";
import { Switch } from "react-router-dom";
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;
app.test.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
it("renders without crashing", () => {
const div = document.createElement("div");
ReactDOM.render(<App />, div);
ReactDOM.unmountComponentAtNode(div);
});
That might be some package manager installation issues. Try to do a fresh install:
rm -rf ./node_modules && rm yarn.lock && yarn
or in case if you're using npm:
rm -rf ./node_modules && rm package-json.lock && npm install
BTW, what is the version of the react-router-dom that you're installing? I've just tried it on the new create-react-app project, installed the latest version of router, but can't reproduce this error ()
Ran into the same issue, and was thinking I could elaborate on the solution for people who run into the same.
It is not resolved by deleting node_modules and yarn.lock/package-lock.json. Instead, as #Finglish mentions in their comment above, you probably have missing dependencies.
To fix the missing deps:
Get the depcheck package.
Run it in your project folder to see which dependencies you're missing.
Install the missing dependencies.
Run tests again to make sure everything is working.