Cannot find index.js file in React-Bootstrap Module - reactjs

Been trying to install and use a ReactJS UI library and keep getting a compilation error. It seems that the entry file cannot be found for the modules. I get the same error with the material-ui library.
import { Button } from 'react-bootstrap';
import React, { Component } from 'react';
export class Button extends Component {
render() {
return (
<Button>Button</Button>
);
}
}
Error :
Cannot find file: 'index.js' does not match the corresponding name on disk: 'C:\Users......\node_modules\react-bootstrap\esm\repos'.
Any help would be much appreciated thanks!

Related

Tree shaking in NextJS includes all of node_modules package even if not using it all

Below is a screen shot of my package size from Next JS. What I want to point out is the react-color components under node_modules. I am importing them this way:
import { GithubPickerProps, GithubPicker, AlphaPicker } from 'react-color';
But you see it includes all the things I'm not using such as photoshop.js, sketch.js, etc.
How do I get it not to bundle the things I'm not using with tree shaking?
I did notice that import { debounce } from 'lodash'; imported all of lodash but import debounce from 'lodash/debounce'; reduced the package size by 200kB.
In order for the tree-shaking to work properly react-color should add module property to the package.json which will point to esm version of the lib.
Since it doesn't have it, you will need import directly.
Before:
import React from 'react'
import SketchPicker from 'react-color'
class Component extends React.Component {
render() {
return <SketchPicker />
}
}
After:
import React from 'react'
import SketchPicker from 'react-color/lib/Sketch'
class Component extends React.Component {
render() {
return <SketchPicker />
}
}

Cypress issue with SCSS file when importing component

I'm writing unit tests for a React application using Cypress. I wish to use the 'cypress-react-unit-test' to test individual components.
I am only importing React, cypress-react-unit-test (in support/index.js) and the component itself.
I have a simple component (test.js)
import React, { Component } from 'react';
import "./test.css"
class Test extends Component{
render(){
return(
<h1>Testing {this.props.name}</h1>
)
}
}
export default Test;
along with a test.scss containing
h1 {
color: blue
}
When I start the test runner I get an error preparing test file referring to the test.css file
Can someone explain what is going on here?
Same issue as this cypress ParseError on css content, but I am already using the cypress-react-unit-test package. As said there, if I comment out the import css file in the component file, the component renders without any styling. But what if I want to assert a heading's colour for example?
My starting testcode
import React from 'react'
import Test from '../../../../src/components/test.js'
describe('testing React', ()=>{
it('should react', ()=>{
cy.mount(<Test name="Nrd" />)
cy.contains('Testing')
})
})

React won't import my module "Module not found: Can't resolve "

React is not resolving my component import into my YouTubeApp.js.
It seems silly, i have other components in my react app that I'm able to import with no issues but this one in particular i can't get it imported.
Github: https://github.com/JAlonsoHdz/React_UnsplashClientApp/tree/master/src/components
Additional context, YouTubeApp.js is currently imported in my index.js with no issues. I'm using react routing imported in the index.js and links and the route links sucessfully to YouTubeApp.js. The problem arise whenver I try to import ANY component into YouTubeApp.js i get the Cannot resolve 'component name' error, without any imports the component YouTubeApp.js works fine.
I have validated the correct path, the name of the component.
YouTubeApp.js
import React from 'react';
import Other from './components/other';
class YouTubeApp extends React.Component {
render() {
return (<p>test</p>
);
}
}
export default YouTubeApp;
And this is my component I'm trying to import:
import React from 'react';
class Other extends React.Component {
render() {
return (
<div clasNames="ui container">test!</div>
);
}
}
export default Other;
I need to nest at least a few levels down more components but this issue blocking.
Looking at your GitHub repository, it appears that YouTubeApp.js and other.js are both in the "components" directory. Therefore when in YouTubeApp.js (or any other component in your "components" directory) your import should be:
import Other from './other';

"TypeError: rootElement.insertBefore is not a function" getting started with React-Handsontable

Just getting started with Handsontable. I used create-react-app and npm install --save react-handsontable.
Added a table to App.js:
import React, { Component } from 'react';
import HotTable from 'handsontable'
class App extends Component {
render() {
return (
<HotTable/>
);
}
}
export default App;
And seeing error:
TypeError: rootElement.insertBefore is not a function
node_modules/handsontable/dist/handsontable.js:8197
rootElement.insertBefore(this.container, rootElement.firstChild);
From searching the web it seems this may have something to do with load order issues, but I'm not sure what I can change.
Solution: I was importing handsontable but I should have imported react-handsontable.
import HotTable from 'react-handsontable'
This is documented correctly but I did not notice that detail.
https://github.com/handsontable/react-handsontable

Unknown named module: 'react/lib/NativeMethodsMixin'

I create a new React Native project and install #shoutem/ui in project and include the Examples component of Shoutem UI into React Native app.
import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import { Examples } from '#shoutem/ui';
class HelloWorld extends Component {
render() {
return (
<Examples />
);
}
}
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
But when I run start the project , I get "Unknown named module: 'react/lib/NativeMethodsMixin'" error.
The bug seems to be inside the #shoutem/animation module, in the Parallax.js file: https://github.com/shoutem/animation/blob/develop/Parallax.js
NativeMethodsMixin is not imported correctly from react:
If you change this:
import NativeMethodsMixin from 'react/lib/NativeMethodsMixin';
to this: import NativeMethodsMixin from 'react';
your app should work.
I would either file a Github issue on the #shoutem/animation project or check if the way NativeMethodsMixin is imported is specific to an older version of react and then use that version in your app.
I hope this helps.
This is fixed as of v0.8.9 release of #shoutem/animation.

Resources