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';
Related
I have monorepo with a UI library inside packages which contains a lot of components. Every component also has a *.stories.tsx file. Under the apps folder is the storybook project, which loads the stories from #my-ui-library.
I have a decorator in the storybook config, so my ThemeContextProvider is wrapped around everything (ThemeContextProvider is also imported from #my-ui-library).
Does not work:
button.tsx
import { ThemeContext } from '../../ThemeContext'
Does work:
button.tsx
import { ThemeContext } from '#my-ui-library'
Using the relative import I get the error that theme, which is stored in ThemeContext, is undefined.
Now, that itself wouldn't be a problem if VS Code wouldn't auto import from the relative path and I didn't have to change it manually everywhere.
I am building a little local dev/testing/documentation environment for some components which are used across different projects and so want to create them as individual npm packages.
Everything was working perfectly until I tried to use useState() in one of the components. Add this created the following errors:
Invalid hook call. Hooks can only be called inside of the body of a function component.
TypeError: Cannot read properties of null (reading 'useState')
I feel this is strange and I can't figure out what is causing it. I also tested with other hooks to see if it was just useState that was the problem but others such as useEffect and useRef also have the same problem.
Project structure is:
/components (the components to develop/test/document
/component-group
/Component
index.js
Component.js
component.scss
package.json
/library (where all the components are developed/tested/documented)
/component1
/component2
/etc (all the components that make up the library)
webpack.config.js
package.json
etc...
Components are imported into the library using a relative path because I don't won't to have to publish them to npm and update the version locally every time a change is made and needs to be tested.
As for the code for the component where useState is causing problems, this is a basic version which still causes problems:
import React, { useState } from 'react';
const TestComponent = () => {
const [testState, setTestState] = useState("testing");
return (
<p>Hello World</p>
)
}
export default TestComponent
If I comment out the useState line then Hello World is displayed, if I uncomment the line then the errors appear.
Any ideas as to what might be wrong would be really appreciated.
Thank you in advance!
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 sorry upfront for the pretty noobie question, but I don't know how to import plugins installed with npm. I would like to use this plugin for Vue, I have installed it with npm, in my project, and would like to import it to my main app.js file so that I can use it in Vue.
I have tried with using the path to the file in dist folder:
import MaskedInput from 'node-modules/vue-masked-input/dist/MaskedInput.js'
Vue.use(MaskedInput);
But, that obviously didn't work, what is the right way to do this?
Following the link this is actually a component, so what you could do in your component is:
import MaskedInput from 'vue-masked-input'
export default {
components: {
MaskedInput
}
}
What usually helps is by clicking through to the actual github page, and look for either an example in the README or in the actual code. In this case:
https://github.com/niksmr/vue-masked-input/blob/master/src/App.vue
There it shows you how you can use it 'in real life'
According to the docs, I should be able to do this to import a component for use in my React App:
import { Alert } from 'reactstrap';
However, this will cause webpack to complain like this:
| Module not found: Error: Can't resolve 'reactstrap' in '~/project/client/app/bundles/Frontend/components/team'
Then, I switch the import to this:
import Alert from 'reactstrap/lib/Alert';
And the import & functionality works!
This probably means (?) some configuration or module exports are not working for this module. Where can I start debugging / fixing this?