25+5 and codepen problem, help needed, frustrated

JavaScript
1

Hello, i’m trying to finish the 25+5 clock project but i have some troubles with codepen https://codepen.io/Terrachad/pen/xxzeWvj , i’ve already used the tricky way to overcome codepen problem of exports with <script>var exports = {};</script> but on step 11 i get console errors like Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' 'nonce-LMutWcppeEw='blabla'. Either the 'unsafe-inline' keyword, a hash ('sha256-dAMs3/Yp2SSUrhzjwbwLmPPB0soj/thHemUrM4u00O8='), or a nonce ('nonce-...') is required to enable inline execution. so i really dont know what to do, i’ve already tryed https://codesandbox.io/ but on this sandbox i get “labels.entries is not a function or its return value is not iterable” from importing bundle, what should i do?

2

I don’t understand this:

export default App

Why are you trying to export that? In codepen, you shouldn’t be exporting anything. In codepen, your JS is automatically loaded into your app for you. This is necessary in other configurations, like if you are using webpack or some other bundler and have your JS in different files/modules. Codepen doesn’t work that way.

As to the app itself, I think things like accurateInterval is making things unnecessarily complex.

And your App component is trying to do everything. It is a “god” component, trying to do everything. Part of the elegance of React is breaking things into sub components - both to keep things small and for reusability.

Based on your JSX, I would expect to see something like:

App
  Readout
  Break
    Display (break)
      Readout
      Controls
        Button
        Button
    Display (session)
      Readout
      Controls
        Button
        Button
    Timer
      Controls
        Button
        Button

or something like that. There is more than one way to organize and break it up, but it should be broken up and some of those should be reusable, like the Button components, perhaps in a reusable Buttons container.

What you are trying to do with exporting and with:

<script>var exports = {};</script>

seems very odd to me. I’m not sure how to fix that and I’m not sure if it should be fixed.

3

I really appreciate time what you’ve dedicated to answer me, but i’ve already tryied it without export default app part, it has nothing to do with it, you can see details why i did so here: module - Typescript ReferenceError: exports is not defined - Stack Overflow, and everything is working fine if done manually, but the problem is in the tests it self, i get console error only with fcc bundle, anyway, thanks for your time!

4

The point is that:

export default App

is not how codepen works.

And

<script>var exports = {};</script>

is not … Well in 5 years as a professional React developer, I’ve never seen anyone have to do that. I’ve reviewed several timer apps and never seen that. It sounds like a hack and one that may not be compatible with codepen.

I think you need to rethink some things. Yes, if you keep pounding, you may eventually get that square peg in a round hole. I don’t know what you would learn from that, though.

5

Thank you again, i’ll rewrite it completely today, i get the point, but i was anyway wondering what is wrong with my code, you’ve said, everything is wrong, so that’s the way, cheers, i’ll try again :smile:

6

I wouldn’t say that “everything is wrong”. Large sections of your code and logic can be reused.

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.