I strongly suspect I have a configuration or setup error, but I’m feeling stuck on getting my react component to display.
I burned too much time on CodePen. Somehow that website feels like a crutch to me, so I got my own website and am trying to get the Markdown Previewer app working. In my frustration, I’ve stripped out nearly all content, just trying to get hello world to display.
Here’s my markdownpreviewer.html:
I added ‘use strict’ in an attempt to get a better error message. It did not help and I removed it.
I added the following two import statements to the top of my markdownpreviewer.js file:
import React from 'react';
import ReactDOM from 'react-dom';
And now I get this confusing error message:
SyntaxError: import declarations may only appear at top level of a module. (line 1 is flagged as the error)
typically you also need a babel compiler added to to your script files in a standalone html file that is needed for the browser to understand jsx, I used to use this link a while back on similar projects
Hmmm. I added that babel CDN to my markdownpreviewer.html file, and got some new errors:
unreachable code after return statement
babel.js:61389:2
SyntaxError: import declarations may only appear at top level of a module markdownpreviewer.js:1
Source map error: request failed with status 404
Resource URL: https://img1.wsimg.com/tcc/tcc_l.combined.1.0.6.min.js
Source Map URL: tcc_l.combined.1.0.6.min.js.map
Do I need to source in tcc_l.combined.1.0.6.min.js ?
I agree I need babel as the codepen for the FCC projects states babel must be set for the pre-compiler.
I solved the tcc_l.combined js issue by following the steps on this godaddy support posting.
So now I’m back to one error message:
SyntaxError: import declarations may only appear at top level of a module. (line 1 of my js file is sited as the error).
Do I need to declare my <script> statements in some special order to make this work?
Hi Dejere1,
I finally got it working this morning. The key was adding type=“text/babel” to my project’s script tag: <script src="markdownpreviewer.js" type="text/babel"></script>
but also I had to remove the import React and import ReactDOM statements from my js file. I made this change after reviewing your Recipe js file at:
I noticed you did not call import in your file. Thank you for posting those files in your public github.
-Fred
Glad you got it working.
Yes, the type="text/babel" in the script tag is critical since otherwise it will assume that your embedded script is just regular JavaScript, and since react depends on JSX that needs to be compiled (transpiled if you wish) to JavaScript by babel, it needs to be explicitly told what the contents are for the compiler to take over.
Import statements don’t work in this case since you are embedding the entire react library (via cdn) into your file giving you access to all the library’s functionality, no modules are being exported that are to be imported by your file so it is unnecessary.
However, I would like to point out that the way you have it set up now will only be good for development (good enough for learning and testing) but will not work for production, as I mentioned before, for that you would need some type of local server setup on your machine (either with CRA or your own webpack setup) and in that event you would need to use import as the server can have access to exported modules on your machine.
Actually was reading the newer react docs earlier and they do a pretty good job explaining how to embed react directly to a website, it maybe useful to post here for people asking the same question in the future.