Js compress by uglify-js give error Unexpected token: name ($) - javascript

I am compress my js files by uglify-js
I want to compress Bootstrap 4 js file but it give me Error like this.
Can I compress all js files by only uglify-js Or how can i do it.
Parse error at src\bootstrap\alert.js:1,7
import $ from 'jquery'
^
ERROR: Unexpected token: name ($)
my package.json
"devDependencies": {
"node-sass": "^4.6.1",
"nodemon": "^1.12.1"
},
"dependencies": {
"autoprefixer": "^7.1.6",
"jquery": "^3.2.1",
"postcss-cli": "^4.1.1",
"uglify-js": "^3.1.9"
}

Try using the ES6 version of uglify-js. Replace with this in your package.json
"uglify-js": "git+https://github.com/mishoo/UglifyJS2.git#harmony"
or via command line:
npm install --save uglify-js#github:mishoo/UglifyJS2#harmony

uglify-js does not support ES2015 syntax like import statements or arrow functions. Instead, use the uglify-es module:
- "uglify-js": "^3.1.9"
+ "uglify-es": "^3.1.9"

Related

Error: Debug Failure. False expression: Non-string value passed to `ts.resolveTypeReferenceDirective`,

I don't know why am I getting the following error which say:
Error: Debug Failure. False expression: Non-string value passed to `ts.resolveTypeReferenceDirective`, likely by a wrapping package working with an outdated `resolveTypeReferenceDirectives` signature. This is probably not a problem in TS itself.
When i try to import the package inquirer in my nodejs application.
console.log("Hello world!");
import inquirer from "inquirer";
....
To run the application I'm using ts-node and I'm running it as follows:
ts-node index.ts
This is my package.json file:
{
....
"dependencies": {
"chalk": "^4.1.2",
"cors": "^2.8.5",
"cross-fetch": "2.6.1",
"dotenv": "^16.0.1",
"inquirer": "^8.2.4",
"ts-node": "^10.8.1",
"typescript": "^4.7.3"
},
"devDependencies": {
"#types/chalk": "^2.2.0",
"#types/cors": "^2.8.12",
"#types/inquirer": "^8.2.1",
"#types/node": "^17.0.42",
"nodemon": "^2.0.16",
"ts-node-dev": "^2.0.0"
}
....
}
I've tried to change the versions of inquirer and typescript but still it did not work.
What can be possibly the problem.
I have met with the same error but in my case I had no ts-node dependency installed, I fixed the error by adding that dependency.
You can also try to run your application with npx, in your case that will be npx ts-node index.ts.

Error TS2305: Module #types/angular has no exported member 'cookies'

I am having an issue with cookies not being defined in angular scope.
npm run start builds and starts the app just fine,
but when trying to run npm test that executes jest command, I am getting this error:
`Test suite failed to run app/components/Component1/Component1.ts:1:10
error TS2305: Module '"../../../../../node_modules/#types/angular"' has no exported member 'cookies'.`
in Component1.ts there is this import: import { cookies } from 'angular';
Build and run - ok.
Testing - not ok.
If you know where the issue can be hidden, please help :) Thank you.
my package.json:
{
"dependencies": {
...,
"angular": "^1.8.0",
"angular-cookies": "1.8.0",
"babel-polyfill": "^6.2.0",
...
},
"devDependencies": {
"#types/angular": "^1.8.0",
"#types/angular-cookies": "^1.8.0",
"#types/jest": "^26.0.19",
"angular-mock": "^1.0.0",
"angular-mocks": "^1.8.2",
"angularjs-jest": "^0.1.4",
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"jest": "^26.6.3",
"ts-jest": "^26.4.4",
...
}
}
solution for my issue was adding angular-cookies to tsconfig.test.json file.
I still do not understand why angular-cookies since source code and production build is taking types and definitions from angular package (and through IDE I can link to angular module rather than angular-cookies).
But that's life is all about - mysteries.
{
"extends": "./tsconfig.json",
"compilerOptions": {
"types": [
"node",
"jest",
"angular-cookies" --> THIS VERY LINE SOLVED MY ISSUE
]
},
"include": [
"index.d.ts",
"**/*.test.ts"
]
}

Gulp throws error 'Must use import to load ES Module'

We're converting our gulpfile.js in node v13.8.0 to ES6 as following:
import { src, dest, series, parallel, watch } from 'gulp'
import nodemon from 'gulp-nodemon' // normal nodemon does not display an error on app crash
import env from 'gulp-env'
import browser from 'browser-sync'
import sass from 'gulp-sass'
// Tasks
export default {
cssTranspile: cssTranspile,
jsTranspile: jsTranspile,
server: series(startNodemon, startBrowserSync),
default: series(
parallel(
cssTranspile,
jsTranspile
),
startNodemon,
startBrowserSync,
function () {
watch('public/scss/*.scss', cssTranspile)
}
)
}
The error reported, when simply running gulp, is:
internal/modules/cjs/loader.js:1160
throw new ERR_REQUIRE_ESM(filename, parentPath, packageJsonPath);
^
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: T:\Node\ICP\gulpfile.js
require() of ES modules is not supported.
I must be doing something wrong. Anyone an idea on what it might be?
CLI version: 2.2.0
Local version: 4.0.2
The flag "type": "module", is set in package.json as described in the note docs. The issue is very much similar to this issue in the geolib library.
And when we rename gulpfile.js to gulpfile.babel.js as described here we get the same error.
The package.json contain these packages:
"devDependencies": {
"#babel/core": "^7.8.4",
"#babel/preset-env": "^7.8.4",
"#babel/register": "^7.8.3",
"exports-loader": "^0.7.0",
"gulp": "^4.0.2",
"gulp-env": "^0.4.0",
"gulp-nodemon": "^2.4.2",
"gulp-sass": "^4.0.2",
"nodemon": "^2.0.2"
},
"type": "module",
"babel": {
"presets": [
"#babel/env"
]
In an answer to my own question, when the flag "type": "module" is set in package.json you can't use gulp. More info can be found here.
This seems to be fixed now: https://github.com/gulpjs/gulp-cli/pull/214. Be sure to install the latest version of gulp-cli (2.3.0 as of June 2020).
If your package.json specifies "type": "module" you can name your ES module with Gulp tasks gulpfile.js, otherwise name it gulpfile.mjs. No need to use any transpilers or preloaders like esm, Babel or TypeScript.

How to configure babel correctly to use lodash-es?

I need to use lodash-es in my project, but I can't configure my babel correctly, it always reports errors like SyntaxError: Unexpected identifier
hello.js
import upperCase from 'lodash-es/upperCase'
console.log(upperCase('lodash-es'));
package.json
{
"scripts": {
"demo": "babel-node hello"
},
"devDependencies": {
"#babel/cli": "^7.0.0",
"#babel/core": "^7.0.0",
"#babel/node": "^7.0.0",
"#babel/preset-env": "^7.0.0"
},
"dependencies": {
"lodash-es": "4.17.11"
}
}
.babelrc
{
"presets": [
"#babel/preset-env"
]
}
When run babel-node hello, it reports error like:
> /javascript-babel-node-use-lodash-es-issue-demo
> babel-node hello
/Users/freewind/workspace/javascript-babel-node-use-lodash-es-issue-demo/node_modules/lodash-es/upperCase.js:1
(function (exports, require, module, __filename, __dirname) { import createCompounder from './_createCompounder.js';
^^^^^^^^^^^^^^^^
SyntaxError: Unexpected identifier
at new Script (vm.js:79:7)
at createScript (vm.js:251:10)
at Object.runInThisContext (vm.js:303:10)
I've also setup a small demo for this issue, you can clone and try it if you need: https://github.com/freewind-demos/javascript-babel-node-use-lodash-es-issue-demo
Adapted from https://stackoverflow.com/a/31822668/3563013
require("#babel/register")({
ignore: [/node_modules\/(?!lodash-es)/],
});
babel-node by default ignores the node_modules directory. Which is a good thing, else it would be unnecessarily heavy. Packages in node_modules are (at the moment) expected to be in commonjs format. Instead of using lodash-es (es6 format) you should just use lodash (commonjs format). It has exactly the same functionality, the only difference is the format it is written in. More information about that here.
So either tweak babel-node to unignore node-modules/lodash-es (not recommended!) or just install lodash with npm install --save lodash and then rewrite your import like:
import upperCase from 'lodash/upperCase' // instead of lodash-es
console.log(upperCase('lodash-es'));

JEST test not understanding import statement

Im using JEST to test my app. But Im getting an error from the test file --
import xyz from './XYZ.js';
^^^^^^
SyntaxError: Unexpected token import
Then I created a .babelrc file and it has the following code --
{
"presets": [
"es2015"
]
}
After this, whichever file I have imported in the test file does not throw this error. But if one of the imported files (like XYZ.js) have import statement in itself, then it gives the same error on that file.
My package.json devDependencies (significant packages) --
"devDependencies": {
"babel-jest": "^19.0.0",
"babel-preset-es2015": "^6.22.0",
"eslint": "2.0.0",
"eslint-plugin-react": "latest",
"express": "^4.12.2",
"jest": "^19.0.1",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"react-router": "^2.8.1"
},
Can anyone point out what I have missed?
Try using
import { xyz } from './XYZ.js';
Also make sure you exported the module
export function xyz() {}
And check out Babel stage-0

Categories

Resources