Stack Overflow Asked by Red Apple on January 10, 2021
The HTML doesn’t seem to be loading the snippetInfo.js for a reason I can’t figure out. I’ve surfed the web quite a bit but the solutions don’t work. If I add type='text/javascript' to the script tag, I get the error Uncaught SyntaxError: Unexpected token '<' I believe it’s got something to do with my React configuartion, or something is missing in the package.json file. Please let me know.
index.html:
<html>
<head>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js" ></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" ></script>
</head>
<body>
<h1>Snippet #1234</h1>
<div id="snippetinfo"></div>
<script src="snippetInfo.js" ></script>
</body>
</html>
snippetInfo.js:
class UpdateButton extends React.Component {
render() {
return (
<button className='Update'>Update Info</button>
);
}
}
class SnippetInfo extends React.Component {
constructor(props) {
super(props);
this.state = {
value: 'Snippet Info Here...',
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('Snippet Info was updated');
event.preventDefault();
}
render () {
const status = 'Next player: Joe';
return (
<div>
<div className='status'>{status}</div>
<div className='form'>
<form onSubmit={this.handleSubmit}>
<label>
Snippet Info:
<textarea value={this.state.value} onChange={this.handleChange}/>
</label>
<input type='submit' value='Submit' />
</form>
</div>
</div>
);
}
}
ReactDOM.render(
<SnippetInfo />,
document.getElementById("snippetinfo")
);
package.json
{
"name": "Urania",
"version": "1.0.0",
"description": "<html> <head> <style> /************************************* GENERAL *************************************/ body { margin: 15; padding: 0; font: 12px/1.4em "Lucida Grande", Verdana, sans-serif; color: #333; overflow-y: scroll; text-rendering: optimizeLegibility; background-color: #F2F2F2; }",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/jhyuen/urania.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/jhyuen/urania/issues"
},
"homepage": "https://github.com/jhyuen/urania#readme",
"devDependencies":{
"babel-cli": "^6.26.0",
"babel-preset-react-app": "^3.1.2",
"babel-core": "^6.1.*",
"babel-loader": "^6.2.*",
"babel-preset-es2015": "^6.16.*",
"babel-preset-react": "^6.16.*",
"webpack": "^1.13.*",
"webpack-dev-server": "^1.16.*"
},
"dependencies":{
"react": "^16.11.0",
"react-dom": "^16.11.0"
}
}
I added "type='text/babel'" to my script tag, and it works.
Correct answer by Red Apple on January 10, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP