I try this in renderer.js
import * as math from './math.js'
I get error: Uncaught SyntaxError: Cannot use import statement outside a module
Thanks to comment I solve this.
I add type="module" and change to
const math = require("./math.js")
Related
I want to import react in ejs it shows cannot use import statement outside module.
import React from react
When I execute this ^^^ I get error cannot use import statement outside module.
const {React} = require("react")
When I run this ^^^ it gives me error require is not defined...
You need to set your script type as module to be able to use import statement / ES Module :
If you are using node.js, you have to edit your package.json and set :
{
"type": "module",
}
Else, if you import your js script from an html balise you have to set (almost the same thing) :
<script src="app.js" type="module" ></script>
This will enable the use of import inside app.js
this is the first time I'm using modules. I've read some tutorials and googled all over but haven't found a solution to my problem.
I have these files with the following code:
index.html
<script type="module" src="~/js/fight.js"></script>
<script type="module" src="~/js/queue.js"></script>
fight.js
$(document).ready(() => {
import { test } from './queue.js';
console.log(test);
})
queue.js
export let test = 'queue file has loaded';
And I get this error: Uncaught SyntaxError: Unexpected token '{'
I'm using live server from Visual Studio, Chrome 83.
Any ideas will be appreciated!
That's how it should be and make sure to import jQuery as well unless you've removed for brevity because $(document).ready wont work
import { test } from "./queue.js";
$(document).ready(() => {
console.log(test);
});
I am building a desktop application using Electorn and angular 8. I am trying to import a javascript file in index.html which has content like the following.
import ipcRenderer from 'electron';
import {
START_NOTIFICATION_SERVICE,
NOTIFICATION_SERVICE_STARTED,
NOTIFICATION_SERVICE_ERROR,
NOTIFICATION_RECEIVED,
TOKEN_UPDATED,
} from 'electron-push-receiver/src/constants';
So when I use the above code I get error Uncaught SyntaxError: Unexpected identifier.
and When I use following code I get Uncaught ReferenceError: require is not defined
const { ipcRenderer } = require ('electron')
const {
START_NOTIFICATION_SERVICE,
NOTIFICATION_SERVICE_STARTED,
NOTIFICATION_SERVICE_ERROR,
NOTIFICATION_RECEIVED,
TOKEN_UPDATED,
} = require ('electron-push-receiver/src/constants')
What could be the solution?
All the angular imports work with first snippets above. they do not have require. So I am assuming the first snippet should work as I am importing it in angular.
I am importing the file by specifying the following in the angular.json file.
"scripts": [
"../path/to/.js",
]
For that import for the ipcRenderer to work you have to establish it like so:
import { ipcRenderer } from "electron";
ipcRenderer being a module that you are pulling out of the electron library.
Trying to use materializecss with webpack. What I want to do is to import only the required Modules not all of the js. Loading the complete js is working as expected. But if I only want to use a modal, I cant find out how to do it.
I tried
import 'materialize-css/js/modal.js';
result: Uncaught ReferenceError: cash is not defined
Then I tried:
import 'materialize-css/js/cash.js';
import 'materialize-css/js/component.js';
import 'materialize-css/js/global.js';
import 'materialize-css/js/anime.min.js';
import 'materialize-css/js/modal.js';
Result: modal.js:24 Uncaught ReferenceError: Component is not defined.
I wonder if there is a way to use materializecss in a modular way with webpack?
Many Thanks in advance
This is what I ended up doing:
import {
Modal,
Dropdown
} from 'materialize-css';
document.addEventListener('DOMContentLoaded', function () {
var modals = M.Modal.init(document.querySelectorAll('.modal'), {});
var dropdowns = M.Dropdown.init(document.querySelectorAll('.dropdown-trigger'), {});
});
Import the components you want to use and initialize them individually.
I am getting error while using html-to-react parser in ReactJS
I am getting an error
" _htmlToReact.HtmlToReactParser is not a constructor".
I have imported the 'HtmlToReactParser' as
import {HtmlToReactParser} from 'html-to-react'
With the ES6 style of import you need to import it as
import {Parser as HtmlToReactParser} from 'html-to-react'.
Which is an equivalent of
var HtmlToReactParser = require('html-to-react').Parser;
in commonJS as was metioned in the DOCS