I am trying to import BrowserWindow inside of a react component file.
import { BrowserWindow } from 'electron';
class SomeComponent extends React.Component {
...
}
export default SomeComponent
I am using Webpack and Babel to compile to translate the ES6 code. But, when I add the import statement, I get an error from webpack saying
Module not found: Error: Can't resolve 'fs' /root_path/project_name/node_modules/electron
However, I use a similar statement in main.js in the root directory, and I was able to import BrowserWindow without any errors
//main.js
const { app, BrowserWindow } = require('electron');
I tried to use ES5 syntax in the react component, but still got the same error.
I found the answer to my problem.
I can use window.require to import the BrowserWindow inside my component files.
For example:
const { BrowserWindow } = window.require('electron').remote;
Related
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';
I am new to React. I try to use the npm module overlapping-marker-spiderfier-leaflet in a react project.
I follow the instruction at https://www.npmjs.com/package/overlapping-marker-spiderfier-leaflet so I do npm install -S overlapping-marker-spiderfier-leaflet and then import OverlappingMarkerSpiderfier from 'overlapping-marker-spiderfier-leaflet'; in my project.
I then do var oms = new OverlappingMarkerSpiderfier(this.map); but I get :
Unhandled Rejection (TypeError):
WEBPACK_IMPORTED_MODULE_8_overlapping_marker_spiderfier_leaflet.OverlappingMarkerSpiderfier is not a constructor
Do you know how I could solve this error. Do you think I could rather use the minified js to use this plugin? How so?
overlapping-marker-spiderfier-leaflet library doesn't export anything in an ES6 compatible way. But it could be directly imported as a file from the library's dist folder:
import "overlapping-marker-spiderfier-leaflet/dist/oms";
const OverlappingMarkerSpiderfier = window.OverlappingMarkerSpiderfier;
Example
import React from "react";
import {
withLeaflet,
MapLayer
} from "react-leaflet";
import L from "leaflet";
import "overlapping-marker-spiderfier-leaflet/dist/oms";
const OverlappingMarkerSpiderfier = window.OverlappingMarkerSpiderfier;
class Spiderfy extends Component {
componentDidMount(props) {
const { map } = props.leaflet;
const oms = new OverlappingMarkerSpiderfier(map);
//...
}
//...
}
This demo demonstrates how to integrate overlapping-marker-spiderfier-leaflet into react-leaflet.
I'm currently writing tests for my Song component. The code works as expected in the browser, however, it's breaking in my tests.
Although I've figured out what the issue is and a bad workaround, I don't understand exactly what the problem is and why my solution works.
The rundown
The Song component imports AlbumArtContainer and AvatarContainer:
import AirbnbPropTypes from 'airbnb-prop-types'
import PropTypes from 'prop-types'
import React from 'react'
import './_styles/Song.scss'
import { ListGroupItemLink } from 'Desktop/components/common'
import { Action, ActionList } from 'Desktop/components/common/actions'
import {
AlbumArtContainer,
ArtistContainer } from 'Desktop/containers/common/music'
export default class Song extends React.Component {
// ... redacted code
}
I have a SongContainer component inside the same directory as AlbumArtContainer and AvatarContainer:
import { connect } from 'react-redux'
import { songs } from 'Common/api'
import { Song } from 'Desktop/components/common/music'
const mapStateToProps = (state, { id }) => {
// ... redacted code
}
const SongContainer = connect(mapStateToProps)(Song)
export default SongContainer
Inside that directory, I have an index.js file to export everything:
export AlbumArtContainer from './AlbumArtContainer'
export ArtistContainer from './ArtistContainer'
export SongContainer from './SongContainer'
Song.test.jsx imports Song:
import Action from 'Desktop/components/common/actions/Action'
import Song from 'Desktop/components/common/music/Song'
describe("<Song>", () => {
// ... redacted tests
})
Running the test for this file throws the following error:
-> % npm run test client/src/Desktop/components/common/music/__tests__/Song.test.jsx
> # test /home/mightyspaj/Dev/Projects/vibite/client
> jest "client/src/Desktop/components/common/music/__tests__/Song.test.jsx"
FAIL src/Desktop/components/common/music/__tests__/Song.test.jsx
● Test suite failed to run
Invariant Violation: You must pass a component to the function returned by connect. Instead received undefined
at invariant (node_modules/invariant/invariant.js:42:15)
at wrapWithConnect (node_modules/react-redux/lib/components/connectAdvanced.js:101:29)
at Object.<anonymous> (src/Desktop/containers/common/music/SongContainer.jsx:19:62)
at Object.<anonymous> (src/Desktop/containers/common/music/index.js:1:521)
at Object.<anonymous> (src/Desktop/components/common/music/Song.jsx:8:14)
at Object.<anonymous> (src/Desktop/components/common/music/__tests__/Song.test.jsx:2:13)
at next (native)
at next (native)
at process._tickCallback (internal/process/next_tick.js:109:7)
This is because it's reading SongContainer, and Song is being imported as undefined inside SongContainer. This means that connect() throws an error when Song is passed to it because it expects a component.
But if I import AlbumArtContainer and AvatarContainer inside SongContainer directly from their files instead of their module:
import AlbumArtContainer from 'Desktop/containers/common/music/AlbumArtContainer'
import ArtistContainer from 'Desktop/containers/common/music/ArtistContainer'
Then Song imports correctly inside SongContainer and it works just fine. I'm not sure why this is, or why it works fine in the browser but not my tests, so what exactly is the issue here?
I also don't want to import components directly from their file (which is why I import them from their module), so my current solution is only a workaround.
From further investigation I realised the issue was due to circular dependencies.
Although it wasn't the solution I'd initially wanted, I've removed the index.js files, and have also changed my imports to import components directly from their files using default imports.
This has prevented circular dependencies.
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.
Is there a way to parse Markdown in React using Typescript?
I am trying to do things like:
import * as ReactMarkdown from 'react-markdown'
// OR
import ReactMarkdown = require('react-markdown')
But Typescript can't fint module 'react-markdown' as it's not defined:
Error: TS2307: Cannot find module 'react-markdown'.
How can I define the module and use it as a React component?
I solved my problem by using commonmark package instead. They have typings and everything needed for my environment. Here is my implementation:
import { HtmlRenderer, Parser } from 'commonmark'
export class MyComponent extends React.Component<{}, {}> {
private post: string
constructor () {
super()
let parser = new Parser()
let renderer = new HtmlRenderer()
this.post = renderer.render(parser.parse("**works** like a charm!"))
}
render () {
return (
<div dangerouslySetInnerHTML={ {__html: this.post} } />
)
}
}
Also, do not forget to add the typings for commonmark:
$ typings install --global --save dt~commonmark
Thanks to the people who tried to help!