Mixing
Adding a react component(button) to the page via google chrome extension
I need help really. I am trying to add a react component to the page through chrome extension. To be more simple just for practicing sake adding a button to the Wikipedia.
However, I am receiving the following error: Uncaught SyntaxError: Unexpected identifier for the following line: import React from 'react';
When i change it to ES5 syntax : var React = require('react'); then the problem disappears. however, another problem pops up 😢
Which is : //Uncaught SyntaxError: Unexpected token < for the following line : ReactDOM.render(,button);
So I believe it is not identifying the ES6, JSX syntax.
Can anyone look into this and rescue me pls 🙏
Adding the code below:
// import React from 'react'; //content.js:1 Uncaught SyntaxError:
//Unexpected identifier
// import ReactDOM from 'react-dom';
// import Button from '../components/button.js';
//import serviceWorker from '../src/serviceWorker';
var React = require('react');
var ReactDOM = require('react-dom');
var Button = require('../components/button.js');
var serviceWorker=require('../src/serviceWorker');
const element = document.getElementById('firstHeading');
element.classList.add('cpy');
const button = document.createElement('span');
element.appendChild(button);
ReactDOM.render(<Button/>,button); //Uncaught SyntaxError: Unexpected token <
serviceWorker.unregister();
node.js reactjs
google-chrome-extension asked Jan 1 at 12:57
Burak KahramanBurak Kahraman
113
add a comment |
I need help really. I am trying to add a react component to the page through chrome extension. To be more simple just for practicing sake adding a button to the Wikipedia.
However, I am receiving the following error: Uncaught SyntaxError: Unexpected identifier for the following line: import React from 'react';
When i change it to ES5 syntax : var React = require('react'); then the problem disappears. however, another problem pops up 😢
Which is : //Uncaught SyntaxError: Unexpected token < for the following line : ReactDOM.render(,button);
So I believe it is not identifying the ES6, JSX syntax.
Can anyone look into this and rescue me pls 🙏
Adding the code below:
// import React from 'react'; //content.js:1 Uncaught SyntaxError:
//Unexpected identifier
// import ReactDOM from 'react-dom';
// import Button from '../components/button.js';
//import serviceWorker from '../src/serviceWorker';
var React = require('react');
var ReactDOM = require('react-dom');
var Button = require('../components/button.js');
var serviceWorker=require('../src/serviceWorker');
const element = document.getElementById('firstHeading');
element.classList.add('cpy');
const button = document.createElement('span');
element.appendChild(button);
ReactDOM.render(<Button/>,button); //Uncaught SyntaxError: Unexpected token <
serviceWorker.unregister();
node.js reactjs
google-chrome-extension asked Jan 1 at 12:57
Burak KahramanBurak Kahraman
113
Content scripts run in the web page environment so you can't use node.js directly (you'll have to bundle everything you need in a local js file and remove or patch incompatible modules likefs). I didn't use React so I suggest studying an existing tutorial like this one or any other existing solutions.
– wOxxOm
Jan 1 at 13:19
add a comment |
I need help really. I am trying to add a react component to the page through chrome extension. To be more simple just for practicing sake adding a button to the Wikipedia.
However, I am receiving the following error: Uncaught SyntaxError: Unexpected identifier for the following line: import React from 'react';
When i change it to ES5 syntax : var React = require('react'); then the problem disappears. however, another problem pops up 😢
Which is : //Uncaught SyntaxError: Unexpected token < for the following line : ReactDOM.render(,button);
So I believe it is not identifying the ES6, JSX syntax.
Can anyone look into this and rescue me pls 🙏
Adding the code below:
// import React from 'react'; //content.js:1 Uncaught SyntaxError:
//Unexpected identifier
// import ReactDOM from 'react-dom';
// import Button from '../components/button.js';
//import serviceWorker from '../src/serviceWorker';
var React = require('react');
var ReactDOM = require('react-dom');
var Button = require('../components/button.js');
var serviceWorker=require('../src/serviceWorker');
const element = document.getElementById('firstHeading');
element.classList.add('cpy');
const button = document.createElement('span');
element.appendChild(button);
ReactDOM.render(<Button/>,button); //Uncaught SyntaxError: Unexpected token <
serviceWorker.unregister();
node.js reactjs
google-chrome-extension asked Jan 1 at 12:57
Burak KahramanBurak Kahraman
113
I need help really. I am trying to add a react component to the page through chrome extension. To be more simple just for practicing sake adding a button to the Wikipedia.
However, I am receiving the following error: Uncaught SyntaxError: Unexpected identifier for the following line: import React from 'react';
When i change it to ES5 syntax : var React = require('react'); then the problem disappears. however, another problem pops up 😢
Which is : //Uncaught SyntaxError: Unexpected token < for the following line : ReactDOM.render(,button);
So I believe it is not identifying the ES6, JSX syntax.
Can anyone look into this and rescue me pls 🙏
Adding the code below:
// import React from 'react'; //content.js:1 Uncaught SyntaxError:
//Unexpected identifier
// import ReactDOM from 'react-dom';
// import Button from '../components/button.js';
//import serviceWorker from '../src/serviceWorker';
var React = require('react');
var ReactDOM = require('react-dom');
var Button = require('../components/button.js');
var serviceWorker=require('../src/serviceWorker');
const element = document.getElementById('firstHeading');
element.classList.add('cpy');
const button = document.createElement('span');
element.appendChild(button);
ReactDOM.render(<Button/>,button); //Uncaught SyntaxError: Unexpected token <
serviceWorker.unregister();
node.js reactjs
google-chrome-extension node.js reactjs
google-chrome-extension asked Jan 1 at 12:57
Burak KahramanBurak Kahraman
113
asked Jan 1 at 12:57
Burak KahramanBurak Kahraman
113
asked Jan 1 at 12:57
Burak KahramanBurak Kahraman
113
asked Jan 1 at 12:57
Burak KahramanBurak Kahraman
113
asked Jan 1 at 12:57
Burak KahramanBurak Kahraman
113
113
Content scripts run in the web page environment so you can't use node.js directly (you'll have to bundle everything you need in a local js file and remove or patch incompatible modules likefs). I didn't use React so I suggest studying an existing tutorial like this one or any other existing solutions.
– wOxxOm
Jan 1 at 13:19
add a comment |
Content scripts run in the web page environment so you can't use node.js directly (you'll have to bundle everything you need in a local js file and remove or patch incompatible modules likefs). I didn't use React so I suggest studying an existing tutorial like this one or any other existing solutions.
– wOxxOm
Jan 1 at 13:19
Content scripts run in the web page environment so you can't use node.js directly (you'll have to bundle everything you need in a local js file and remove or patch incompatible modules like
fs). I didn't use React so I suggest studying an existing tutorial like this one or any other existing solutions.– wOxxOm
Jan 1 at 13:19
Content scripts run in the web page environment so you can't use node.js directly (you'll have to bundle everything you need in a local js file and remove or patch incompatible modules like
fs). I didn't use React so I suggest studying an existing tutorial like this one or any other existing solutions.– wOxxOm
Jan 1 at 13:19
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53995628%2fadding-a-react-componentbutton-to-the-page-via-google-chrome-extension%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53995628%2fadding-a-react-componentbutton-to-the-page-via-google-chrome-extension%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Content scripts run in the web page environment so you can't use node.js directly (you'll have to bundle everything you need in a local js file and remove or patch incompatible modules like
fs). I didn't use React so I suggest studying an existing tutorial like this one or any other existing solutions.– wOxxOm
Jan 1 at 13:19