When I build the ckeditor with ./
./node_modules/.bin/webpack --mode development
Anything works fine, but when I try to build it with
./node_modules/.bin/webpack --mode production
I get this error:
ERROR in ./node_modules/#ckeditor/ckeditor5-utils/src/ckeditorerror.js
Module build failed (from
./node_modules/#ckeditor/ckeditor5-dev-webpack-plugin/lib/translatesourceloader.js):
SyntaxError: Unexpected token (13:19) #
./node_modules/#ckeditor/ckeditor5-core/src/editor/utils/elementapimixin.js
6:0-72 33:13-26 #
./node_modules/#ckeditor/ckeditor5-editor-classic/src/classiceditor.js
# ./app.js ERROR in bundle.js from UglifyJs Unexpected token: keyword
(const)
[./node_modules/#ckeditor/ckeditor5-utils/src/log.js:46,0][bundle.js:160,0]
I can edit the ckeditor file and remove the const word, but then it just errors out on the next file which contains export const.
Her is the uglify-js version I use:
"uglify-js": {
"version": "3.4.9",
"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.9.tgz",
"integrity": "sha512-8CJsbKOtEbnJsTyv6LE6m6ZKniqMiFWmm9sRbopbkGs3gMPPfd3Fh8iIA4Ykv5MgaTbqHr4BaoGLJLZNhsrW1Q==",
"dev": true,
"requires": {
"commander": "~2.17.1",
"source-map": "~0.6.1"
}
},
"uglifyjs-webpack-plugin": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-2.0.1.tgz",
"integrity": "sha512-1HhCHkOB6wRCcv7htcz1QRPVbWPEY074RP9vzt/X0LF4xXm9l4YGd0qja7z88abDixQlnVwBjXsTBs+Xsn/eeQ==",
"dev": true,
"requires": {
"cacache": "^11.2.0",
"find-cache-dir": "^2.0.0",
"schema-utils": "^1.0.0",
"serialize-javascript": "^1.4.0",
"source-map": "^0.6.1",
"uglify-js": "^3.0.0",
"webpack-sources": "^1.1.0",
"worker-farm": "^1.5.2"
}
},
-- Updated --
I kinda fixed it by removing this from webpack.conf.js
optimization: {
minimizer: [
new UglifyJsWebpackPlugin( {
sourceMap: true,
uglifyOptions: {
output: {
// Preserve CKEditor 5 license comments.
comments: /^!/
}
}
} )
]
},
I ran into this too. I switched to terser-webpack-plugin and can build successfully.
https://github.com/webpack-contrib/uglifyjs-webpack-plugin/issues/362
Related
In my project, I'm using the reanimate library to add animations, but I'm receiving an error
https://stackoverflow.com/questions/63005011/support-for-the-experimental-syntax-jsx-isnt-currently-enabled
I follow all the steps mention in the link but none of them work for me
My package.json file
{
"name": "animation",
"version": "0.1.0",
"private": true,
"dependencies": {
"#react-spring/native": "^9.6.1",
"#react-spring/web": "^9.6.1",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"babel-polyfill": "^6.26.0",
"lodash": "^4.17.21",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-native-reanimated": "^2.14.4",
"react-native-web": "^0.18.10",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/plugin-syntax-jsx": "^7.18.6",
"#babel/preset-env": "^7.20.2",
"#babel/preset-react": "^7.18.6",
"babel-loader": "^9.1.2",
"url-loader": "^4.1.1",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1"
}
}
webpack.config.js
// web/webpack.config.js
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const appDirectory = path.resolve(__dirname, "../");
// This is needed for webpack to compile JavaScript.
// Many OSS React Native packages are not compiled to ES5 before being
// published. If you depend on uncompiled packages they may cause webpack build
// errors. To fix this webpack can be configured to compile to the necessary
// `node_module`.
const babelLoaderConfiguration = {
test: /\.js$/,
// Add every directory that needs to be compiled by Babel during the build.
include: [
path.resolve(appDirectory, "index.web.js"),
path.resolve(appDirectory, "src"),
path.resolve(appDirectory, "node_modules/react-native-uncompiled"),
],
use: {
loader: "babel-loader",
options: {
cacheDirectory: true,
// The 'metro-react-native-babel-preset' preset is recommended to match React Native's packager
presets: [
"#babel/preset-react",
"module:metro-react-native-babel-preset",
],
// Re-write paths to import only the modules needed by the app
plugins: [
"#babel/plugin-syntax-jsx",
"react-native-web",
"react-native-reanimated/plugin",
],
},
},
};
// This is needed for webpack to import static images in JavaScript files.
const imageLoaderConfiguration = {
test: /\.(gif|jpe?g|png|svg)$/,
use: {
loader: "url-loader",
options: {
name: "[name].[ext]",
esModule: false,
},
},
};
module.exports = {
entry: [
// load any web API polyfills
path.resolve(appDirectory, "polyfills-web.js"),
// your web-specific entry file
path.resolve(appDirectory, "index.web.js"),
],
// configures where the build ends up
output: {
filename: "bundle.web.js",
path: path.resolve(appDirectory, "dist"),
},
// ...the rest of your config
plugins: [
new HtmlWebpackPlugin({
filename: "index.html",
template: "./index.html",
}),
new webpack.EnvironmentPlugin({ JEST_WORKER_ID: null }),
new webpack.DefinePlugin({ process: { env: {} } }),
],
module: {
rules: [babelLoaderConfiguration, imageLoaderConfiguration],
},
resolve: {
// This will only alias the exact import "react-native"
alias: {
"react-native$": "react-native-web",
},
// If you're working on a multi-platform React Native app, web-specific
// module implementations should be written in files using the extension
// `.web.js`.
extensions: [".web.js", ".js"],
},
};
I am able to merge and generate reports in my local but when I am running mt test into GitHub action through error ERROR: Failed to merge reports. I never used GitHub action before so maybe I have made a mistake. Any suggestions are welcome.
Here is my cypress.json file
{
"reporter": "cypress-mochawesome-reporter",
"reporterOptions": {
"reportDir": "cypress/Reports",
"charts": true,
"overwrite": false,
"html": false,
"json": true,
"reportPageTitle": "Legrande Cypress",
"reportFilename": "Legrande Cypress Test Report",
"embeddedScreenshots": true,
"inlineAssets": true
},
"defaultCommandTimeout": 30000,
"retries": {
"runMode": 1,
"openMode": 1
},
"video": false,
"scrollBehavior": "nearest",
"chromeWebSecurity": false,
}
Here is my package.json file.
{
"name": "cypressautomation",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"delete:reportFolder": "rm -rf mochawesome-report/",
"test:cli": "npm run delete:reportFolder && cypress run",
"merge:reports": "mochawesome-merge mochawesome-report/*.json > cypress-combined-report.json",
"create:html:report": "npm run merge:reports && marge --reportDir TestReport cypress-combined-report.json",
"cy:run": "cypress run",
"record-test": "cypress run --record --key ######################"
},
"reporter": "cypress-mochawesome-reporter",
"reporterOptions": {
"reportDir": "cypress/Reports",
"charts": true,
"reportPageTitle": "My Test Suite",
"embeddedScreenshots": true,
"inlineAssets": true
},
"video": false,
"author": "weblylab",
"license": "ISC",
"devDependencies": {
"cypress": "^9.5.0",
"cypress-file-upload": "^5.0.2",
"cypress-mochawesome-reporter": "^2.2.0",
"cypress-slack-reporter": "^1.2.1",
"cypress-xpath": "^1.6.1",
"faker": "^5.5.3",
"i": "^0.3.6",
"mocha": "^8.4.0",
"mochawesome": "^6.2.2",
"mochawesome-merge": "^4.2.0",
"mochawesome-report-generator": "^5.2.0",
"tsconfig-paths": "^3.9.0"
},
"dependencies": {
"#auth0/auth0-spa-js": "^1.13.6",
"#types/bluebird": "^3.5.33",
"#types/lodash": "^4.14.168",
"chai": "^4.3.0",
"cypress-iframe": "^1.0.1",
"cypress-skip-test": "^1.0.0",
"delay": "^5.0.0",
"Faker": "^0.7.2",
"lodash": "^4.17.21",
"moment": "^2.29.1",
"resolve-url": "^0.2.1",
"save": "^2.4.0",
"source-map-resolve": "^0.6.0",
"urix": "^0.1.0",
"xlsx": "^0.17.0"
}
}
And here is my cypress.yml file that I used for GitHub action.
name: GitHub Actions Demo
on:
schedule:
- cron: "0 0 * * *"
push:
branches:
- 'master'
jobs:
cypress-test:
name: Run on windows
runs-on: windows-latest
steps:
- uses: actions/checkout#v2
- name: Install dependencies
run: |
npm install
npm install --dev
npm run record-test
- name: Copy execution test screenshots
run: |
mkdir public
cp -r cypress/screenshots public/screenshots
- name: Merge test reports
run: npm run merge:reports
- name: Generate HTML reports
run: npm run create:html:report
I am getting the below error for merging reports. In my local machine, it working fine.
Did you try to change the
"reportDir": "cypress/Reports",
to the mochawesome-report
"reportDir": "cypress/reports/mochawesome-report",
Also, check your plugins/index.js
on('before:run', async (details) => {
console.log('Override before:run');
await beforeRunHook(details);
// Note: if you are using other than Windows remove below two lines, start with await exec
//await exec("IF EXIST cypress\\screenshots rmdir /Q /S cypress\\screenshots")
//await exec("IF EXIST cypress\\reports rmdir /Q /S cypress\\test-reports")
//await exec("IF EXIST cypress\\reports rmdir /Q /S cypress\\reports")
});
on('after:run', async () => {
console.log('Override after:run');
// Note: if you are using other than Windows remove below line, starts with await exec
//await exec("npx jrm ./cypress/reports/junitreport.xml ./cypress/test-reports/junit-report-[hash].xml");
//await exec("npx jrm ./cypress/reports/junitreport.xml ./cypress/reports/junit-report-[hash].xml");
await afterRunHook();
});
I had similar issues and solved some of them with
reporter: '../node_modules/cypress-mochawesome-reporter',
video: true,
reporterOptions: {
reportDir: 'reports/mochawesome',
That said, I found a reference saying that you need a relative directory now for reportDir, so I suspect that my reportDir above is only working because I happened to select the default directory used by Mochawesome.
I'm trying to run my first test for my Vue app.
Here is the Hello World test I'm trying to run which I found at https://next.vue-test-utils.vuejs.org/guide/
import { mount } from '#vue/test-utils'
// The component to test
const MessageComponent = {
template: '<p>{{ msg }}</p>',
props: ['msg']
}
test('displays message', () => {
const wrapper = mount(MessageComponent, {
props: {
msg: 'Hello world'
}
})
// Assert the rendered text of the component
expect(wrapper.text()).toContain('Hello world')
})
I expected the test to pass.
Instead, I get this:
FAIL tests/unit/components/example.spec.js
× displays message (4ms)
● displays message
TypeError: 'set' on proxy: trap returned falsish for property 'hasOwnProperty'
8 |
9 | test('displays message', () => {
> 10 | const wrapper = mount(MessageComponent, {
| ^
11 | props: {
12 | msg: 'Hello world'
13 | }
at mount (node_modules/#vue/test-utils/dist/vue-test-utils.cjs.js:2347:24)
at Object.<anonymous> (tests/unit/components/example.spec.js:10:19)
Test Suites: 1 failed, 1 total
Tests: 1 failed, 1 total
Snapshots: 0 total
Time: 0.826s
Ran all test suites related to changed files.
Watch Usage: Press w to show more.
Here are my dependencies:
{
"name": "vue-compassion",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test": "vue-cli-service test:unit --watch",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.20.0-0",
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-router": "^4.0.1",
"vuex": "^4.0.0-rc.2"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-unit-jest": "^4.5.11",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0",
"#vue/test-utils": "^2.0.0-0",
"babel-eslint": "^10.1.0",
"env-cmd": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0-0",
"flush-promises": "^1.0.2",
"jest": "^26.6.3",
"node-sass": "^5.0.0",
"sass-loader": "^10.1.0",
"supertest": "^6.1.3",
"typescript": "~3.9.3",
"vue-jest": "^5.0.0-0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {},
"overrides": [
{
"files": [
"**/__tests__/*.{j,t}s?(x)",
"**/tests/unit/**/*.spec.{j,t}s?(x)"
],
"env": {
"jest": true
}
}
]
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
],
"jest": {
"preset": "#vue/cli-plugin-unit-jest",
"transform": {
"^.+\\.vue$": "vue-jest"
}
}
}
I was able to get a smaller sample test to run so I know I have some stuff installed correctly.
For example I can run this test:
test('displays message', () => {
expect(1).toBe(1)
})
and that test passes.
Also, this test fails:
test('displays message', () => {
expect(1).toBe(2)
})
I have searched for the error "TypeError: 'set' on proxy: trap returned falsish for property 'hasOwnProperty'" but can't find a darn thing that looks like it relates to my problem.
Any help would be greatly appriciated.
Update your Vue dependency to 3.0.6 +
"vue": "^3.0.6",
That should clear the problem :)
I am trying to compile my ES6+ code to vanilla js using Grunt task runner.
I have purposely chosen Grunt over webpack and gulp because I just wanted to minify my js files.
I have successfully compiled my ES6 code to vanilla after running the code got an error saying generatorRuntime is not defined. After analysing the issue I could that my async and await code is giving the issue after it gets converted to vanilla js.
I have my code snippet of my gruntfile.js and package.json.
babel: {
options: {
sourceMap: true
},
dist: {
files: [{
"expand": true,
"cwd": "./htdocs/js/src",
"src": ["**/*.js"],
"dest": "./htdocs/js/compiled/",
"ext": ".js"
}]
}
},
//uglify will minify all the js files in js/src folder.
uglify: {
all_src : {
options : {
sourceMap : true
},
files: [{
expand: true,
flatten: true,
cwd:'./htdocs/js/compiled',
src: '**/*.js',
dest: './htdocs/js/dist',
ext: '.min.js'
}]
}
}
grunt.loadNpmTasks('grunt-babel');
grunt.loadNpmTasks('grunt-contrib-uglify');
Package.json
"devDependencies": {
"babel-core": "^6.26.3",
"babel-preset-latest": "^6.24.1",
"grunt": "^1.1.0",
"grunt-babel": "^7.0.0",
"grunt-cli": "^1.3.2",
"grunt-contrib-uglify": "^4.0.1"
},
"babel": {
"presets": [
"latest"
]
}
That's probably because the polyfills aren't getting shipped in your bundle. In your babel.options object inside Gruntfile, you can set
presets: [['#babel/preset-env', { useBuiltIns: 'usage', corejs: 3 }]]
and don't forget to include corejs as dependency in your project.
npm install core-js --save
Need some help in figuring out how to run tests in parallel.
Here is how the project is configured and the command I use to run a test.
On the terminal window in run the command - 'npm run test-qa' whoch actually call the 'package.json' which has a script tag to called 'test-qa'.
Here is how my package.json looks like:
{
"name": "Project",
"version": "2.0.0",
"dependencies": {
"babel-core": "^6.8.0",
"babel-eslint": "^7.2.3",
"babel-loader": "^7.1.2",
"babel-polyfill": "^6.8.0",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.5.0",
"babel-register": "^6.26.0",
"eslint-loader": "^1.9.0",
"gulp": "^3.9.1",
"gulp-eslint": "^4.0.0",
"gulp-nightwatch": "^0.2.6",
"handlebars": "^4.0.10",
"json-parser": "^1.1.5",
"json-stringify": "^1.0.0",
"oracledb": "^1.13.1",
"webpack-nightwatch-plugin": "^1.0.0"
},
"scripts": {
"test-local": "eslint . && gulp local:e2e --compilers js:babel-core/register --require babel-polyfill",
"test-dev": "eslint . && gulp dev:e2e --compilers js:babel-core/register --require babel-polyfill",
***"test-qa": "eslint . && gulp qa:e2e --compilers js:babel-core/register --require babel-polyfill --env local",***
},
"devDependencies": {
"gulp": "^3.9.1",
"moment-timezone": "^0.5.20",
"selenium-server-standalone-jar": "2.47.1"
}
}
The test-qa tag from package.json, in turn, calls gulpfile.js to execute the actual task(qa:e2e) in this case. Here is my gulp file code :
const gulp = require('gulp');
const nightwatch = require('gulp-nightwatch');
const eslint = require('gulp-eslint');
gulp.task('qa:e2e', function qaSpec() {
process.env.seleniumon = 'qa';
return gulp.src('')
.pipe(nightwatch({
configFile: 'nightwatch.json',
cliArgs: ['--env local', '--reporter html-reporter.js']
}));
});
gulp.task('local:e2e', function localSpec() {
process.env.seleniumon = 'local';
return gulp.src('')
.pipe(nightwatch({
configFile: 'nightwatch.json',
cliArgs: ['--env local', '', '--reporter html-reporter.js']
}));
});
gulp.task('dev:e2e', function devSpec() {
process.env.seleniumon = 'dev';
return gulp.src('')
.pipe(nightwatch({
configFile: 'nightwatch.json',
cliArgs: ['--env local', '--reporter html-reporter.js']
}));
});
gulp.task('lint', function srcSpec() {
return gulp.src(['**/*.js', '!node_modules/**'])
.pipe(eslint())
.pipe(eslint.format())
.pipe(eslint.failAfterError());
});
gulp.task('default', ['lint']);
the qa:e2e task from gulpfile.js now calls nightwatch.json file to get settings and continue with the execution. Here is my nightwatch.json file:
{
"src_folders": ["tests"],
"output_folder": "reports",
"custom_commands_path": [ "commons/util", "commons/up", "commons/searchPane", "commons/EditorValidations", "commons/model"],
"custom_assertions_path": "",
"page_objects_path": ["pages/admin", "pages/UP", "pages/searchPane", "pages/EditorValidations/CMO", "pages/EditorValidations/CPO", "pages/EditorValidations/GMO", "pages/EditorValidations/GPO", "pages/model"],
"globals_path": "",
"selenium" : {
"start_process" : true,
"server_path" : "./node_modules/selenium-server-standalone-jar/jar/selenium-server-standalone-2.47.1.jar",
"host" : "127.0.0.1",
"port" : 4444,
"cli_args" : {
"webdriver.chrome.driver" : "drivers/chromedriver",
"webdriver.ie.driver" : ""
}
},
"test_settings": {
"chrome": {
"selenium_port": 4444,
"selenium_host": "selenium-hub.nikedev.com",
"skip_testcases_on_fail": true,
"end_session_on_fail":false,
"globals": {
"platform": "desktop"
},
"screenshots": {
"enabled": true,
"on_failure": true,
"on_error": true,
"path": "screenshots/chrome"
},
"desiredCapabilities": {
"browserName": "chrome",
"javascriptEnabled": true,
"acceptSslCerts": true
}
},
"local": {
"selenium_port": 4444,
"selenium_host": "127.0.0.1",
"skip_testcases_on_fail": true,
"end_session_on_fail":false,
"globals": {
"platform": "desktop"
},
"screenshots": {
"enabled": true,
"on_failure": true,
"on_error": true,
"path": "screenshots/chrome"
},
"desiredCapabilities": {
"browserName": "chrome",
"javascriptEnabled": true,
"acceptSslCerts": true
}
}
}
}
This setup is able to execute seamlessly.
I wanted to run test cases parallel and for the I added the following line to my nightwatch.json after "global_path"
"test_workers" : {"enabled" : true, "workers" : "auto"},
After this configuration change the tests never initiated with an error ' throw new Error('Invalid testing environment specified: ' + envs[i]);' even though my gulp file has mention for the environment we want it to run.
cliArgs: ['--env local', '--reporter html-reporter.js']
Can someone help me understand what changes do I need to make to run the test cases parallel?
The workers option configures how many child processes can run concurrently.
• "auto" - determined by number of CPUs e.g. 4 CPUs means 4 workers
• {number} - specifies an exact number of workers
Test concurrency is done at the file level. Each test file will fill a test worker slot. Individual tests/steps in a test file will not run concurrently.
Version 0.9 brings improved support for displaying output when running tests in parallel. recommend setting detailed_output to false in your test settings for improved output readability.
Refer to this link:
https://github.com/nightwatchjs/nightwatch-docs/blob/master/guide/running-tests/run-parallel.md