I can't get non-editable-comments-web to work

[folaht]

I feel like I’m ready to implement my first ‘maidsafe component’ into my website.
And since I want to start simple, I decided to set my eyes on a guestbook,
because that was all the rage in the 90’s and early 2000’s.
To my dismay back then, you couldn’t just add it to your site, some other site hosted it
and that meant your guestbook was on some weird URL, which made me refuse it.

Now I can bring back that dream.

An even bigger reason is that a ‘comments component’ examples in the safe examples bundle.

Yet I can not get it work.
Here’s what I’ve tried:

I edited the following:

index.html

...
<div id="comments"></div>
--     <script src="/static/bundle.js"></script>
++    <script src="/build/non-editable-comments-v0.1.0.js"></script>
    <script type="application/javascript">
		window.safeComments('CommentTitle');
	</script>
...

and then started the application:

[folatt@MyComputer non-editable-comments-web]$ yarn install && yarn build && yarn start

What I except to see is the instructional index page with the ‘comments component’ at the bottom.

What I see is just the instructional index page and this error in dev tools:

dev tools error

invariant.js?7313:42 Uncaught Error: _registerComponent(...): Target container is not a DOM element.
    at invariant (invariant.js?7313:42)
    at Object._renderNewRootComponent (ReactMount.js?b62d:271)
    at Object._renderSubtreeIntoContainer (ReactMount.js?b62d:365)
    at render (ReactMount.js?b62d:386)
    at renderApp (index.js?8749:35)
    at (index):84

Is the example still up to date?
Should the component worked right out of the box on the index page after a build?
Am I doing this wrong?

I’m hoping someone can shed light on this.

[hunterlester]

When running yarn start, this webpack configuration is used to create a resource at /static/bundle.js, so index.html should not be altered.

However, there are two issues that we need to resolve.
First this property’s value should be cheap-source-map, or other non-eval option.

Second, the non-editable-comments-web app is still using the deprecated web API and needs to be upgraded in order to run in Peruse.