How to fix Broccoli Builder ran into an error with `UglifyWriter` plugin in Ember application - node.js

I am using ember framework for my frontend application, It wors fine till last week now when I tried to build the application getting below issue,
Build failed.
Build Canceled: Broccoli Builder ran into an error with `UglifyWriter` plugin. 💥
SyntaxError: Unexpected token: name (v)
Error
at new JS_Parse_Error (eval at <anonymous> (/Users/vad/dev/book-frontend/node_modules/broccoli-uglify-sourcemap/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:1545:18)
at js_error (eval at <anonymous> (/Users/vad/dev/book-frontend/node_modules/broccoli-uglify-sourcemap/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:1553:11)
at croak (eval at <anonymous> (/Users/vad/dev/book-frontend/node_modules/broccoli-uglify-sourcemap/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2092:9)
at token_error (eval at <anonymous> (/Users/vad/dev/book-frontend/node_modules/broccoli-uglify-sourcemap/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2100:9)
at unexpected (eval at <anonymous> (/Users/vad/dev/content-frontend/node_modules/broccoli-uglify-sourcemap/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2106:9)
Please find the below package.json for your reference
{
"name": "book-content",
"version": "0.0.0",
"description": "Book management platform",
"private": true,
"directories": {
"doc": "doc",
"test": "tests"
},
"scripts": {
"build": "ember build",
"start": "ember server",
"test": "ember test"
},
"repository": "",
"engines": {
"node": ">= 0.10.0"
},
"author": "",
"license": "MIT",
"devDependencies": {
"broccoli-asset-rev": "^2.2.0",
"broccoli-funnel": "^1.0.2",
"broccoli-merge-trees": "^1.1.1",
"bson": "^4.0.4",
"ember-ajax": "0.7.1",
"ember-aupac-typeahead": "3.1.0",
"ember-browserify": "^1.2.2",
"ember-can": "^0.8.1",
"ember-cli": "2.13.0",
"ember-cli-app-version": "^1.0.0",
"ember-cli-autocomplete-input": "1.1.0",
"ember-cli-babel": "^5.1.5",
"ember-cli-dependency-checker": "^1.2.0",
"ember-cli-htmlbars": "^1.0.1",
"ember-cli-htmlbars-inline-precompile": "^0.3.1",
"ember-cli-inject-live-reload": "^1.3.1",
"ember-cli-moment-shim": "^3.7.1",
"ember-cli-pace": "0.1.0",
"ember-cli-pagination": "2.2.2",
"ember-cli-qunit": "^1.2.1",
"ember-cli-release": "0.2.8",
"ember-cli-sass": "^7.1.7",
"ember-cli-sri": "^2.1.0",
"ember-cli-uglify": "^1.2.0",
"ember-composable-helpers": "2.1.0",
"ember-concurrency": "0.8.21",
"ember-data": "2.7.0",
"ember-disable-proxy-controllers": "^1.0.1",
"ember-export-application-global": "^1.0.4",
"ember-get-helper": "1.1.0",
"ember-load-initializers": "^0.5.0",
"ember-lodash": "4.17.1",
"ember-moment": "^7.8.0",
"ember-plupload": "1.13.18",
"ember-power-select-typeahead": "0.7.1",
"ember-query-params-reset": "2.0.0",
"ember-resolver": "^2.0.3",
"ember-rl-month-picker": "^0.2.0",
"ember-rl-year-picker": "^0.2.0",
"ember-slide-push-menu": "1.0.0",
"ember-truth-helpers": "1.2.0",
"ember-uploader": "1.0.0",
"ember-validations": "v2.0.0-alpha.5",
"express": "^4.13.4",
"glob": "^4.5.3",
"loader.js": "^4.0.0",
"morgan": "^1.7.0",
"uglify-js": "2.7.1"
},
"dependencies": {
"minimist": "^1.2.0"
}
}
I see some of the dependencies pulled the latest version of uglify:3.11.3 which could cause an issue but I don't know how to instruct them to use version 2.7.0 or the one which is not causing an issue. I don't know how to override nested dependency.
Could anyone please guide me to fix the issue?
Fix 1:
I have fixed the issue by adding the below code in ember-cli-build.js
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
// Add options here
minifyJS: {
options: {
exclude: ["**/vendor.js"]
}
}
});
But I am not sure whether it's a good solution but it resolved my issue.

There are some code which is in vendor folder is using the latest ES6 syntax which was not transpiled using babel so ember-cli-uglify can't recognize it.
Fix you have done is, ember-cli-uglify will not run for vendor folder js files. ie., it will not run minification(removing comment and doing code change for reducing file size) for those files.

Related

SPFX App Customizer error "Extension failed to load for componentId"

I am having errors when I deploy this in my tenant site but when i run it in debug mode via gulp serve the app is rendering.
this is the error:
Uncaught (in promise) Error
at t [as constructor]
Uncaught (in promise) Error: Failed to create application customizer 'ClientSideExtension.ApplicationCustomizer.75e06db2-212d-41f4-ad01-758e014c7b40'. Error information is 'Extension failed to load for componentId "75e06db2-212d-41f4-ad01-758e014c7b40".'.
i installed all the needed dependency and it briefly worked but when i removed the bottom placeholder customization, deployed then it didn't render anymore. I'd also like to note that when it briefly worked, it only rendered in the site contents, documents, settings it didn't render in the site pages such as my homepage and other pages i created.
I have followed the docs in building the customizer:
private _renderPlaceHolders(): void {
console.log("HelloWorldApplicationCustomizer._renderPlaceHolders()");
console.log(
"Available placeholders: ",
this.context.placeholderProvider.placeholderNames
.map(name => PlaceholderName[name])
.join(", ")
);
// Handling the top placeholder
if (!this._topPlaceholder) {
console.log("no placeholder found");
this._topPlaceholder = this.context.placeholderProvider.tryCreateContent(
PlaceholderName.Top,
{ onDispose: this._onDispose }
);
// The extension should not assume that the expected placeholder is available.
if (!this._topPlaceholder) {
console.error("The expected placeholder (Top) was not found.");
return;
}
//MORE CODE BELOW
}
}
my package.json
{
"name": "searchbar-ext",
"version": "0.0.1",
"private": true,
"main": "lib/index.js",
"scripts": {
"build": "gulp bundle",
"clean": "gulp clean",
"test": "gulp test"
},
"dependencies": {
"#microsoft/decorators": "1.11.0",
"#microsoft/sp-application-base": "1.11.0",
"#microsoft/sp-core-library": "1.11.0",
"#microsoft/sp-dialog": "1.11.0",
"#microsoft/sp-http": "1.11.0",
"#microsoft/sp-office-ui-fabric-core": "1.11.0",
"#pnp/common": "^2.5.0",
"#pnp/graph": "^2.5.0",
"#pnp/logging": "^2.5.0",
"#pnp/odata": "^2.5.0",
"#pnp/pnpjs": "^2.0.13",
"#pnp/sp": "^2.5.0",
"#types/rijndael-js": "^1.0.0",
"crypto-js": "^4.0.0",
"dayjs": "^1.10.5",
"dotenv": "^10.0.0",
"dotenv-expand": "^5.1.0",
"gulp-cli": "^2.3.0",
"js-cookie": "^2.2.1",
"ncrypt-js": "^2.0.0",
"react-cookie": "^4.0.3",
"rijndael-js": "^2.0.0"
},
"devDependencies": {
"#microsoft/rush-stack-compiler-3.3": "0.3.5",
"#microsoft/sp-build-web": "1.11.0",
"#microsoft/sp-module-interfaces": "1.11.0",
"#microsoft/sp-tslint-rules": "1.11.0",
"#microsoft/sp-webpart-workbench": "1.11.0",
"#types/js-cookie": "^2.2.6",
"#types/react-cookies": "^0.1.0",
"#types/webpack-env": "1.13.1",
"ajv": "~5.2.2",
"gulp": "3.9.1",
"gulp-sequence": "1.0.0",
"sass-loader": "^8.0.2",
"spfx-uifabric-themes": "^0.8.0",
"ts-loader": "^6.2.1"
}
}

Ember js Build Error (broccoli-persistent-filter:EslintValidationFilter)

After cloning the repository from Github then install npm and try to execute ember s. but I got this error. Then I delete node modules directory and package-lock.json file and install npm again. But i can't solve it.I am googling this error but can't solve it. Plz, Help me.
Here is my Error:
Build Error (broccoli-persistent-filter:EslintValidationFilter) in helpers/flash-
message.js
Package subpath './lib/util/traverser' is not defined by "exports" in
/home/ag/Office/ecommerce/front-end/node_modules/eslint/package.json
Stack Trace and Error Report: /tmp/error.dump.a671c24c39f689554c47c73d068f7e9f.log
My Package.json:
{
"name": "front-end",
"version": "0.0.0",
"private": true,
"description": "Small description for front-end goes here",
"repository": "",
"license": "MIT",
"author": "",
"directories": {
"doc": "doc",
"test": "tests"
},
"scripts": {
"build": "ember build",
"lint:hbs": "ember-template-lint .",
"lint:js": "eslint .",
"start": "ember serve",
"test": "ember test"
},
"devDependencies": {
"#ember/jquery": "^0.6.0",
"#ember/optional-features": "^0.7.0",
"broccoli-asset-rev": "^3.0.0",
"ember-ajax": "^5.0.0",
"ember-aria-tabs": "^3.0.0",
"ember-auto-import": "^1.10.1",
"ember-cli": "~3.12.0",
"ember-cli-app-version": "^3.2.0",
"ember-cli-babel": "^7.7.3",
"ember-cli-bootstrap-4": "^0.12.0",
"ember-cli-dependency-checker": "^3.1.0",
"ember-cli-eslint": "^5.1.0",
"ember-cli-flash": "^2.1.0",
"ember-cli-form-data": "^2.1.1",
"ember-cli-htmlbars": "^3.0.1",
"ember-cli-htmlbars-inline-precompile": "^2.1.0",
"ember-cli-inject-live-reload": "^1.8.2",
"ember-cli-moment-shim": "^3.8.0",
"ember-cli-sass": "^10.0.1",
"ember-cli-shims": "^1.2.0",
"ember-cli-sri": "^2.1.1",
"ember-cli-swiper": "^1.0.6",
"ember-cli-template-lint": "^1.0.0-beta.1",
"ember-cli-uglify": "^2.1.0",
"ember-composable-helpers": "^2.4.0",
"ember-concurrency": "^1.3.0",
"ember-cp-validations": "^4.0.0-beta.12",
"ember-crumbly": "^3.0.1",
"ember-data": "~3.12.0",
"ember-drag-drop": "^0.9.0-beta.0",
"ember-export-application-global": "^2.0.0",
"ember-fetch": "^8.1.0",
"ember-font-awesome": "^4.0.0-rc.4",
"ember-load-initializers": "^2.0.0",
"ember-local-storage": "^1.7.2",
"ember-maybe-import-regenerator": "^0.1.6",
"ember-modal-dialog": "^3.0.1",
"ember-moment": "^8.0.1",
"ember-pickr": "^2.2.1",
"ember-power-select": "^3.0.2",
"ember-qunit": "^4.4.1",
"ember-resize": "^0.3.4",
"ember-resolver": "^5.0.1",
"ember-source": "~3.12.0",
"ember-toggle": "^7.1.0",
"ember-tooltips": "^3.4.5",
"ember-uuid": "^2.1.0",
"ember-welcome-page": "^4.0.0",
"eslint-plugin-ember": "^6.2.0",
"eslint-plugin-node": "^9.0.1",
"loader.js": "^4.7.0",
"popper.js": "^1.16.1",
"qunit-dom": "^0.8.4",
"sass": "^1.30.0"
},
"engines": {
"node": "8.* || >= 10.*"
},
"dependencies": {
"drift-zoom": "^1.5.0"
}
}
If anyone has any idea about this error then comment or answer it. I will vote and accept the answer.
Finally, I fix my issue by downgrading the node version from 17 to 16.

vue-test-utils problem with native node esm: TypeError: mount is not a function

I am using node's native esm implemenation to run tests.
Here's a minimal code example to reproduce. Either set "type":"module" in package.json or use .mjs extension for the test. node version >= 13.2.0 (otherwise >= 12.0 and experimental flag)
import {mount} from '#vue/test-utils';
// use some minimal vue component
const FooBar = import('foo-bar.vue');
const wrapper = mount(FooBar);
Throw the following error:
TypeError: mount is not a function
As reqested, this is my package.json
{
"name": "mk-vue-flex-text",
"version": "0.0.1",
"description": "My Vue component",
"main": "lib/index.js",
"license": "MIT",
"scripts": {
"build": "NODE_ENV=production webpack --mode production --config build/webpack.production.js --progress --hide-modules",
"dev": "NODE_ENV=development node server.mjs",
"github:master": "git push origin master",
"test:esm": "NODE_ENV=test node test/basic.test.mjs | tap-spec",
"test": "NODE_ENV=test node test/basic.test.js | tap-spec"
},
"browserslist": [
"last 1 version",
"> 1%",
"maintained node versions",
"not dead"
],
"devDependencies": {
"#babel/cli": "^7.7.5",
"#babel/core": "^7.7.5",
"#babel/preset-env": "^7.7.6",
"#vue/server-test-utils": "^1.0.0-beta.30",
"#vue/test-utils": "^1.0.0-beta.30",
"autoprefixer": "^9.7.3",
"babel-eslint": "^10.0.3",
"babel-loader": "^8.0.6",
"browser-env": "^3.3.0",
"css-loader": "^3.3.0",
"eslint": "^6.7.0",
"express": "^4.17.1",
"mini-css-extract-plugin": "^0.8.0",
"node-sass": "^4.13.0",
"resolve-url-loader": "^3.1.1",
"sass-loader": "^8.0.0",
"tap-spec": "^5.0.0",
"tape": "^4.11.0",
"vue": "^2.6.10",
"vue-eslint-parser": "^7.0.0",
"vue-loader": "^15.7.2",
"vue-loader-plugin": "^1.3.0",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.41.2",
"webpack-dev-middleware": "^3.7.2",
"webpack-hot-middleware": "^2.25.0",
"webpack-merge": "^4.2.2"
}
}
Your FooBar import method isn't correct so it won't correctly mount, try this.
import {mount} from '#vue/test-utils';
// use some minimal vue component
import FooBar from 'foo-bar.vue';
const wrapper = mount(FooBar);

When I try to use Parcel to build a production version of a React app that works fine in development mode, I get "Cannot find module 'sass'"

I've built a simple React/Redux app and am using Parcel for the bundler. It works fine in development mode, that is, using the script
"dev": "parcel ./src/index.html",
but when I tried to do
"build": "parcel build ./src/index.html",
I got the following error
/Users/abc/Documents/Projects/sandbox/smart/src/styles/main.scss: Cannot find module 'sass' from '/Users/abc/Documents/Projects/sandbox/smart/src/styles'
at /Users/abc/Documents/Projects/sandbox/smart/node_modules/resolve/lib/async.js:97:35
at processDirs (/Users/abc/Documents/Projects/sandbox/smart/node_modules/resolve/lib/async.js:244:39)
at isdir (/Users/abc/Documents/Projects/sandbox/smart/node_modules/resolve/lib/async.js:251:32)
at /Users/abc/Documents/Projects/sandbox/smart/node_modules/resolve/lib/async.js:23:69
at FSReqWrap.oncomplete (fs.js:152:21)
This is the first time I've tried to build an app using Parcel and I'm lost. I'm using node-sass to import my sass files directly -- perhaps this has something to do with that.
The referenced file (main.scss) is referenced in App.js like this
import "../../styles/main.scss";
and is the first sass file to be included (App is loaded into the DOM like this in index.js:
const store = configureStore()
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root")
)
This is running under Node 11.15. My package.json follows -- any hints or help much appreciated!
{
"name": "friender",
"version": "1.0.0",
"description": "",
"main": "index.js",
"jest": {
"setupFiles": ["jest-localstorage-mock"]
},
"scripts": {
"dev": "parcel ./src/index.html",
"build": "parcel build ./src/index.html",
"lint": "eslint \"src/**/*.{js,jsx}\" --quiet",
"test": "jest"
},
"prettier": {
"semi": false
},
"keywords": [],
"author": "",
"license": "MIT",
"devDependencies": {
"#babel/cli": "^7.6.0",
"#babel/core": "^7.6.0",
"#babel/plugin-transform-runtime": "^7.5.5",
"#babel/preset-env": "^7.6.0",
"#types/jest": "^24.0.18",
"babel-eslint": "^10.0.3",
"babel-preset-react": "^7.0.0-beta.3",
"eslint": "^6.2.2",
"eslint-config-prettier": "^6.1.0",
"jest": "^24.9.0",
"jest-localstorage-mock": "^2.4.0",
"parcel-bundler": "^1.12.3",
"prettier": "^1.18.2"
},
"dependencies": {
"#emotion/babel-preset-css-prop": "^10.0.14",
"#emotion/core": "^10.0.16",
"#emotion/styled": "^10.0.15",
"#fortawesome/fontawesome-svg-core": "^1.2.0-7",
"#fortawesome/free-solid-svg-icons": "^5.11.1",
"#fortawesome/react-fontawesome": "^0.1.4",
"axios": "^0.19.0",
"bulma": "^0.7.5",
"eslint-plugin-jest": "^22.17.0",
"eslint-plugin-react": "^7.14.3",
"immer": "^4.0.0",
"node-sass": "^4.12.0",
"prop-types": "^15.7.2",
"react": "16.x",
"react-detect-offline": "^2.4.0",
"react-dom": "^16.9.0",
"react-fontawesome": "^1.6.1",
"react-modal": "^3.10.1",
"react-redux": "^7.1.1",
"redux": "^4.0.4",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0"
}
}
Try instead per the documentation for SCSS and error Cannot find module 'sass' use module sass instead of node-sass:
npm install -D sass
The documentation mentions being able to use node-sass, but there are several active issues with node-sass. Module sass may help resolve the error and allow you use SCSS in your application.
Hopefully that helps!

Segmentation 11 Error in Node Sass when running a Gulp Task

I've been battling with this issue for the past few hours now and all of the fixes I've found online have unfortunately not worked for me.
When running a gulp task, such as gulp deploy (I'm developing for Netsuite) the task will run until compiling SASS and then I get this error:
/Users/chrismartyr/Documents/GitHub/ChannelTen/node_modules/amd-optimize/lib/parse.js:14
return a.value;
^
TypeError: Cannot read property 'value' of null
at /Users/chrismartyr/Documents/GitHub/ChannelTen/node_modules/amd-optimize/lib/parse.js:14:15
at Array.map (native)
at valuesFromArrayExpression (/Users/chrismartyr/Documents/GitHub/ChannelTen/node_modules/amd-optimize/lib/parse.js:13:26)
at walk.ancestor.CallExpression (/Users/chrismartyr/Documents/GitHub/ChannelTen/node_modules/amd-optimize/lib/parse.js:77:22)
at c (/Users/chrismartyr/Documents/GitHub/ChannelTen/node_modules/amd-optimize/node_modules/acorn/util/walk.js:47:18)
at Object.skipThrough (/Users/chrismartyr/Documents/GitHub/ChannelTen/node_modules/amd-optimize/node_modules/acorn/util/walk.js:163:39)
at c (/Users/chrismartyr/Documents/GitHub/ChannelTen/node_modules/amd-optimize/node_modules/acorn/util/walk.js:46:17)
at Object.base.ExpressionStatement (/Users/chrismartyr/Documents/GitHub/ChannelTen/node_modules/amd-optimize/node_modules/acorn/util/walk.js:176:5)
at c (/Users/chrismartyr/Documents/GitHub/ChannelTen/node_modules/amd-optimize/node_modules/acorn/util/walk.js:46:17)
at Object.skipThrough (/Users/chrismartyr/Documents/GitHub/ChannelTen/node_modules/amd-optimize/node_modules/acorn/util/walk.js:163:39)
Segmentation fault: 11
I've tried removing and re installing the node modules, I've also tried different versions of node, unfortunately I have to use between 4.0.0 - LTS as if defined by the version of Suitecommerce Advanced I'm using.
I'm currently using node 4.9.1 and npm 2.15.11.
Watch tasks run fine, it's only when it's compiling the SCSS for production that this error occurs..
Heres the package.json:
{
"name": "suitecommerce-builder",
"version": "0.0.1",
"description": "Sets of tasks to build a Reference Implementation",
"main": "gulpfile.js",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"amd-optimize": "0.3.1",
"archiver": "0.13.0",
"async": "0.9.0",
"cli-spinner": "0.1.5",
"del": "0.1.1",
"escodegen": "1.6.1",
"esprima": "1.2.5",
"estraverse": "1.9.3",
"express": "4.13.3",
"glob": "4.0.4",
"gulp": "3.8.7",
"gulp-add": "0.0.2",
"gulp-bless": "3.0.1",
"gulp-changed": "1.0.0",
"gulp-concat": "2.3.3",
"gulp-cssfmt": "^1.0.0",
"gulp-handlebars": "3.0.1",
"gulp-if": "1.2.5",
"gulp-insert": "0.4.0",
"gulp-jshint": "1.9.0",
"gulp-jst": "0.1.1",
"gulp-less": "1.3.6",
"gulp-livereload": "2.1.1",
"gulp-minify-css": "0.3.13",
"gulp-sass": "2.1.0",
"gulp-sourcemaps": "1.2.8",
"gulp-svg2ttf": "1.0.3",
"gulp-ttf2eot": "1.0.1",
"gulp-ttf2woff": "1.0.1",
"gulp-uglify": "0.3.1",
"gulp-util": "3.0.1",
"handlebars": "2.0.0",
"inquirer": "0.5.1",
"is-my-json-valid": "2.13.1",
"jshint-stylish": "1.0.0",
"jsonlint": "1.6.2",
"jsonpath-plus": "0.15.0",
"lazypipe": "0.2.2",
"lodash": "2.4.1",
"map-stream": "0.1.0",
"mime": "1.2.11",
"moment": "2.8.3",
"node-sass": "3.4.1",
"ns-uploader": "file:./ns_npm_repository/ns-uploader",
"progress": "1.1.7",
"q": "1.0.1",
"request": "2.39.0",
"serve-index": "1.7.2",
"shelljs": "^0.5.3",
"short-jsdoc": "0.2.4",
"sourcemap-to-ast": "0.0.2",
"through": "2.3.6",
"through2": "0.6.3",
"underscore": "1.6.0",
"vinyl": "0.4.6",
"xml2js": "0.4.5",
"yargs": "1.3.1",
"credentials-inquirer": "file:./ns_npm_repository/credentials-inquirer",
"suitetalk": "file:./ns_npm_repository/suitetalk4node",
"preconditions": "file:./ns_npm_repository/preconditions",
"xmlbuilder": "8.2.2"
},
"optionalDependencies": {
"minijasminenode2": "1.0.0",
"gulp-jasmine-phantom": "1.1.2",
"fsevents": "0.3.7"
}
}
Any help would be very much appreciated?
Thanks!
I would recommend updating package.json's entry for amd-optimizer. The latest version as shown on https://www.npmjs.com/package/gulp-amd-optimizer is 0.6.0.
And as per https://docs.npmjs.com/cli/update, I'd recommend using the npm update command:
npm update amd-optimizer
You may need to specify the package version, in which case it will be amd-optimizer#0.6.0
Note, npm update also updates the package.json file according to the docs page.
You may need to be in the node_modules directory when running this command.
Hope this helps,

Resources