npx webpack - Cannot read property 'minify' of undefined - javascript

I'm following the basic tutorial of webpack from this link : https://webpack.js.org/guides/getting-started/
when I run npx webpack it fails with the following error:
ERROR in main.js from Terser
TypeError: Cannot read property 'minify' of undefined
at minify (/Users/name/Documents/practice/webpack/webpack-demo/node_modules/terser-webpack-plugin/dist/minify.js:175:23)
at module.exports (/Users/name/Documents/practice/webpack/webpack-demo/node_modules/terser-webpack-plugin/dist/worker.js:13:40)
at handle (/Users/name/Documents/practice/webpack/webpack-demo/node_modules/worker-farm/lib/child/index.js:44:8)
at process.<anonymous> (/Users/name/Documents/practice/webpack/webpack-demo/node_modules/worker-farm/lib/child/index.js:51:3)
at process.emit (events.js:188:13)
at emit (internal/child_process.js:828:12)
at process.internalTickCallback (internal/process/next_tick.js:72:19)
node version: v11.6.0
npm version: 6.5.0-next.0
webpack version: 4.29.0
webpack-cli version: 3.2.1
folder structure
/dist
index.html
/node_modules
/src
index.js
package-lock.json
package.json
index.html
<!doctype html>
<html>
<head>
<title>Getting Started</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
index.js
import _ from 'lodash';
function component() {
let element = document.createElement('div');
element.innerHTML = _.join(['hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.29.0",
"webpack-cli": "^3.2.1"
},
"dependencies": {
"lodash": "^4.17.11"
}
}

It's a bug and you can fix it by installing terser v3.14
Simply run:
npm i -D terser#3.14
Source: https://github.com/vuejs/vue-cli/issues/3407#issuecomment-459985313

The solution:
npm install terser#3.14.1 --save-dev

Related

Why npm start not working after npm init?

I have initiated a new project with NPM :
npm init
I have installed the socket.io-client package.
package.json:
{ "name": "client", "version": "1.0.0", "description": "", "main": "script.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "socket.io-client": "^4.5.4" } }
script.js:
import { io } from "socket.io-client";
const socket = io('http://localhost:3000')
socket.on('connect', () => {
console.log('Hello - ' + socket.id)
})
The error I get:
npm ERR! Missing script: "start"
I have added the start command to package.json:
"start": "node script.js"
Now I get:
SyntaxError: Cannot use import statement outside a module
I have tried adding start command, and did not worked.
You can try one of these:
Add type="module" to whereever you import your script.
Add "type": "module" to your package.json file.
See more here: "Uncaught SyntaxError: Cannot use import statement outside a module" when importing ECMAScript 6

(postcss : not found) error I found when installing tailwindcss for my project

i want to use tailwind css with postcss but I have an issue with installation can anybody solve it?
my package . js is
{
"name": "ninja-food",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "postcss ./src/styles.css -o ./public/styles.css"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^10.4.8",
"postcss": "^8.4.16",
"tailwindcss": "^3.1.8"
}
}
afer tailwind init i didnot get postcss.config.js file so i have manualy create it and put code in it.
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
but i am again getting error that is saying postcss not found
install postcss using npm npm install postcss and run your project again.

How can I make the ESM work with electron in my project?

I've been trying fix for this a week now but can't really seem to find the problem.
I've followed this tutorial but instead of having that project structure I've my own (see image below)
In the esm.js:
require = require("esm")(module);
module.exports = require("./vickie.js");
Then i've changed vickie.js:
From const { app, BrowserWindow, ipcMain } = require('electron')
To import { app, BrowserWindow, ipcMain } from 'electron'
Then I got this error
In package.json:
{
"name": "vickie",
"type": "module",
"version": "0.0.1",
"description": "",
"main": "./vickie.js",
"scripts": {
"start": "electron ./vickie.js"
},
"author": "Arijanit",
"license": "ISC",
"devDependencies": {},
"dependencies": {
"dotenv": "^8.2.0",
"electron": "^8.2.3",
"electron-builder": "^22.5.1",
"esm": "^3.2.25",
"mysql2": "^1.7.0"
}
}
Why am I getting the error? Should I type in something extra in package.json to enable esm?
Thanks in advance
I created a build tool that lets you use ESM in your own Electron code and modules installed from npm:
https://github.com/mifi/build-electron
To use it:
yarn add -D build-electron concurrently wait-on
Put your Electron main ESM source code in src/main/index.js and preload source in src/preload/index.js.
Add to your package.json:
{
"main": "build/main.js",
"build": {
"files": [
"build/**/*"
]
},
"scripts": {
"start": "concurrently -k \"build-electron -d\" \"wait-on build/.build-electron-done && electron .\"",
"build": "build-electron"
}
Now create a configuration file in your project root build-electron.config.js:
module.exports = {
mainEntry: 'src/main/index.js',
preloadEntry: 'src/preload/index.js',
outDir: 'build',
mainTarget: 'electron16.0-main',
preloadTarget: 'electron16.0-preload',
}
Now you can start developing:
npm run start
And to build your production app:
npm run build && npm exec electron-builder --mac

I get a TypeError *.a.* using webpack

I get the following error: "TypeError: glm__WEBPACK_IMPORTED_MODULE_0___default.a.vec3 is not a function" using webpack importing any npm package (the example is 'glm') on firefox.
main.js is:
import glm from "glm";
alert(glm.vec3(1, 2, 3));
package.json are:
{
"name": "webpacktest",
"version": "1.0.0",
"private": "true",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"glm": "^1.0.0"
},
"devDependencies": {
"webpack": "^4.16.3",
"webpack-cli": "^3.1.0"
}
}
index.html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script src="dist/main.js" charset="utf-8"></script>
</html>
the file system is
webpackettest
dist
main.js
node_modules
...
src
index.js
index.html
package.json
package-lock.json
I followed the "getting started" guide of webpack with no success.
edited: main.js file, it does not have an "a" attribute, still get the exact same error
Fixed it, the problem was that I was using the wrong npm package. It should be "glm-js" not "glm".
By the way the correct way to import a package from webpack is:
import * as glm from 'glm-js';
instead of:
import glm from 'glm-js';

Error when running gulp for transcompiling es6 to es5

I have a simple javascript file like this:
'use strict';
const sentences = [
{subject: 'Javascript', verb: 'is', object: 'great'}
{subject: 'Elephants', verb: 'are', object: 'large'}
];
function say ({subject, verb, object}){
console.log(`${subject} ${verb} ${object}`);
}
for(let s of sentences){
say(s);
}
And i`ve installed gulp for transcompiling purposes. Here's my gulp file:
const gulp = require('gulp');
const babel = require('gulp-babel');
gulp.task('default', function(){
gulp.src("es6/**/*.js").pipe(babel()).pipe(gulp.dest("dist"));
gulp.src("public/es6/**/*.js").pipe(babel()).pipe(gulp.dest("public/dist"));
});
My javascript file is inside a 'es6' and a 'public/es6' folders. So when i run the gulp command, it should work, but it gives me these errors instead:
Joaos-MacBook-Air:chapter2 joaovictor$ gulp
[12:44:06] Using gulpfile ~/Desktop/javascript/chapter2/gulpfile.js
[12:44:06] Starting 'default'...
[12:44:06] Finished 'default' after 12 ms
events.js:141
throw er; // Unhandled 'error' event
^
SyntaxError: /Users/joaovictor/Desktop/javascript/chapter2/.babelrc: Error while parsing JSON - Unexpected ''
at JSON5.parse.error (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/node_modules/json5/lib/json5.js:50:25)
at JSON5.parse.word (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/node_modules/json5/lib/json5.js:378:13)
at JSON5.parse.value (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/node_modules/json5/lib/json5.js:478:56)
at Object.parse (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/node_modules/json5/lib/json5.js:491:18)
at OptionManager.addConfig (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/lib/transformation/file/options/option-manager.js:225:62)
at OptionManager.findConfigs (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/lib/transformation/file/options/option-manager.js:436:16)
at OptionManager.init (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/lib/transformation/file/options/option-manager.js:484:12)
at File.initOptions (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/lib/transformation/file/index.js:223:65)
at new File (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/lib/transformation/file/index.js:140:24)
at Pipeline.transform (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
What am i missing here?
I think some of the packages were not installed or compatible, regardless of that, you should make sure all dev-dependencies are installed , source code are available on Babel documentation website [https://babeljs.io/setup];
so your package.json file and .baberlc file should look like this:
{
"name": "nu",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.2.2",
"#babel/preset-env": "^7.2.3",
"gulp": "^4.0.0",
"gulp-babel": "^8.0.0-beta.2"
}
}
{
"presets": ["#babel/preset-env"]
}
so run your code...it should work just fine!!!

Categories

Resources