I created a separate file for a function and exported it to my main file to use by "import Header from "./Header.js";" but it is throwing error that "require is not defined" and "Module name "Header" has not been loaded yet for context".importingexportinghtml docconsole error
I expected the html code to run smoothly and display my web page but its all blank at the moment.
I think you should use
const Header = "./Header.js";
instead of import Header from "./Header.js"
Related
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
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'm trying to implement the Bootstrap 5 version of the Table Editor plugin of MDBootstrap, but the error that I get, has nothing to do with them, at least, not directly. This is my first time working with modules so bear with me. What I'm trying to achieve, is simple. This is the header of my importer js file:
import FocusTrap from './mdb/util/focusTrap';
import PerfectScrollbar from './mdb/perfect-scrollbar';
import { getjQuery, typeCheckConfig, onDOMContentLoaded } from './mdb/util/index';
import Data from './mdb/dom/data';
import EventHandler from './mdb/dom/event-handler';
import Manipulator from './mdb/dom/manipulator';
import SelectorEngine from './mdb/dom/selector-engine';
import tableTemplate from './table/html/table'; //eslint-disable-line
import { getModalContent, getModal } from './table/html/modal';
import {
search,
sort,
paginate,
getCSSValue,
formatRows,
formatColumns,
getRowIndex,
} from './table/util';
Great. Well, this code produces the browser error:
So of course, my JS plugin doesn't work because the browser doesn't find the imports. I suspects is because I'm not using the ~ at the start of the path to indicate that they resides under the wwwroot folder. However writing the ~ in front of the path, causes yet another error by the browser, saying, that's incorrect syntax.
So I'm stuck!!!
In case you are wondering, this is how my wwwroot looks right now:
And the Table Editor js file, which is the one that does the import, is right there alongside those folders:
What should I do in this situation?
Help :(
As the questions states, I loaded an external script by putting this line in index.html
<script type="text/js" src="../src/js/compress.js"></script>
And my compress.js is like this
import axios from "axios";
import Compressor from "compressorjs";
$(document).ready (function() {
console.log("asass");
});
My console shows,
Am I missing anything so obvious? Why does't console log messages show up?
It's not correct way to add external script into your react code.
your componnent
// src/path/Compressor.js
...
export default YourCompressor;
another file
// src/App.js
import YourCompressor from "./path/Compressor.js";
...
it's enough only and do not need to add your file external.
don't forget using import has error in browsers and you have to use bable for using reactjs.
I am trying to export node js modules to use in JavaScript. This is what I have done.
-Installed esm in node.
in my node file I did like this:
require = require("esm")(module/*, options*/);
export function Myjs(name, surname){console.log(name, surname)};
This does not give error.
In my js file I did:
1- import { Myjs } from '/javascripts/sockets/bases.js'; This gives error as "Uncaught SyntaxError: Cannot use import statement outside a module". I have been reading topics regarding this error, and it suggests that I should include "type: module" while including the file. But I do not include node js files as scripts on html.??
2- I try to import dynamically like this:
import('/javascripts/sockets/bases.js')
.then((module) => {
module.Myjs("bola", "carro");
});
This gives error if detects require() in the file and it gives error "require is not defined" or any node js module that js does not recognize.??
What I'm trying to achieve is: Based on an event on js file trigger the function (Myjs()) I'm trying to import. How could achieve this? I tried babel and I wasn't successful. Thanks