I'm trying to deploy an Api Rest that was build on NodeJS Express and when I try to make the deploy process, I got this error. I don't know hoy can I solve this:
The problem is that you are importing some modules in your app.js with the import function, but you can't do that because you are stating in your config to treat your js files as module, to import external modules inside ES modules you should use the following structure:
"import { something } from /path/to/module"
Let me know if it solved your problem!
Related
Vue 3 yarn serve stuck at 42% when I try to import an external js file into main.ts.
This is what causes the issue:
main.ts
import '#/assets/js/jquery.min.js';
No error just stuck at:
42% building 267/276 modules 9 active
/Users/mark/Documents/workspace/testapp/test-web/node_modules/html-entities/lib/surrogate-pairs.js
When I try to import any external js file I have the same issue.
As there is no error output as such, can anyone tell me what I'm doing incorrectly?
Did you put the jquery javascript file in that folder?
Try to add the dependence using package.json and import it like this example
https://www.npmjs.com/package/jquery
I see that you're using typescript because of your main.ts file and usually the app cannot compile js files when you are using typescript in your project
I'm refreshing my old and low knowledge on VanillaJS using the latest best practices i found.
I recently did a tutorial on NodeJS doing API REST with ExpressJs and one with Socket IO.
Now I want to practice a little before going to REACTJS.
So I started a little project
I do one without NodeJs - just JS into HTML view - using Objects.
I want to use modules from Npm. I want to try Fakerjs but when i want to import it i have a 403.
The path is correct, no error.
So i'm wondering if it's possible without Nodejs to import modules when doing VanillaJs?
Am i doing it wrong ?
The structure of the project is :
js/
main.js
class/
node_modules/
index.html
Main.js:
'use strict'
//Importation of modules
import faker from '../node_modules/faker'
//Importation of Class Folder
import { Crypto } from "./class/crypto.class.js";
console.log(faker);
faker.locale = 'en_US';
I have this error in console:
GET http://crypto-market-js.local:8282/node_modules/faker/ net::ERR_ABORTED 403 (Forbidden)
If i write : import faker from 'faker' (like with node js but it's a require instead) i have this : Uncaught TypeError: Failed to resolve module specifier "faker". Relative references must start with either "/", "./", or "../".
If you could give me a hand on that plz :)
Trying to import with require is not supported without NodeJS, because require is a node-specific function. When trying to import modules into Vanilla JS, my recommendation is to first link to ths script with the <script> html tag, and then add another script with import faker from 'faker'
Hope that clarifies your issue.
I'm trying to use a "build-less" process so I'm using a plain module script in an html file (following the Preact docs):
<script type="module">
import {
html,
render,
} from 'https://unpkg.com/htm/preact/index.mjs?module';
function App(props) {
return html`<h1>Hello ${props.name}!</h1>`;
}
render(html`<${App} name="world" />`, document.getElementById('root'));
</script>
I'm able to get the client socket.io working if I by-pass the module system and rely on the window global (note: I'm serving the html file from an http server that's been passed to socket.io's server and have /socket.io/socket.io.js automatically installed):
<script src="/socket.io/socket.io.js"></script>
<!-- in previous module script: -->
const socket = window.io();
socket.on('connect', () => {
console.log('socket id>>', socket.id);
});
I would like to import the socket.io client from an ES module. I know I could encapsulate the window use in my own JS file and then import that in the module script in my html, but I'm trying to do this instead and it isn't working:
import io from '/socket.io.js'; // after copying socket.io.js to my public dir
import { io } from 'https://cdnjs.cloudflare.com/ajax/libs/engine.io-client/3.5.0/engine.io.js'; // I have tried several variations of urls and what is imported
Judging by:
Uncaught SyntaxError: The requested module '/socket.io.js' does not
provide an export named 'default'
and by the "polyfill"ed (if that's the correct term) commonjs globals like module in the probably-webpack bundle which is socket.io.js - it is likely that there just is no support for ES modules for this library.
I will probably be facing this issue over and over so I have decided to go back to having a build step.
My question is - is there a way around this "3rd party libraries not supporting ES module imports out of the box"? Maybe with a little work on my part I can get around this and try completing a small project without a build step in development.
Is there a way around this "3rd party libraries not supporting ES module imports out of the box"?
Unfortunately no, at least not always. It is impossible for a browser to natively import something that is not an ES module. However, if you've got access to the original source code, and the source code itself is written as an ES module (and then transpiled/bundled), you can sometimes build ES modules out of it yourself.
In the case of socket.io, their repo hosts the source code in TypeScript, which makes use of import/export. Unfortunately, their code also makes use of require() and other npm packages, which ultimately means it cannot be trivially converted to an ES module.
currently my app does not use the firebase initialiseApp in the config, as it gets its config from <script src="/__/firebase/init.js"></script>.
Now, I am wanting to start using webpack, and so I will not be using that script anymore. However, I use multiple firebase enviroments for my app, and so this init.js is very useful, as I do not have to hard code the config inside a js file.
Is there any alternative from the provided init.js for module bundlers?
I'm trying to use strophe.js with relay-starter-kit. I checked out relay-starter-kit, added "strophe": "^1.2.2" to package.json and ran npm install.
I can't find how to import strophe without getting errors. If I just try import Strophe from 'strophe'; I get errors that webpack can't resolve strophe-polyfill. I added a resolve alias for that pointing to the main strophe.js file, but that hasn't helped (I just get a console message Uncaught ReferenceError: Strophe is not defined).
It looks like strophe has some weird module system (it mentions AMD in github but I thought that meant I could just require it, but apparently not). All the examples I've seen import it in an HTML file and clutter the global namespace. I need to use it from within react so I don't think that will work.
How can I import strophe to use in my es6 files?
Since I wasted hours of my life on this, here's the answer:
Include strophe in the HTML file with:
Edit server.js to make webpack expose strophe as a static path with:
app.use('/node_modules/strophe', express.static('node_modules/strophe'));
In the react component, there's no need to import strophe since it's now globally available. Instead just connect with, e.g.:
var connection = new Strophe.Connection("ws://" + server + ":5280/websocket/");
try to use import * as XMPP from strophe.js then call
var connection = new XMPP.Strophe.Connection(BOSH_SERVICE) to connect server