i can't make works this easy code to run webpack - javascript

i learn how to use webpack.
I wrote this code in my webpack.config.js
const path= require('path')
module.exports= {
entry:'./app/assets/scripts/App.js',
output: {
filename:'bundled.js',
path: path.resolve(__dirname,'App')
},
mode:'development',
watch: true,
};
I wrote this code in my package.json
{
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"devDependencies":{
"webpack": "^4.41.0",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.9.0"
}
and this is the code in my App.js
alert("Hello, this is just a test!");
i run npm run dev. i get no errors messages, but the javascript don't run in my index page. Please help me, i don't understand from where the problem comes.

after hours of trying,
it seems my index.html VisualCodeStudio started to now that bundled.js exist in proposing it via intellisens.
I delete also the main: index.js on my package.json.
Now its working, even if i didnt't yet clearly detected what was the problem initially.

Related

Stream module error when using Browserify

Problem
When trying to build my bundle.js file, I get the following:
Error: Can't walk dependency graph: ENOENT: no such file or directory, lstat 'C:\[filepath&filename]\stream'
required by C:\[filepath]\script.js
My package.json file is as follows:
{
"name": "[projectName]",
"version": "1.0.0",
"description": "",
"main": "script.js",
"scripts": {
"build": "browserify script.js -o bundle.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"browserify": "^17.0.0",
"crypto-js": "^4.1.1",
"stream-consumers": "^1.0.2"
}
}
High level, the code I'm trying to run is as follows:
var CryptoJS = require('crypto-js');
const { json } = require('stream/consumers');
function doSomething() {
}
doSomething();
What I've tried
I've tried a number of different recommended ways to fix this, including:
Adding './' - as recommended here which gives 'Cannot find module'
Deleting package-lock.json file and then installing the packages I wanted to install - as recommended here
This unblocked the issue for me.
It turned out that:
const { json } = require('stream/consumers');
wasn't required, so when I commented it out, it seemed to resolve the issue...

Program that works on Codepen.io couldn't run on Visual studio code

I completed a mini connect-4 game based on the Tic-tac-toe tutorial on Reactjs official website
Code:https://codepen.io/bunansia/pen/KKXXKje?editors=1010
I copied the html,css plus JS file and tried to run on VCS but failed
I have installed node.js, #babel/cli #babel/core #babel/preset-env #babel/preset-react have been installed, and this is how my package.json file looks like
{
"name": "react-connect4",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"build": "babel src/index.js --out-file public/scripts/index.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"#babel/cli": "^7.16.0",
"#babel/core": "^7.16.5",
"#babel/preset-env": "^7.16.5",
"#babel/preset-react": "^7.16.5"
},
"devDependencies": {
"#babel/plugin-transform-react-jsx": "^7.16.5"
},
"description": "",
"plugins": [
[
"#babel/plugin-transform-react-jsx",
{
"throwIfNamespace": false, // defaults to true
"runtime": "automatic", // defaults to classic
"importSource": "custom-jsx-library" // defaults to react
}
]
]
}
I have also created .babelrc file instructing where to find the preset
{
"presets": ["#babel/preset-env","#babel/preset-react"]
}
Have tried multiple ways like converting original JS file to babel version
"scripts": {
"build": "babel src/index.js --out-file public/scripts/index.js",
"test": "echo \"Error: no test specified\" && exit 1"
}
And I put them in the folder named "public", while js && css files are in the folder named "script"
But when I run it on live-server everything is blank
What can be the configuration issues?
I have added 2 lines in html file since I am using these two external scripts also
<script src="https://unpkg.com/react-dom#17.0.2/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/react#17.0.2/umd/react.development.js"></script>

Cannot find modules that have been installed locally by NPM

I am working on a tool and I have installed some modules locally through NPM, and I get errors when I try to require these modules through NodeJS. I am working in Windows 10, I have already tried setting up NODE_PATH etc.
Below is the structure of my files:
->project
---->node_modules
---->src
-------->css
-------->js
----------->index.js
---->package.json
---->index.html
I populate the index.html by using index.js etc.
Below is the code of my package.json:
{
"name": "bip39",
"version": "1.0.0",
"description": "A tool for converting BIP39 mnemonic phrases to addresses and private keys.",
"directories": {
"test": "tests"
},
"dependencies": {
"bip39": "^2.6.0",
"bigi": "^1.4.2",
"create-hmac": "^1.1.7",
"nem-sdk": "^1.6.7"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/PavlosTze/bip39.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/PavlosTze/bip39/issues"
},
"homepage": "https://github.com/PavlosTze/bip39#readme"
}
Below is my require() code:
var createHmac = require("create-hmac");
var BigInteger = require("bigi");
const bip39 = require("bip39");
const nem = require("nem-sdk").default;
I have done the following steps on NPM:
1) npm init
2) npm install bip39
3) npm install nem-sdk
4) npm install bigi
5) npm install create-hmac
All these files are inside the node_modules, but still, whenever I run the code in the browser I get an 'Error: Cannot find module "bip39"', etc. for all modules.
EDIT: On another directory that I have cloned the same tool, before I merged it with another one, I get no error and everything works correctly, including the require(). etc. Do you need any of those files as well?
Can someone help me please?
try this :
rm -rf node_modules
npm install

Grunt not using right JSON file

I am trying with Grunt to read environment specific JSON file. But it is always reading from the default.json file. Am I missing something?
Here is my code snippet for Gruntfile.js
var config = require('config');
var host = config.get('host');
console.log(host);
Here is my package.json
{
"name": "grunt",
"version": "1.0.0",
"description": "Test app",
"main": "grunt.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Me,
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-nodeunit": "~0.4.1",
"grunt-contrib-uglify": "~0.5.0",
"load-grunt-config": "^0.17.2",
"load-grunt-tasks": "^3.2.0"
}
}
I have
host=localhost in default.json and
host=someURL in production.json
Commands I am running in command line
$ set NODE_ENV="production"
$ grunt
localhost
Warning: Task "default" not found. Use --force to continue.
Aborted due to warnings.
I made it work. I was using SET instead of export for setting NODE_ENV.
$ export NODE_ENV=production

Command not found after npm link

I have a small node.js app "doto" that I want to npm link, so that I can just call doto anywhere. As of my understanding all I need to do is:
mkdir doto
cd doto
npm init #call the project doto and entry point doto.js
touch doto.js #fill with some code
npm link
node doto.js works just fine, but when I link the package and try to call doto, the command is not found. The linking went fine, I had to use sudo (yes I know I should setup node a way that I do not need sudo, but for now I just want to get my feet wet)
Whenever I install a package globally, I can call it just fine.
I am running mac os 10.10.
doto.js
#!/usr/bin/env node
var path = require('path');
var pkg = require( path.join(__dirname, 'package.json') );
var program = require('commander');
program
.version(pkg.version)
.option('-p, --port <port>', 'Port on which to listen to (defaults to 3000)', parseInt)
.parse(process.argv);
console.log(program.port);
package.json
{
"name": "doto",
"version": "0.0.1",
"description": "",
"main": "doto.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"commander": "~2.7.1"
}
}
What am I missing?
I think your package.json is missing the bin section, according to the docs it should become something like:
{
"name": "doto",
"version": "0.0.1",
"description": "",
"main": "doto.js",
// specify a bin attribute so you could call your module
"bin": {
"doto": "./doto.js"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"commander": "~2.7.1"
}
}
So after you've run sudo npm link you can run doto from anywhere, if you want to change the name of the executable just change the key under "bin" to whatever you prefer.
I tried npm link and it still was not working from my test package.
My package.json in the linked package had "directories": { "bin": "./bin" } instead of "bin": { "etc": "./etc.js" }.
Once I changed it back to "bin": {...} it started to work in the test package.
So, although this directories: { bin: ... } setting is documented it doesn't seem to work correctly with npm link.

Categories