I'm trying to create a simple React module. My project structure looks like this :
project
|---src
|---Login.js
|---login.css
|---index.js
...
I have used create-react-app boilerplate.
Now when I have published the repo, it gives me :
Could not find module in path: 'react-mua-login' relative to '/src/index.js'
What is the problem actually ?
Repo : https://github.com/maifeeulasad/react-mua-login
npm package name : react-mua-login
codesandbox : https://codesandbox.io/s/react-mua-login-sample-x12dr?file=/src/index.js
Import Login component correctly:
import React from "react";
import ReactDOM from "react-dom";
import Login from "react-mua-login/src/Login";
const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>
<Login />
</React.StrictMode>,
rootElement
);
Working code
EDIT
If you want to use method like import Login from "react-mua-login", you should export Login component from your main entry file.
For example, you can create index.js in the project root directory and export Login component like this:
import Login from "./src/Login";
export default Login;
Recommended readling list: Preparing a React component to publish on npm
Doesn't look like react-mua-login is a library but an application. You cannot import anything from it and it generates a weird error.
You need a main property in react-mua-login's package.json so you can import things from it.
Also, you should probably move some dependencies in react-mua-login from dependencies to peerDependencies or devDependencies.
#testing-library/jest-dom dev
#testing-library/react dev
#testing-library/user-event dev
react dev & peer
react-dom dev & peer
react-scripts dev
It is often best that a lib doesn't ship with its own version of dependencies (especially react)
Related
I am creating a library of components. In this library, I created one component, connected it locally via npm link to my project, all work, the component was displayed. But when I decided to include styled-components to create a component. Here is my component.
import React, {FC} from 'react'
import styled from "styled-components"
import './mytbc.css'
export interface MyButtonProps{
color:string;
big?:boolean;
}
const MyCom: FC<MyButtonProps> = ({children, color, big, ...props}) => {
const MyCommon = styled.button`
background:${color};
padding:10px;
`
return (
<MyCommon>
{children}
</MyCommon>
)
}
export default MyCom
Then errors appeared in the console.
How to fix these errors and what are they related to?
I also had similar case when I was working with lerna and yarn workspaces. In my case the problem was using multiple and different versions of react, some where hoisted some were not during lerna compilation process.
According to docs
In order for Hooks to work, the react import from your application
code needs to resolve to the same module as the react import from
inside the react-dom package.
Run this command to list installed versions of react. And if you see more than one React, you’ll need to figure out why this happens and fix your dependency tree.
npm ls react
OR
yarn list react
Read more about the problem and solutions here
check that you have styled-components in your dependencies in file package.json
by:
cd project_name/src
npm install styled-components
I am actually just getting started with Reactjs. So as i installed all the React packages on my PC using npm, i deleted all the src files which were in it because they were just sample files, i wanted to create on my own, but the problem is that my main js file name was "original.js" while it was demanding that "index.js" can't be found. So i changed my file name to "index.js" and now it works. Can someone tell me how to find the settings where i can see this issue so that i don't have to name my every main rract file as "index.js".
Thank you
Generally in the web development world (not just React), we use index.* files instead of main.* files.
If you would like to rename it, you might need to do some complex stuff like ejecting the app from create-react-app, and then changing webpack.config.js, but that seems way too advanced for you.
Instead I would recommend what most tutorials online say to do, which is keep index.js as the entry point of your app and import your Main component into it, like so:
// src/index.js
import React from "react";
import ReactDOM from "react-dom";
import Main from "./Main";
ReactDOM.render(
<React.StrictMode>
<Main />
</React.StrictMode>,
document.getElementById("root")
);
// src/Main.js
import React from 'react';
const Main = () => {
return (
<h1>My main component</h1>
);
};
export default Main;
I have just started learning React and I am running the server with the command npm start but the problem is whenever I am making any changes in the index.js file it is updating it on the website but whenever I am importing some other apps and making changes in those apps it is not updating the website .
How can I update my site on updating any file in the project ?
Here is my header.js file
import React from 'react';
const user = {
name : 'Brijesh',
lastname : 'Maurya',
age : 20
}
const Header = () =>{
return (
<div>
<div>{user.name}</div>
</div>)
}
export default Header;
Here is index.js file
import React from 'react';
import ReactDOM from 'react-dom';
// Components
import Header from './components/header'
const App = () =>{
return (
<div>
<Header/>
</div>
)
}
ReactDOM.render(<App/>, document.querySelector('#root'));
As your issue is resolved by creating another app , maybe you should think over the flow you went through while making those files .
As you mentioned that you have just started learning react , I think you might have done something like deleting all the files and then creating new files from scratch.
Anyways , welcome to the world of React JS !
It sounds like whatever server npm start is running - probably a node server - has Hot Module Replacement configured and for the other apps that you are running HMR is not configured.
You can learn more about how to configure HMR on Webpack's site here:
https://webpack.js.org/concepts/hot-module-replacement/
And about React Hot Loader here:
https://gaearon.github.io/react-hot-loader/getstarted/
If npm start runs the wepack-dev-server it may be as simple as running the server with the --hot flag.
I have a website that I use to download common files that I need. I want to use this to display the files: https://github.com/uptick/react-keyed-file-browser
I have a raspberry pi that I run my website off of. I installed npm and ran the command from that github page (npm install react-keyed-file-browser) with success but I'm confused as to how to do the next step. Where does this go?
import React from 'react'
import ReactDOM from 'react-dom'
import FileBrowser from 'react-keyed-file-browser'
var mount = document.querySelectorAll('div.browser-mount');
ReactDOM.render(
<FileBrowser
files=[]
/>,
mount[0]
);
Thanks a ton! I'm sorry I'm so clueless.
The external React component says Uncaught TypeError: Cannot read property 'Component' of undefined when I link as npm package.
I link a package in package.json as "react-mapbox": "https://github.com/varya/react-mapbox.git". Then I use it in code
import {render} from 'react-dom';
import MapBox from "react-mapbox";
render(
<div>
<h1>Hello, world!</h1>
<MapBox />
</div>
,
document.getElementById('example')
);
But nothing works, I get that error. The full repo is here https://github.com/varya/react-mapbox-test I made a small example to illustrate.
The react-mapbox package is my own, maybe I build it wrongly? This is its repo https://github.com/varya/react-mapbox
I built it with webpack, like that https://github.com/varya/react-mapbox/blob/master/webpack.config.js As I suppose, this build does not include react package assuming that this will be at the project which link it. But the component still do not see react object.
UPD
I added import React from 'react'; as #aulizko suggested, but this only provided React object onto a page. It still was not visible for the component.
To fix this I had to provide this changes https://github.com/varya/react-mapbox/commit/2687d66025aaa84553a79850aa8686e88f1f39d9
I required react in the code of the component as well.
And I have to build with Babel. For some reason the webpack build gives the same error even if react is required. I created a branch to illustrate this https://github.com/varya/react-mapbox/tree/webpack Now I'm happy with Babel, but with this branch you can see what's wrong with webpack if interested.
You're probably bundling your module as UMD which is causing the bundle to utilized a global React variable which doesn't exist in the consumer app. You need to export the bundle as a CommonJS or AMD module using https://webpack.github.io/docs/configuration.html#output-librarytarget. Simple add libraryTarget: 'commonjs2 or libraryTarget: 'amd' to the output key in the webpack config and make sure you are importing react in your component.
I added import React from 'react'; as #aulizko suggested, but this only provided React object onto a page. It still was not visible for the component.
To fix this I had to provide this changes https://github.com/varya/react-mapbox/commit/2687d66025aaa84553a79850aa8686e88f1f39d9
I required react in the code of the component as well.
And I have to build with Babel. For some reason the webpack build gives the same error even if react is required. I created a branch to illustrate this https://github.com/varya/react-mapbox/tree/webpack Now I'm happy with Babel, but with this branch you can see what's wrong with webpack if interested.
The thing is that the jsx-code that you see in your editor is not the code that will be executed by node or browser.
If you look into code that are generated by the babel, you'll see something like this:
(0, _reactDom.render)(React.createElement(
'div',
null,
React.createElement(
'h1',
null,
'Hello, world!'
),
React.createElement(_reactMapbox2['default'], null)
), document.getElementById('example'));
So as you can see it uses React constant under the hood.
You need to explicitely import React if you want to use jsx-code.
Add something like this in your code and it'll work:
import React from 'react'; // <!--- add this!!!
import {render} from 'react-dom';
import MapBox from "react-mapbox";
// the rest of your code goes here...
You have to import React's Component it this way:
import {Component} from 'react';
or even:
import React, { Component, PropTypes } from 'react';