What is the solution for fixing the error "Uncaught SyntaxError: Cannot use import statement outside a module" while using Chart consoletvs/charts:7.* in Laravel 8?

I have successfully completed all the steps outlined in the documentation. When using CDN links, everything functions as expected and I am able to load any chart.

<script src="https://unpkg.com/chart.js/dist/Chart.min.js"></script>
<script src="https://unpkg.com/@chartisan/chartjs@^2.1.0/dist/chartisan_chartjs.umd.js"></script>

However, I have decided not to use the CDN links anymore. Instead, I removed those two lines mentioned above and installed the front-end adapter using npm install chart.js@chartisan/chartjs so that I can utilize charts without relying on CDNs. Below is my updated code:

 <div id="chart" style="height: 300px;"></div>

<script>
    import { Chartisan, ChartisanHooks } from '@chartisan/chartjs'//This line is causing an issue
    const chart = new Chartisan({
          el: '#chart',
          url: "@chart('sample_chart')",
          hooks: new ChartisanHooks()
          .beginAtZero()
          .colors()
          .datasets('doughnut')
    });
  </script>

Upon running this code, I encounter the following error:

Uncaught SyntaxError: Cannot use import statement outside a module
javascriptlaravellaravel-bladelaravel-testinglaravel-charts

Answer №1

Ensure you are importing the necessary dependencies in app.js instead of in the views folder.

Answer №2

To integrate Chartisan into your app, follow these steps in your app.js file:

import {Chartisan, ChartisanHooks} from '@chartisan/chartjs';
window.Chartisan = Chartisan;
window.ChartisanHooks = ChartisanHooks;

In your .blade file, simply use Chartisan and ChartisanHooks like so:

<div id="chart" style="height: 300px;"></div>

<script>
    const chart = new Chartisan({
        el: '#chart',
        url: "@chart('sample_chart')",
        hooks: new ChartisanHooks()
            .beginAtZero()
            .colors()
            .datasets('doughnut')
    });
</script>

Ensure that you properly include the app.js file in your .blade file for it to work correctly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieving information from AngularJS modal window

Seeking a solution to retrieve data FROM modal to invoking controller, as most examples only cover sending data TO the modal. What is the proper method for achieving this? Here is the form used within the modal: <form class="form-horizontal"> < ...

javascriptangularjstwitter-bootstrap

How can I retrieve the latest state of the Redux store in getServerSideProps in Next.js?

I am attempting to retrieve the most up-to-date redux state in getServerSideProps like so: export const getServerSideProps = async (ctx) => { const state = store.getState(); console.log(state.name); return { props: { login: false } }; }; H ...

javascriptreactjsreduxnext.jsserver-side-rendering

Retrieve the current URL upon page load

I'm currently attempting to parse the URL in document.ready() so I can retrieve the id of the current page and dynamically populate it with content from an AJAX call. However, I've encountered an issue where 'document.URL' seems to refe ...

javascriptjqueryajax

Vue Loader: Multiple loaders for a single file extension

Currently, I'm experimenting with incorporating SVG into my vue-loader/webpack template project. I'm in need of loading different types of SVGs: Icons: these are utilized within my components and loaded using svg-inline loader for customizatio ...

javascriptsvgwebpackvue.jsvue-loader

Determining the Clicked Button in React When Multiple Buttons are Present

Within my functional component, I have a table with rows that each contain an edit button. However, when I click on one edit button, changes are applied to all of them simultaneously. How can I identify which specific button was clicked and only apply chan ...

javascriptreactjs

The server encountered an error when attempting to load the resource at http://localhost/laravel_crud/public/showPosts?page=1. An Internal Server Error with a status code of 500 was returned

I am encountering an issue with Laravel 5.3. When I attempt to load pages from the database and navigate to the next page, I receive an alert stating that the data cannot be loaded. Can someone assist me in resolving these errors? Please. BlogController.p ...

jqueryajaxlaravelpagination

Tips for exporting data to a JSON file using the Google Play Scraper in NodeJS

Recently, I've been exploring the Google Play Scraper and I'm in need of a complete list of all appIds using NodeJS. The issue I'm facing is that it only outputs to console.log. What I really require is to save this output to JSON and then c ...

javascriptnode.jsweb-scrapinggoogle-play

Verification of Phone Numbers (Global)

I am attempting to create a validation check for mobile numbers, similar to the one implemented by Gmail. Check out Gmail's signup page here However, there is significant variation in phone number formats across different countries, making it challe ...

javascriptjqueryregexvalidation

A guide on how to associate data in ng-repeat with varying indices

Here is the data from my JSON file: var jsondata = [{"credit":"a","debit":[{"credit":"a","amount":1},{"credit":"a","amount":2}]}, {"credit":"b","debit":[{"credit":"b","amount":3},{"credit":"b","amount":4},{"credit":"b","amount":5}]}, {"credit":"c","debi ...

javascriptjsonangularjs

Unusual problem arises with styling and element measurement (scrollWidth / scrollWidth) in Gatsby framework

Currently, I am working on a component that splits lines based on the parent container's width without overflowing. Despite successfully implementing this in a sandbox or pure react application (even with custom fonts), I encountered issues when using ...

javascriptcssreactjsgatsby

ReactJS & MobX: Unusual TypeError Occurs - Functionality Issue?

This code snippet defines the SidenavStore.js, which determines if the Sidenav should be visible or not by default: const SidenavStore = types .model('SidenavStore', { isSidenavVisible: types.optional(types.boolean, true), }) .actions( ...

javascriptreactjsreact-routerjsxmobx

Issue encountered while retrieving information from XML file through AJAX

I am facing an issue while using AJAX to fetch data from an external XML file. The error I receive is "Invalid argument" and I am working with IE 8. Below is the code snippet: var xhr; xhr = new XMLHttpRequest(); xhr.open("GET","C:/Users/abc/Desktop/Pr ...

javascriptxmlajax

Ways to retrieve a list of identifiers from arrays at both initial and subsequent levels

I'm currently dealing with a JSON/JavaScript structure that looks like this: { "comments": [ { "id": 1, "content": "lorem ipsum", "answers": [] }, { "id" ...

javascriptjsontypescript

Refresh the redux state within the reactjs component and make use of it in the application

I am in need of assistance with opening a search aid, selecting a value, and retrieving it. After clicking on a button, I activate a search help where I choose data to store. However, I am unsure how to utilize this stored data upon returning. I aim to di ...

javascriptreactjsreact-redux

Having trouble importing a package into my React boilerplate

Having trouble importing the react-image-crop package with yarn and integrating it into a react boilerplate. Encountered an error after installing the package: Module parse failed: /Users/...../frontend/node_modules/react-image-crop/lib/ReactCrop.js Unex ...

javascriptnpmwebpackyarnpkgreact-boilerplate

Incorporate a JavaScript message using C# code in the backend

I am looking for a code snippet to execute a JavaScript function called recordInserted() that displays an alert, within the add_Click method in my code-behind file. Here is the relevant section of my code: protected void add_Click(object sender, EventArgs ...

c#javascriptasp.net

When the user presses the enter key to submit data, the Ajax page reloads

I am facing an issue with a simple form for sending messages from one person to another using AJAX method POST to prevent page reload. The problem arises when the user hits [ENTER] in the field, causing the page to reload instead of the AJAX working as int ...

javascriptajaxforms

What is the most efficient method for creating and adding an element in jQuery?

When it comes to appending div elements to a page, there are different approaches that can be taken. Let's explore two methods: $('#page123').append("<div id='foo' class='checkbox' data-quesid='foofaa'>&l ...

javascriptjqueryhtml

Creating an Http interceptor in Ionic 3 and Angular 4 to display a loading indicator for every API request

One of my current challenges involves creating a custom HTTP interceptor to manage loading and other additional functions efficiently. Manually handling loading for each request has led to a considerable increase in code. The issue at hand: The loader is ...

javascriptangulartypescriptionic2

Ways to ensure that JavaScript code is executed after making AJAX requests

Greetings! I must admit, I am still in the early stages of learning AJAX and dynamic web technologies. My current dilemma bears resemblance to a discussion thread I came across, but it seems to involve a framework, which I am not utilizing. Possibly relat ...

phpjavascriptajax