I am using one of the Material UI templates for blog posts: https://github.com/mui-org/material-ui/tree/master/docs/src/pages/getting-started/templates/blog.
I created my React app with npx create-react-app.
When I console log the source it comes out as a string, when I add it in the markdown-to-jsx it shows me this error index.module.js:1 Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_0_react___default(...) is not a function.
Steps to reproduce:
create an app with npx create-react-app
import the material UI template written on the above link
use fetch(post1).then(res => res.text()).then(text=>setMarkdown(text)) inside a useEffect hook to get the markdown text.
Add the markdown state in the way that the template used it here
<Markdown className={classes.markdown} key={markdown.substring(0, 40)}>
{markdown}
</Markdown>
and the error happens
Thanks in advance for any help you can give me.
What I have tried basically boils down to changing the MD file to a js string export default, changing markdown-to-jsx versions, and trying different attribute options on the markdown-to-jsx library but none is working and I am lost.
Related
How can I dynamically call addExtraLibs in monaco-editor with content from custom source?
So when user typed import {} from "somelib" I got some event or hook where I could call axios.get("/libs", {params: "somelib"}) from where I got somelib source code and add it to editor.
What other way additional to monaco-editor could help me to implement this?
I'm new to React and JS, and working with react-csv-viewer.
It works as expected and I can build and deploy it on a local server. But I do not require this, I just want to integrate the app as a component of a static HTML page.
I've tried following the process listed on the React tutorial for this, but I have trouble understanding the build process and how can I achieve this.
All I wish to achieve is to be able to use <CsvViewer /> provided by the author, possibly like this
const rootElement = document.getElementById("root");
ReactDOM.render(<CsvViewer />, rootElement);
and get the viewer app rendered at my HTML file, without building and deploying the viewer app on a (local) server.
Will appreciate any help or hints in this regard.
You can add React as it was shown in the tutorial you linked. The downside is that, you can't use JSX syntax (as it should be converted to JS during build time as it's not recognized by browsers as so).
Here is a post explaining how you can do so without transpilaton steps.
https://codepen.io/alexkrolick/post/react-without-a-build-step
Alias React.createElement, and call it to create components.
e.g.)
const h = createElement // convenient alias
// Instead of
<div className="foo" />
// create an element like so
h("div", { className: "foo" })
For more info on how that works, check out the official documentation.
https://reactjs.org/docs/introducing-jsx.html#jsx-represents-objects
But I really doubt anyone writes React code that way without a transpilation step in real life.
Would creating a separate site/page with React be a problem by chance? You can check out ParcelJS to easily create a React site if you aren't familiar with transpilation.
Trying to get a Material Web Component Select Menu to behave according to its demo but it seems the documentation does not include which JS components to import.
I have tried import {MDCSelect} from '#material/select';, following convention with its other Web components but I get an uncaught reference error: ReferenceError: mdc is not defined.
I seem to be missing a base class or I'm importing the wrong JS component but am not sure which to include.
Does anybody have knowledge about this?
Update - 10/26/2018
I posted this question on Github and received a response. I believe it is the correct implementation as it hasn't thrown any errors but a previous bug has kept me from fully testing of this approach.
I will return to this question as soon as I can test the suggested answer in the above link.
Checkout this example,it will help. It need just mdc instance to initiate the mdc-select.
> https://codepen.io/cubetastic/pen/ZoPNKK
I have built a Chrome extension that modifies a React app client side. So far I was able to
1) inject React and ReactDom from development branch
let injc=(src,cbk) => { let script = document.createElement('script');script.src = src;document.getElementsByTagName('head')[0].appendChild(script);script.onload=()=>cbk() }
injc("https://unpkg.com/react#16/umd/react.development.js",() => injc("https://unpkg.com/react-dom#16/umd/react-dom.development.js",() => { console.log("Hello")}))
ReactDOM.render('<Hello name="World" />', document.getElementById('container'));
see here for more info about this code injection.
2) I have used the HTMLReactParser that transforms HTML to React Component in order to get my html outer html node contents and turn into a React Element:
var reactObj=HTMLReactParser(node.outerHTML);
ReactDOM.render(reactObj, this.textarea);
This seems to work fine, preventing and any React rendering issues due to the mutation of the React code i.e. it actually edit the React components. It also prevents the error Uncaught Error: Minified exception occurred; use the non-minified dev environment when using non development react libraries.
See here for other attempts about mutating React components in a Chrome Extension.
3) That said, now I'm trying to apply a text overlay to the actual text nodes in the React app using the library TextOverlay, but despite of some success and some bug fix I had on that library, I cannot get rid of this. See here for more details about this specific integration issue.
This is the example code. Given a React app with some text, I try to apply a text overlay on that like here:
Currently the results is not what is expected, since the overlay is partially applied:
Example Code Repo: chrome-extension-react-app
I am trying to use the rc-slider React component on a existing Rails application that is using react-rails gem and it already have some other components that were built within the application that work just fine.
Based on this blog post I've been able to follow its first 3 steps, I've found the minified and browser-ready version of it here, added the file to the suggested path and required it on the application.js as recommended but even seeing the code within the Sprockets generated application javascript file that is rendered on the browser I can't see or use the supposed global variable it would provide according to step 4.
In the component's examples page it uses a const Slider = require('rc-slider'); statement in order to get that available. I've tried that but without luck as it throws: Uncaught ReferenceError: require is not defined. The same happens when I try the README usage's section approach: import Slider, { Range } from 'rc-slider';. I've tried both from an existing JS where I load other React components and also from the browser's Dev Tools Console window.
Am I using the wrong approach to the problem or maybe missing/overseeing any concept or basics here?
If you want to use Sprockets, you can get a pre-compiled version of rc-slider from unpkg:
https://unpkg.com/rc-slider#6.0.0/dist/rc-slider.js
Taking a look at the source, I see it exports the library as rc-slider:
So you can access it as window["rc-slider"] and use it from there, for example:
var RCSlider = window["rc-slider"]
var container = document.getElementById("container")
ReactDOM.render(
<div>
<RCSlider />
<RCSlider.Range />
</div>,
container
);
jsfiddle
That way, if you put rc-slider.js in the asset pipeline, you can use RCSlider in your javascripts.