I am creating a simple node.js app that uses chart.js for some visualisations but when trying to import and use Chart I am getting errors.
I used npm to install chart.js and served it to the client with:
app.use('/scripts', express.static(path.join(__dirname, 'node_modules/chart.js/dist')))
I am using pug as a rendering engine and have imported the scripts:
script(type="module" src="./scripts/chart.js")
script(src="/scripts/index.js")
Then in the index.js file when I try and import the chart module using:
import { Chart } from './chart.js/auto';
I get an error:
SyntaxError: Unexpected token '{'. import call expects exactly one argument.
Removing the curly braces doesn't work either.
I can see the chart.js scripts are included in the sources of the page but it will not load into the script I have tried omitting the import as I saw that inline scripts do not need this however that produces another error saying that it cannot find the variable Chart
Unsure what I am doing wrong, whether it be with serving the files or with the client-side import.
Solved
I used a different link in the script tag. Instead of /chart.js I used /chart.umd.js.
script(src="/scripts/chart.umd.js")
Then I was not required to use any-side import statement in the client side index.js file
Related
I am trying out Laravel 9 with Vite, but without(!) a frontend framework (like Vue or React).
I am trying to make a reusable js module that I could use/load in different Blade templates.
So I created a file 'menu-btn-toggle.js' in 'resources/js/components/utilities'.
export class MenuBtnToggle
{
constructor() {
console.log('MenuBtnToggle');
}
}
I then created a 'utilities.js' file in 'resources/js/components'.
import './utilities/menu-btn-toggle';
I then updated the 'app.js' file in 'resources/js'
import './bootstrap';
import './components/utilities';
import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();
So far, this seems to be working (?). Atleast, i think so. Vite is not giving me any errors so far (yay!)
But then I try to import the module in a blade template, but I can't get it to work.
So at the bottom of my blade template, I added this:
<script type="module">
import MenuBtnToggle from 'menu-btn-toggle';
new MenuBtnToggle();
</script>
But this gives me the following error:
Uncaught TypeError: Error resolving module specifier “menu-btn-toggle”. Relative module specifiers must start with “./”, “../” or “/”.
But when I add one of the examples, the error changes to:
Loading module from “[local_dev_url]/menu-btn-toggle” was blocked because of a disallowed MIME type (“text/html”).
as it isn't be able to find the module. It returns a 404.
Is it even possible do to want I want without a frontend framework? Or am I not seeing something obvious? I have experience with php, unfortunately not (enough) with Laravel and Vite.
I was stuck into almost same situation where we are not able to use import statement inside our blade files using Vite. We commonly get
Uncaught TypeError: Error resolving module specifier
“menu-btn-toggle”. Relative module specifiers must start with “./”,
“../” or “/”.
or We get 404 Blocked error nearly same as
Loading module from “[local_dev_url]/menu-btn-toggle” was blocked
because of a disallowed MIME type (“text/html”).
When importing external npm packages or modules, we need to put them in windows object just like you did above for Alpine
window.Alpine = Alpine;
But for your specific case problem you must do following
1)Inside menu-btn-toggle.js
export class MenuBtnToggle
{
constructor() {
console.log('MenuBtnToggle');
}
}
2)Inside utilities.js
import {MenuBtnToggle} from "./utilities/menu-btn-toggle";
window.MenuBtnToggle = MenuBtnToggle;
And then finally inside your app.js
import './components/utilities';
Now inside your .blade file, there is no need to import the MenuBtnToggle
instead just do it like
new MenuBtnToggle();
No need to use import MenuBtnToggle from 'menu-btn-toggle'; in blade.
Important thing is to import your app.js file properly inside .blade file through vite
#vite(['resources/css/app.css','resources/js/app.js'])
And it works. It has worked when reproducing same files/setup as yours.
I am trying to convert my vue js app into a PWA. Following the workbox documentation in the following link:
https://developers.google.com/web/tools/workbox/modules/workbox-strategies
I have to import some modules
import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate } from 'workbox-strategies';
import { Queue } from 'workbox-background-sync';
After running npm run build, vue js automatically generates the following line of code which is at the top of service-worker.js file followed by the imports mentioned above:
importScripts("/precache-manifest.f6666fe9d8f679ee90db8a98ef900aa4.js", "https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
My app is fully functional without any errors, if I remove the imports, the service worker is registered successfully. When i add the imports I am getting this error:
Uncaught SyntaxError: Cannot use import statement outside a module
Error during service worker registration: TypeError: Failed to register a ServiceWorker for scope ('http://127.0.0.1:8887/') with script ('http://127.0.0.1:8887/service-worker.js'): ServiceWorker script evaluation failed
From my research I have learned that the scripts need to be bundled using webpack or a similar service.
https://developers.google.com/web/tools/workbox/guides/using-bundlers
However since I am using the CDN to importScripts, according to my understanding it should automatically bundle as stated in the following website:
https://developers.google.com/web/tools/workbox/modules/workbox-sw
It's an either-or thing: if you have full control over your build a bundling process, then following the "Using bundlers with Workbox" guide and using the ES module import {...} from '...' syntax, but not using workbox-sw, would work.
If you don't have full control over your build process (and it sounds like you don't), then you can use workbox-sw to load the rest of Workbox. Since you already have the importScripts('/path/to/workbox-sw.js') in your service worker, using statements like workbox.routing.registerRoute() or workbox.strategies.registerRoute() in your service worker, and not putting in any import {...} from '...' statements, should just work.
I get: Uncaught SyntaxError: Cannot use import statement outside a module
Whenever I try to use import x from y statements in the background script of my Cross browser extension TabMerger.
The reason I need to import is to separate functions & helpers from invocations as I want to test the background script.
My current file structure (differs from GitHub) is:
public/
background/
background_functions.js
background_helpers.js
background.js <--- error happens here when I import from ./background_functions.js & ../../src/components/App/App_functions.js
src/
components/
App/
App_functions.js
I've tried everything I could think of, such as using require instead of import but that causes an undefined error on require. I want to avoid adding libraries like require.js since they are pretty heavy compared to my extension. I also tried using an HTML page to call background.js as a module (explained here) with no luck.
I am using a function to split words into syllables in Javascript within my ASP .NET MVC project, and am trying to implement the map function within my js file. When I type out the function, it recognizes it as a real function, and does an auto import from jquery that looks like this:
import { map } from "jquery";
When I run that, I get the error "Uncaught SyntaxError: Cannot use import statement outside a module". So I spent a while researching that, and read a post where it said you had to add type="module" to your script import within the view. So I ended up with this:
<script src="~/Scripts/sentence.js" type="module"></script>
After I tried to run it with the type identified, I get the error: "Uncaught TypeError: Failed to resolve module specifier "jquery". Relative references must start with either "/", "./", or "../"."
When I researched that for a while, I found an article that said you had to import them like this:
import $ from './libs/jquery/dist/jquery.js' or
import $ from '/js/libs/jquery/dist/jquery.js'
and I get the error: "GET https://localhost:44352/js/libs/jquery/dist/jquery.js net::ERR_ABORTED 404"
Now I am kind of lost. I feel like it should not be this difficult to use a simple function like map(), but here I am. Can anyone give any advice or a path that I should follow to figure this out? Thanks!
The articles/documentation that tells you to import from a relative or absolute url are assuming you actually have your own copy of the library at that relative or absolute url. You can then solve your problem by including your own copy of jquery in your project. If you don't want to deal with managing the jquery dependency locally, you can always import the library from a cdn link:
import { map } from "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js";
I want to add some functionality to my existing website with React.
I followed this tutorial. I came to a point where I wanted to separate classes from single js file to one for each class.
Then I used
import InputField from './InputField';
Which gave me this error:
Uncaught SyntaxError: Unexpected token import
When I imported my classes the same way in an example which was created via this tutorial, it worked perfectly.
I also tried with require(), but that gave me an error message saying that require() is not defined.
So how to divide classes from single file to multiple files on an existing website that has React as an addition? Am I forced to write all code in one file, if I just add React to website? I suspect, that it does not compile as it somehow should. (I am just starting with React)
You either have to use native ES modules or use a bundler like webpack or Rollup