Context :
I'm trying to use Editor.js library for a personal project
Editor.js documentation
There is the project directory :
There is the package.json :
{
"name": "quicknoteapp",
"version": "1.0.0",
"description": "",
"main": "myApp.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron ."
},
"author": "",
"license": "ISC",
"devDependencies": {
"#editorjs/editorjs": "^2.19.0",
"electron": "^10.1.5",
"menubar": "^9.0.1"
}
}
My index.html :
<script type="module" src="main.js"></script>
And I import my library from main.js :
import EditorJS from '#editorjs/editorjs';
Finally, the console come up with this error :
TypeError: Module specifier, '#editorjs/editorjs' does not start with "/", "./", or "../". Referenced from file:///Users/charles/Desktop/QuickNoteApp/main.js
Ok, I need to add the relative path when I import the module. But I don't like to do it.
Why I need to use a relative path to an installed library ?
Why I can't do the same as the documentation? What I'm doing wrong during the project set up ? I don't think this is normal to add the path to each script. If not, why using npm... and got a node_module folder.
NPM is designed to manage packages for Node.js not for web browsers.
Web browsers are not Node.js. They do not support Node.js' module path resolution features (which involve searching multiple directories for matching files: Web browsers do not have access to directory listings, only to URLs).
The instructions assume you are using a tool like Webpack which uses Node.js to bundle JS modules into a single file for delivery to a browser. They don't assume you are going to load the modules into the browser directly.
Related
i had installed parcel with version number "parcel": "^2.0.0-rc.0" and json i mentioned like this
when i try to run the command npm start i am error like this
i want to call index.html page but it is showing like File extension must be .js, .mjs, or .cjs
How can i solve this issue ?
"name": "receipe-book",
"version": "1.0.0",
"description": "you can get your favourite receipe here",
"main": "index.html",
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html"
},
"author": "Somu Nelavalli",
"license": "ISC",
"dependencies": {
"parcel": "^2.0.0-rc.0"
}```
Server running at http://localhost:1234
× Build failed.
#parcel/core: Unexpected output file type .html in target "main"
H:\Somu Pracatice\Javascript\complete-javascript-course-master\complete-javascript-course-master\18-forkify\starter\package.json:5:11
4 | "description": "you can get your favourite receipe here",
> 5 | "main": "index.html",
> | ^^^^^^^^^^^^ File extension must be .js, .mjs, or .cjs
6 | "scripts": {
7 | "start": "parcel index.html",
The "main" field is meant for libraries. If you meant to output a .html file, either remove the "main" field or choose a different target name.
Thanks in Advance
The source of that error is the "main": "index.html" field in your package.json. According to the documentation, this field is intended to be used by library projects (e.g. npm packages that are consumed by others) - it tells parcel to output a commonjs JavaScript bundle at that location, which doesn't make sense for an html file.
Since it doesn't appear that you are developing a library, you can simply remove "main": "index.html", and it should work fine (see migration docs).
To specify the ouput directory for non-library projects, use the --dist-dir cli parameter instead (see docs).
Rename main to default in the package.json file.
{
"version": "1.0.0",
"description": "",
"default": "dist/index.html"
}
I have a library in folder common with package.json:
{
"name": "common",
"version": "1.0.0",
"main": "index.js",
"license": "MIT"
}
I have another project that uses this library, in folder article with package.json:
{
"name": "article",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"devDependencies": {
"webpack": "^5.1.3",
"webpack-cli": "^4.0.0"
}
}
Locally I did:
cd common
yarn link
cd ../article
yarn link common
This works fine I locally publish library and use it.
Now I want to deploy this project to CI, and I don't know how to make it work in another computer. Do I have to run this as a script, or is there a better way to use a local library.
If you don't want to create a module, you would want to get the code out to someplace like a repository so other env can access it. Perhaps try using it from git hub using the method from this article:
https://medium.com/pravin-lolage/how-to-use-your-own-package-from-git-repository-as-a-node-module-8b543c13957e
There is something called Yarn Workspaces: https://classic.yarnpkg.com/en/docs/workspaces/.
Basically in the root of your project you create a package.json file and add these properties in:
{
"workspaces": [
"common",
"article"
]
}
and run yarn install and now you can use these local libraries within your other projects.
I'm quite new to the deployment part of websites with npm packages in it. and I'm trying to temporarily host my website to surge.sh in order to share & test it. It's a simple html website with paper.js scripts in it. By just launching the index.html in chrome it works. When deploying to surge I get this error:
Failed to load resource: the server responded with a status of 404 (Not Found)
Uncaught ReferenceError: paper is not defined
at HTMLDocument.<anonymous> (leaf_generator.js:2)
Is there an extra action that I have to go through when deploying sites with node packages in it (in my case paper.js)? E.g. building the site first, like for react apps? Or is it a problem with how I'm using paper.js in the script?
Here's a bit of my code:
// package.json
{
"name": "leaf_generator",
"version": "1.0.0",
"description": "testing paperjs",
"main": "index.html",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "mark tension",
"license": "ISC",
"dependencies": {
"focus-visible": "^4.1.5",
"mathjs": "^6.0.2",
"p5": "^0.8.0",
"paper": "^0.12.1",
"underscore": "^1.9.1"
},
"devDependencies": {
"gh-pages": "^2.0.1"
}
}
From index.html I import paper.js and my paper.js script like this:
<script type="text/javascript" src="node_modules/paper/dist/paper-full.js"></script>
<script type="text/javascript" src="js/leaf_generator.js"></script>
And these are the first lines of the .js paper script from where the error is thrown:
$(document).ready(function() {
paper.setup("myCanvas");
with (paper) {
""""""""" paper.js code """"""""""""
}
Thanks!
The quick answer is that Surge.sh ignores the node_modules directory by default. If node_modules is in your .gitignore file (as it probably should be), they will also not be available on GitHub Pages. You’re right that as typically a build tool or static site generator will take all your dependencies and bundle them into build files.
Building on the comments, a couple of options of how you could fix your problem quickly:
Option 1: Use the unpkg service for your npm dependencies for now
One option is to use something like Unpackage, which will give you a pre-built and hosted version of your dependencies, directly from npm:
<script type="text/javascript" src="https://unpkg.com/paper#0.12.3/dist/paper-full.js"></script>
I prefer to link to a specific version, but you do also have the option of always using the latest version from npm by linking to https://unpkg.com/paper
Option 2: Un-ignore the node_modules folder on Surge
Alternatively, you can decide to publish your node_modules folder to Surge by adding a Surge ignore file and restoring that folder: https://surge.sh/help/ignoring-files-and-directories
Inside the folder you are deploying, create a fill called .surgeignore, and add:
!node_modules/
Option 3: Set up a build tool
As mentioned in the comments, you can set up Webpack or a similar tool to package Paper.js and your other JavaScript together, but that might be more than you need to bother with depending on where you’re at with your project.
_____ Project description _____
I started my Typescript & React project as a web app and I am currently in the process of converting that fully to an Electron app. I am having some trouble with this though.
_____ Where I am currently at _____
I followed this tutorial to get Electron to work. It works fine, other than that the electron.js file (in the tutorial called main.js, I placed it in my src folder, not the public folder) is a javascript file. This does not hinder my application from running, but I'd prefer having it in Typescript format. That is what I am stuck on. I converted it to a Typescript file, but I can't point to that from my package.json config.
_____ Problem Description _____
From my understanding, the main property in package.json needs to point to this electron.ts file. But of course, the file does not get processed correctly because it is not a javascript file.
_____ Question _____
How can I somehow point to the electron.ts file? Where does the transpiled code, generated on runtime, reside? Perhaps I could point the main property to there?
_____ package.json _____
...,
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom",
"electron-dev": "concurrently \"BROWSER=none npm run start\" \"wait-on http://localhost:3000 && electron .\"",
"electron-pack": "build -- em.main=build/electron.js",
"preelectron-pack": "npm run build"
},
"main": "src/electron.ts",
"homepage": "./",
"build": {
"appId": "com.example.electron-cra",
"files": [
"build/**/*",
"node_modules/**/*"
],
"directories": {
"buildResources": "assets"
}
},
...
I made a boiler plate starter pack which contains many applied bug fixes that I had to face when using react with electron and typescript and has auto monitoring of typescript changes to reload the electron app for faster development.
https://github.com/nateshmbhat/electron-react-ts-starter/
It works fine with Create react app and no need of ejecting it .
The fastest route that I found to getting typescript up and running was with electron-webpack.
With the add-ons, it's got your requirements covered. I've used this to great success for an electron-react-redux application.
I built an npm module named emeraldfw and published it. My package.json file is
{
"name": "emeraldfw",
"version": "0.6.0",
"bin": "./emeraldfw.js",
"description": "Emerald Framework is a language-agnostig web development framework, designed to make developer's lives easier and fun while coding.",
"main": "emeraldfw.js",
"directories": {
"example": "examples",
"test": "test"
},
"scripts": {
"test": "mocha"
},
"repository": {
"type": "git",
"url": "git+https://github.com/EdDeAlmeidaJr/emeraldfw.git"
},
"keywords": [
"web",
"development",
"framework",
"language",
"agnostic",
"react"
],
"author": "Ed de Almeida",
"license": "MIT",
"bugs": {
"url": "https://github.com/EdDeAlmeidaJr/emeraldfw/issues"
},
"homepage": "https://github.com/EdDeAlmeidaJr/emeraldfw#readme",
"devDependencies": {
"jshint": "^2.9.4",
"mocha": "^3.3.0"
},
"dependencies": {
"jsonfile": "^3.0.0",
"react": "^15.5.4",
"vorpal": "^1.12.0"
}
}
As you may see, I declared a "bin": "./emeraldfw.js" binary, which corresponds to the application itself. The package.json documentations says this is going to create a link to the application executable at node.js bin/ directory. This worked fine, but when I install it globally (npm install emeraldfw -g) and then run it from the command line I receive an error messsage
All other node modules are working fine and my application is passing in all tests and when I run it directly inside the development directory (with node emeraldfw.js) it works really fine.
I'm not a node.js expert and after having fought this error for two days, here I am to ask for help.
Any ideas?
EDIT:
I checked the permissions for my node binary (emeraldfw.js) and it belongs to edvaldo:edvaldo, my user and group. And it is with executable permissions set. I should have no permission issues inside my own area with these settings, don't you think?
Well, shebang issue here.
Before creating npm modules, you need read every single line of it's documentation.
As it stated here you need to use shebang to let your operating system know that it should run with node instead of operating system's own script execution hosts.
Please make sure that your file(s) referenced in bin starts with
#!/usr/bin/env node, otherwise the scripts are started without the node executable!
So, by using shebang on an npm module, you tell the os to create platform specific executables which let it use node to run the script. A .cmd file on Windows for example.
Have you try to install as su?