Syntax Error: Unexpected Token Export

nebhead commented 4 years ago

Not sure if this is the right place to ask for help, but I'm trying to integrate the latest circliful script into my Flask/Bootstrap themed project but it doesn't seem to be working out for me. I suspect it's my issue, but maybe others are experiencing it too.

I've moved the following into my directory structures:

from:

/dist/circliful.js
/dist/main.css

to:

/static/js/circliful.js
/static/css/main.jss

Here's my code invoking circliful once:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}" type="text/css" />

        <!-- Circliful CSS -->
        <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}" type="text/css" />

        <!-- Adding a Favicon -->
        <link href="{{ url_for('static', filename='img/favicon.ico') }}" rel="icon" type="image/x-icon" />

    <!-- WebApp Manifest -->
    <link rel="manifest" href="{{ url_for('manifest') }}">

    <title>App History</title>

  </head>
    <body>

        <!-- Navbar Header -->
        <nav class="navbar sticky-top navbar-dark bg-dark">

            <a class="navbar-brand" href="#">
                <img src="{{ url_for('static', filename='img/launcher-icon-1x.png') }}" width="30" height="30" class="d-inline-block align-top" alt="">
                <b>AppName</b></a>

                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="nav navbar-nav mr-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="#">Dashboard</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/recipes">Recipes</a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="/history">History <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/settings">Settings</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/admin">Admin</a>
                        </li>
                    </ul>
                </div>

        </nav>

        <br>

        <div class="container theme-showcase" role="main">
            <br>
                <div class="row">
                    <div class="col">
                        <div class="card">
                            <div class="card-header bg-primary text-white"><h5><i class="fas fa-history"></i> History</h5></div>
                    <div class="card-body">
                                <div id="MyCircle"></div>
                    </div> <!-- End of card body -->
                    <div class="card-footer bg-light">
                        <button type="button" class="btn btn-outline-primary">Button</button>
                    </div>
                        </div> <!-- End of Card -->
                    </div> <!-- End of Column -->
                </div> <!-- End of Row -->

        <br>
        <br>
        <br>
    <!-- JavaScript -->
    <!-- jQuery first, then Bootstrap JS -->
    <script src="{{ url_for('static', filename='js/jquery-3.4.1.js') }}"></script>
    <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/circliful.js') }}"></script>
    <script src="{{ url_for('static', filename='js/Chart.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/all.js') }}"></script>
    <script>
        circliful.newCircle({
            percent: 80,
            id: 'MyCircle',
            type: 'simple',
            foregroundCircleWidth: 10,
            startAngle: -180,
            backgroundCircleWidth: 10,
            text: '100°F',
            textReplacesPercentage: true,
                strokeLinecap: "round",
        });
    </script>

</body>
</html>

Chrome reports: Uncaught SyntaxError: Unexpected token 'export' in the developer console.

When I dig into that error, I see at the very end of the file:

]);
export default circliful;
export {circliful};

Chrome is highlighting 'export default circliful;' as the error.

I am sure I'm not doing something right, help would be appreciated!

Thanks, Ben.

nebhead commented 4 years ago

FYI, I removed the last two export lines from the .js and it seems to be working now. If that's an acceptable solution, I think we can close this. However, maybe add to the documentation that if you are using the minified versions directly in your project you may need to remove.

pguso commented 4 years ago

sorry for the inconvenience, removed the export lines.

nebhead commented 4 years ago

Thank you!

Now I have weird behavior with another page where I have a section of the page refreshing... causing the whitespace to be added on each refresh underneath the circle. Still debugging.

pguso commented 4 years ago

I added your code here https://jsfiddle.net/jy3146ck/1/ what do you mean with "on each refresh"?

nebhead commented 4 years ago

Actually probably a totally different unrelated issue.

On another page (my index.html page), I have three circles displayed that I want to periodically refresh. The circles are defined in a separate data.html file, in Githubissues.

Githubissues is a development platform for aggregating issues.

pguso / js-plugin-circliful

Syntax Error: Unexpected Token Export #168