I want to build a package and upload it to npm so I tried to create a demo package first.
I used this repo as a starter package: https://github.com/wobsoriano/vite-react-tailwind-starter
and updated the build script to this
"build-test": "esbuild src/App.tsx --bundle --minify --outfile=src/dist/index.js",
and the App.tsx i updated to this
import React from "react";
import "./index.css";
const App = () => {
return <div>My Dummy</div>;
};
export default App;
Then I tried to build it and import it in my main.tsx like this:
import React from "react";
import ReactDOM from "react-dom";
import App from "./dist/index.js";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
And then I get this error:
The requested module '/src/dist/index.js' does not provide an export
named 'default
I only can give you a quick manual fix. For some reason the index.js file has no "export default" keywords, but you can open the src\dist\index.js file and you can just insert the "export default " at the very begin. So the begin will look like this:
export default ()=>{var K=Object.create;var _=Object.define.
Because the whole index.js just a function, you can do this.
Related
I have an index.js file in my root directory but whenever I run npm start i get an Unknown word in index.js error.
How do I fix this problem? Looked online but can't seem to get it running. Since there is very little info about this error.
//index.js
import {createRoot} from 'react-dom/client';
import App from './App'
const root = createRoot(document.getElementById('root'));
root.render(<App />)
can you try this way
import React from 'react';
import ReactDOM from 'react-dom';
import * as ReactDOMClient from 'react-dom/client';
import App from './App';
const root = ReactDOMClient.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
You should use render method imported from 'react-dom'
// index.js
// import {createRoot} from 'react-dom/client';
import ReactDOM from 'react-dom';
import App from './App'
// const root = createRoot(document.getElementById('root'));
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
)
I just found the cause of this error. It was due to an autocompletion mistake. I have a global css file where I set up the css variables I use in this project such as font and background colors.
Said file needs to be imported into the css files that want to access given variables.
/* How it should look like */
#import url('../../../vars.css');
/* How it's not supposed to look like */
#import url('../../../index.js');
I accidentally autocompleted the index.js into the import statement which resulted in the error.
import React from 'react';
import * as ReactDOMClient from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';
const rootElement = document.getElementById("root");
// This opts into the new behavior!
ReactDOMClient.createRoot(rootElement as HTMLElement).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals();
If this code is executed, the error happens like following.
Could not find a declaration file for module 'react-dom/client'. 'E:/Workspace/React/welcomedev-react-starter/node_modules/react-dom/client.js' implicitly has an 'any' type.
Try npm i --save-dev #types/react-dom if it exists or add a new declaration (.d.ts) file containing declare module 'react-dom/client';
1 | import React from 'react';
2 | import * as ReactDOMClient from 'react-dom/client';
| ^^^^^^^^^^^^^^^^^^
3 | import App from './App';
4 | import reportWebVitals from './reportWebVitals';
I want the answer.
Be sure you have the correct types versions installed. Try running:
npm install --save-dev #types/react#18 #types/react-dom#18
Don't rely on your IDE to pick up everything correctly. In my case I had to manually type the import and use createRoot like this:
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root')!); // notice the '!'
root.render(<App />);
Notice how you need to tell typescript that you are sure your root won't be null with the exclamation mark ('!'). See more info in 'Updates to Client Rendering APIs'
I got this example from https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(<App tab="home" />);
Have you tried createRoot(container!) ?
If you are using typescript with react, then you need to import relative dependencies that support types and meets other typescript condition.
So try running the command npm i --save-dev #types/react-dom
And in case you are working with dependencies that doesn't support typescript then you can get around with this method. Hope this helps.
Typescript. What to do if module doesn't have #types?
Using ReactDOM before createRoot() does solve this issue.
Example-
ReactDOM.createRoot(rootElement)
I initialised a React project with TypeScript using the CLI command create-react-app client --typescript. Then, I ran npm start but received the following compilation error:
./src/App.js
Line 26:13: 'React' must be in scope when using JSX react/react-in-jsx-scope
I did not even modify the boilerplate project provided by create-react-app other than removing unnecessary logo files, and my previous React apps done using TypeScript compiled just fine. Below is my App.tsx and index.tsx file: (note that the logo in App.tsx was removed, and I did not touch index.tsx)
index.tsx:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers:
serviceWorker.unregister();
App.tsx:
import React from 'react';
import './App.css';
function App() {
return (
<div className="App">
Lorem
</div>
);
}
export default App;
React and ReactDOM are imported, so what caused this error?
Edit:
I found out that npm start, which runs react-scripts start, is compiling my .tsx files into .js files, which probably caused this issue. What might have caused the above behaviour?
try
const RootApp:React.FC = () => {
return (
<React.StrictMode>
<App />
</React.StrictMode>
);
}
render(<RootApp />, document.getElementById("root"));
I am totally new to React and i'm following tutorials (Programming with MOSH) in youtube but i'm stuck with this error, unable to resolve after finding similar questions.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import "bootstrap/dist/css/bootstrap.css";
import Counter from './components/counter';
//import * as Counter from './components/counter'; //tried this method too
ReactDOM.render(
<Counter />,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();
counter.jsx
import React, { Component } from 'react';
class Counter extends Component {
render() {
return <h1> Hello world</h1>;
}
}
export default Counter;
in command prompt i had done npm install and npm start after deleting package-lock.json but still the same error
folder structure
Thanks in advance.
Move your components folder inside the SRC this will fix it
Either move components folder inside src folder or change the reference in the import statement to '../component/counter'
When attempting to use the AppBar in version 0.16.6 of Material UI, I get the following error
Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded.
which looks like a react conflict error.
My code is as follows:
App.js
import React, { Component } from 'react';
import AppBar from 'material-ui/AppBar';
import {deepOrange500} from 'material-ui/styles/colors';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
const muiTheme = getMuiTheme({
palette: {
accent1Color: deepOrange500,
},
});
class App extends Component {
render() {
return (
<MuiThemeProvider muiTheme={muiTheme}>
<AppBar/>
</MuiThemeProvider>
);
}
}
export default App;
index.js
import injectTapEventPlugin from 'react-tap-event-plugin';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
Has anyone encountered this, or does anyone know how to fix the problem?
In the index.js file you will need this before the ReactDOM.render call:
// Needed for onTouchTap event handling
injectTapEventPlugin();
See if that clears up the issue. If not, then try deleting the node_modules folder and running npm install again.