Develop Reference

Laravel 9 - using vite to do a js import within a blade template

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.

How to properly import THREE js library?

I installed the three library via npm. In the node_modules directory there is the three folder. But when I wanted to import it using:
import * as THREE from 'three';
it gives the following error:
ReferenceError: regeneratorRuntime is not defined
But when I use;
import * as THREE from 'three/build/three.cjs';
it properly works. Also, the same problem occurs while importing external plugins:
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
How can I fix this?

Three.js uses ES6 async/await, you need to upgrade or configure your babel presets to support async/await.
This may help
Babel 6 regeneratorRuntime is not defined

Make sure that you reference the correct path where your three.module is.
I'd try the following for a script being in the rootForlder/src/theScriptWhereYourImportIs.js:
import * as THREE from '../node_modules/three/build/three.module.js';
If the script is at the same hierarchy level as your node_modules folder then the following should work:
import * as THREE from './node_modules/three/build/three.module.js';
As far as I remember I had to make some trials and figure this out as it was not very clear in the documentation. Any insight will be welcomed.

"Uncaught SyntaxError: Cannot use import statement outside a module" When Importing ReactJS

Today I decided to try to learn React, but whenever I try to import the two modules below:
import React from "react"
import ReactDOM from "react-dom"
I get the error:
Uncaught SyntaxError: Cannot use import statement outside a module
Here's the steps I've taken to try to create my React program:
Install NodeJS
Add NodeJS to environmental variables
Create new folder for my program
Create HTML, CSS, and JS files in my folder
Why am I getting this error, and how can I fix it?

I assume this is your first time working with React? I see that you have installed NodeJs, which is great!
I recommend that you get started with a complete React app such as Create React App.
https://create-react-app.dev/

I am also new to react and using visual studio2022 to write the react code in MVC project. I created login page exactly same as https://github.com/narendra315/yt-210911-react-login-page/blob/master/src/LoginComponent2.js
and was getting same error as
Uncaught SyntaxError: Cannot use import statement outside a module
fixed it by removing the import as well as export line at the end. I replaced the export line with
ReactDOM.render(<LoginComponent />, document.getElementById('content'));
where LoginComponent is my class and content is id of my Index.cshtml page
This fixed my issue.

You need to add this to your package.json and it should work. If you are going to use es6 import statements you need to tell node you are using modules inside of your package.json like this.
"type": "module",

Error trying to import 'systemjs' to use import dynamically

I am trying to use SystemJS to import a module that lives on an external server. Having problems just getting started with importing systemjs so that I can use it in code.
import System from 'systemjs';
OR
import * as System from 'systemjs';
// System not found, error on line above trying to import systemjs as module.
System.import('https://test.com/modules/somemodule.js').then(module => {
// got the module
});
Neither work. This is all assuming its possible to use System.import(...) in code to import a module. Reading through the docs not really sure how to import systemjs.
Error:
Module not found: Error: Can't resolve 'systemjs'

importing js file in Vue project throws error

I am trying to use this plugin https://www.npmjs.com/package/mobius1-selectr
I did a npm install mobius1-selectr
and imported it in my main.js
import 'mobius1-selectr/dist/selectr.min.css';
import 'mobius1-selectr/dist/selectr.min.js';
but as soon I import I get this exception:
You must supply either a HTMLSelectElement or a CSS3 selector string.
which comes from the source of selectr.
Is the import not to be done this way in webpack / main.js?
What am I doing wrong? Any help is appreciated.

Yes your imports are incorrect. This library uses UMD to export Selectr constructor. You are using Webpack so default import in your case should work:
import Selectr from 'mobius1-selectr'