Reactjs:'html-to-react' parser error - javascript

I am getting error while using html-to-react parser in ReactJS
I am getting an error
" _htmlToReact.HtmlToReactParser is not a constructor".
I have imported the 'HtmlToReactParser' as
import {HtmlToReactParser} from 'html-to-react'

With the ES6 style of import you need to import it as
import {Parser as HtmlToReactParser} from 'html-to-react'.
Which is an equivalent of
var HtmlToReactParser = require('html-to-react').Parser;
in commonJS as was metioned in the DOCS

Related

electron js: how to import custom js in renderer.js

I try this in renderer.js
import * as math from './math.js'
I get error: Uncaught SyntaxError: Cannot use import statement outside a module
Thanks to comment I solve this.
I add type="module" and change to
const math = require("./math.js")

Line 4:13: 'React' is not defined no-undef

When i want to create an element without JSX it shows me this error 'React' is not defined no-undef. I am a beginner. I don't know what is the problem. Can anyone help
import logo from './logo.svg';
import './App.css';
const app = React.createElement("h1", null, "Without JSX"); // Showing an error
function App() {
return (
<div className="App">
{app};
</div>
);
}
export default App;
These messages are shown in VS code Terminal.
Failed to compile.
./src/index.js
SyntaxError: E:\react_js_course\src\index.js: Unexpected token, expected "," (11:2)
Failed to compile.
src\App.js
Line 4:13: 'React' is not defined no-undef
Search for the keywords to learn more about each error.
A couple points just based on the code you provided:
You are using JSX in your example: your App component returns JSX, so React should be in scope to do that.
You are explicitly using the React method createElement so React should be available in this file.
To fix both issues add import React from 'react'; at the top of this file.
import React from 'react' is required for writing code in JSX and alternative you use ES7 snippet which help to auto populate the code
enter image description here
Img-extension ss

What is meaning of this command? import DataTypes = require('./lib/data-types');

import DataTypes = require('./lib/data-types')
Please someone explain to me. Why can use import and require together. This is in a module of NodeJS. Sequelize
This syntax is specific to TypeScript. See: https://www.typescriptlang.org/docs/handbook/modules.html#export--and-import--require
The export = syntax specifies a single object that is exported from the module. This can be a class, interface, namespace, function, or enum.
When exporting a module using export =, TypeScript-specific import module = require("module") must be used to import the module.
This is a Typescript syntax.
Try using
import * as x from 'x'
Or
const … = require(…)

How to import "old" ES5 code in ES6

I have an ES6 application (with Babel 6.5 and Webpack) and it successfully imports my modules like this:
import $ from 'jquery';
I wanted to install https://github.com/robflaherty/riveted/blob/master/riveted.js (a plugin for Google Analytics), but as you can see, the code doesn't have something like module.exports = ..., it only defines a global variable riveted, but it has an apparently valid package.json pointing to riveted.js.
So doing something like
import riveted from 'riveted'
riveted.init();
throws an error:
_riveted2.default.init is not a function
import riveted from 'riveted'
riveted.init();
import 'riveted'
riveted.init();
throws an error:
riveted is not defined
import * as riveted from 'riveted'
riveted.init();
throws an error:
riveted.init is not a function
How can I access riveted's init() function?
You can use the webpack exports loader:
var riveted = require("exports?riveted!riveted")
See the shiming modules overview for details
Step 1. modify riveted.js
Add some code after line 18.
// Browser global
root = !root && typeof self == 'object' ? self : root; // add this line
root.riveted = factory();
Because the this is undefined when the file is imported by es6, we use self instead.
self is better than window, it works in both main thread and worker.
Step 2. modify your import path
like this:
import './riveted.js';
riveted.init();
The ./ or ../ is required for import js file directly.
Examples:
import `./file.js`
import `../file.js`
import `./a/b/file.js`
import `../a/b/file.js`
import `../../a/b/file.js`
Tested in chrome.

Force typescript not to remove unused references

Please check my demo project on github.
In my react-tfractal/tests/component/tfractal.spec.tsx test:
import * as React from 'react';
import * as ReactTestUtils from 'react-addons-test-utils';
import {expect} from 'chai';
import {Tfractal} from '../../src/tfractal';
var R = React;
describe('tfractal', function () {
it('renders', function () {
var tfractal = ReactTestUtils.renderIntoDocument(<Tfractal />);
expect(tfractal).exist;
});
});
React import is never used, but required by the react-addons-test-utils (I get an error message "React is not defined" without the React import). The problem is: without the line
var R = React;
this import is removed by the typescript compiler.
The
import 'react'
doesn't get removed but doesn't work (the same error message "React is not defined").
How can I work around it without creating a dummy variable?
Run
npm install
tsd install
npm run test
to check.
I don't understand why this is happening to be honest, but try adding this line:
global.React = React
Or even this might work:
React;

Categories