Develop Reference

Unexpected token 'export' when trying to use the Preact plugin in Next.js

I am currently trying to migrate a Next.js project from React --> Preact.
I have added next-plugin-preact as a dependency and I changed my config also.
Here is the next.config.js:
// #ts-check
const configureBundleAnalyzer = require("#next/bundle-analyzer");
const withPreact = require("next-plugin-preact");
/** #type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
compress: true,
images: {
domains: ["firebasestorage.googleapis.com", "localhost", "lh3.googleusercontent.com", "source.unsplash.com"],
},
i18n: {
locales: ["en"],
defaultLocale: "en",
},
};
const withBundleAnalyzer = configureBundleAnalyzer({ enabled: process.env.ANALYZE_BUNDLE === "true" });
module.exports = withBundleAnalyzer(withPreact(nextConfig));
And then I tried to run pnpm run build but it did nothing. Just killed the script right away.
Then again I tried to run the dev server with pnpm run dev but it threw this error:
:\Default_Folders\Desktop\Projects\Javascript + Dart\AppName\web\node_modules\.pnpm\preact#10.11.3\node_modules\preact\compat\server.browser.js:1
export {
^^^^^^
SyntaxError: Unexpected token 'export'
at internalCompileFunction (node:internal/vm:74:18)
at wrapSafe (node:internal/modules/cjs/loader:1141:20)
at Module._compile (node:internal/modules/cjs/loader:1182:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1272:10)
at Module.load (node:internal/modules/cjs/loader:1081:32)
at Module._load (node:internal/modules/cjs/loader:922:12)
at Module.require (node:internal/modules/cjs/loader:1105:19)
at require (node:internal/modules/cjs/helpers:103:18)
at Object.<anonymous> (D:\Default_Folders\Desktop\Projects\Javascript + Dart\AppName\web\node_modules\.pnpm\next#13.1.5_ive3jjn476xyi3ikfsqwmh5x74\node_modules\next\dist\server\render.js:7:45) at Module._compile (node:internal/modules/cjs/loader:1218:14)
I tried to look into the file in preact/compat/server.browser.js and this is what's present:
export {
renderToString as renderToStaticMarkup, renderToString
} from 'preact-render-to-string';
So I tried to temporarily just change the contents of the file to:
const {
renderToString: renderToStaticMarkup, renderToString
} = require('preact-render-to-string');
module.exports = { renderToStaticMarkup, renderToString }
and then it threw this error:
Error: Next.js requires react >= 18.2.0 to be installed.
at Object.<anonymous> (D:\Default_Folders\Desktop\Projects\Javascript + Dart\AppName\web\node_modules\.pnpm\next#13.1.5_ive3jjn476xyi3ikfsqwmh5x74\node_modules\next\dist\build\webpack-config.js:1756:11)
at Module._compile (node:internal/modules/cjs/loader:1218:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1272:10)
at Module.load (node:internal/modules/cjs/loader:1081:32)
Here is my package.json if needed:
{
"name": "app_name",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"browserslist": [
"chrome 90",
"edge 90",
"firefox 90",
"opera 90",
"safari 14"
],
"dependencies": {
"#next/font": "latest",
"#react-icons/all-files": "^4.1.0",
"firebase": "^9.14.0",
"next": "^13.1.5",
"next-plugin-preact": "^3.0.7",
"nprogress": "^0.2.0",
"preact": "^10.11.3",
"preact-render-to-string": "^5.2.6",
"react": "npm:#preact/compat#^17.1.2",
"react-dom": "npm:#preact/compat#^17.1.2",
"react-hot-toast": "^2.4.0",
"react-ssr-prepass": "npm:preact-ssr-prepass#^1.2.0",
"sharp": "^0.31.3"
},
"devDependencies": {
"#next/bundle-analyzer": "^13.1.2",
"#types/node": "^18.11.9",
"#types/nprogress": "^0.2.0",
"#types/react": "^18.0.25",
"#typescript-eslint/eslint-plugin": "^5.46.0",
"autoprefixer": "^10.4.13",
"eslint": "^8.28.0",
"eslint-config-next": "^13.0.5",
"postcss": "^8.4.19",
"prettier": "^2.8.0",
"prettier-plugin-tailwindcss": "^0.2.0",
"tailwindcss": "^3.2.4",
"typescript": "^4.9.3"
}
}
Can anyone help?

Testing a smart contract using truffle ethereum, solidity, vue.js and VScode,on localhost 8080,i get a blanck page with only name and backround color

i'm trying to deploy a smart contract simple application "Hello World",every thing is running successfully ..when i run : npm run serve i get this warning :
( warning in ./node_modules/#truffle/contract/node_modules/ethers/dist/ethers.min.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted)
and when i open localhost8080 i just get the name of my application and the background-color!..no button no text or img! i try to fix it but i didn't find the error ..there are my codes if someone can help, thnx in advance:
App.vue:
<template>
<div id="app">
<img src="assets/images/logo.png" />
<horse></horse>
</div>
</template>
<script>
// # is an alias to /src
import horse from "./components/HelloHorse.vue";
export default {
name: "HelloHorse",
components: {
horse,
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Package.json:
{
"name": "hello",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"start": "node server.js"
},
"dependencies": {
"#ensdomains/address-encoder": "^0.2.16",
"#truffle/contract": "^4.4.6",
"#truffle/hdwallet-provider": "^2.0.0",
"assert": "^2.0.0",
"core-js": "^3.8.3",
"crypto-browserify": "^3.12.0",
"crypto-js": "^3.1.9-1",
"crypto-random-string": "^3.3.0",
"dotenv": "^15.0.0",
"ethers": "^5.5.4",
"express": "^4.17.3",
"fs": "^0.0.1-security",
"http": "^0.0.1-security",
"http-browserify": "^1.7.0",
"https": "^1.0.0",
"https-browserify": "^1.0.0",
"jquery": "^3.6.0",
"lint": "^0.7.0",
"os": "^0.1.2",
"path": "^0.12.7",
"serve-static": "^1.14.2",
"stream": "^0.0.2",
"stream-browserify": "^3.0.0",
"stream-http": "^3.2.0",
"truffle-hdwallet-provider": "^1.0.0-web3one.5",
"url": "^0.11.0",
"vue": "^3.2.13",
"vue-router": "^4.0.3",
"vuex": "^4.0.0",
"web3": "^1.5.3"
},
"devDependencies": {
"#babel/core": "^7.12.16",
"#babel/eslint-parser": "^7.12.16",
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-eslint": "~5.0.0",
"#vue/cli-plugin-router": "~5.0.0",
"#vue/cli-plugin-vuex": "~5.0.0",
"#vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^8.0.3",
"path-browserify": "^1.0.1",
"prettier": "^2.4.1",
"resolve-url-loader": "^5.0.0"
},
"browser": {
"http": false,
"https": false,
"os": false
},
"engines": {
"node": "16.14.0",
"npm": "8.3.1"
}
}
router>index.js:
import { createRouter, createWebHistory } from "vue-router";
import HelloYouView from "../views/HelloYou.vue";
import store from "../store/index.js";
import ContractService from "../ContractService/ContractService.js";
const routes = [
{
path: "/",
name: "Hello",
component: HelloYouView,
beforeEnter: async (to, from, next) => {
if (store.state.currentAccount != "") {
next();
} else {
const contractService = new ContractService();
var initweb3 = await contractService.initWeb3();
if (!initweb3) {
alert(
"Install MetaMask, connect you to your account and refresh web page."
);
return;
}
var loadaccount = await contractService.loadAccount();
if (loadaccount) {
store.commit("setService", contractService);
store.commit("setCurrentAccount", contractService.currentAccount);
store.commit("setContract", contractService.contracts);
next();
}
}
},
},
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
export default router;
views< helloYou.vue:
import { createRouter, createWebHistory } from "vue-router";
import HelloYouView from "../views/HelloYou.vue";
import store from "../store/index.js";
import ContractService from "../ContractService/ContractService.js";
const routes = [
{
path: "/",
name: "Hello",
component: HelloYouView,
beforeEnter: async (to, from, next) => {
if (store.state.currentAccount != "") {
next();
} else {
const contractService = new ContractService();
var initweb3 = await contractService.initWeb3();
if (!initweb3) {
alert(
"Install MetaMask, connect you to your account and refresh web page."
);
return;
}
var loadaccount = await contractService.loadAccount();
if (loadaccount) {
store.commit("setService", contractService);
store.commit("setCurrentAccount", contractService.currentAccount);
store.commit("setContract", contractService.contracts);
next();
}
}
},
},
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
export default router;
contractService.js:
var Web3 = require("web3");
var TruffleContract = require("#truffle/contract");
var $ = require("jquery");
const HelloWorld = require("../../build/contracts/HelloWorld.json");
class ContractService {
web3Provider = null;
contracts = {};
currentAccount = {};
Web3 = Web3;
TruffleContract = TruffleContract;
$ = $;
initWeb3 = function () {
if (
process.env.VUE_APP_MODE == "development" &&
typeof window.ethereum === "undefined"
) {
this.web3Provider = new this.Web3.providers.HttpProvider(
process.env.VUE_APP_LOCAL_NODE
);
} else if (typeof window.ethereum != "undefined") {
this.web3Provider = this.Web3.givenProvider;
} else {
return false;
}
this.Web3 = new this.Web3(this.web3Provider);
return true;
};
initContract = async function () {
var HelloWorldArtifact = HelloWorld;
this.contracts.HelloWorld = TruffleContract(HelloWorldArtifact);
this.contracts.HelloWorld.setProvider(this.web3Provider);
return true;
};
loadAccount = async function () {
let v_accounts;
if (typeof window.ethereum === "undefined") {
v_accounts = await this.Web3.eth.getAccounts();
} else {
v_accounts = await window.ethereum.enable();
}
this.currentAccount = v_accounts[0];
return this.initContract();
};
init = async function () {
const res = await this.initWeb3();
if (res) {
await this.initContract();
return true;
}
return false;
};
}
export default ContractService;
this what i get :
enter image description here
this is the browser's console i didn't undrestund the error
enter image description here

updating ancient react stack - Element type is invalid

I'm updating a long-departed colleague's React project, moving it from node 2/react 0.13/babel 5 to something slightly more modern with node 10/react 16/babel 7. I am relatively inexperienced with React. I am attempting to do this in a minimalist fashion, as the budget is tiny. After updating all of the libraries and dependencies to close security holes, I updated code piece by piece to correct resulting errors in the code - but I have arrived at one that is a bit inscrutable.
ReactDOM.render(<Interface />, document.getElementById('main'));
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
My understanding here is that the Interface component is of the wrong type (typeof shows it as a function). However, Interface is a component made up of a bunch of other components, so I don't know at what level the problem lies.
frontend.js
"use strict";
var React = require('react');
var ReactDOM = require('react-dom');
var Interface = require('./Interface.jsx');
ReactDOM.render(<Interface />, document.getElementById('main'));
Interface.jsx
/* jslint node: true, esnext: true, browser: true */
'use strict';
require('#babel/polyfill');
var React = require('react'), { Row, Alert } = require('react-bootstrap'), io = require('socket.io-client'), _ = require('lodash'), createReactClass = require('create-react-class');
var Submitter = require('./Submitter.jsx'),
Destination = require('./Destination.jsx'),
Options = require('./Options.jsx'),
Trace = require('./Trace.jsx'),
Finished = require('./Finished.jsx'),
DefaultOptions = require('../../lib/default-options.js');
var socket = io();
module.exports = createReactClass({
connected: function() {
console.log('connected');
this.setState({disconnected: false});
},
ack: function() {
this.state.ack = new Date().getTime();
if (this.state.disconnected) {
this.setState({disconnected: false});
}
},
stale: function(g) {
this.setState({stale: true});
clearInterval(this.state.ackInterval);
},
preferences: function(prefs) {
let options = _.assign({}, this.state.options, {submitter: prefs.submitter, postal_code: prefs.postal_code});
this.setState({options});
},
geoip: function(geoip) {
let options = _.assign({}, this.state.options, {geoip});
this.setState({options});
},
trsets: function(trsets) {
this.setState(...this.state, {trsets});
},
disconnected: function() {
console.log('disconnect');
},
update: function(incoming) {
let { type, message, content } = incoming, messages = [...this.state.messages];
// program information
if (content) {
if (content.status) {
this.state.currentStatus = content.status;
this.state.statusMessage = message;
this.state.progress = incoming.content;
}
if (content.submitted) {
this.state.submitted = content.submitted;
}
}
messages.push({ date: new Date(), type, message, content });
this.setState(...this.state, {messages});
},
submitTrace: function(options) {
this.state.currentStatus = null;
socket.emit('submitTrace', options);
},
cancelTrace: function() {
socket.emit('cancelTrace');
},
componentDidMount: function() {
socket.on('update', this.update);
socket.on('trsets', this.trsets);
socket.on('connect', this.connected);
socket.on('pong', this.ack);
socket.on('stale', this.stale);
socket.on('disconnect', this.disconnected);
socket.on('preferences', this.preferences);
socket.on('geoip', this.geoip);
let gen = new Date().getTime();
this.state.ackInterval = setInterval(() => {
if (this.state.ack) {
if (new Date().getTime() - this.state.ack > 20000) {
this.setState({disconnected: true});
}
}
socket.emit('ping', gen, this.state.ack > 0);
}, 500);
},
getInitialState: function() {
return {
options: DefaultOptions(),
messages: [],
step: 'Submitter',
currentStatus: null,
statusMessage: null,
trsets: null,
ack: 0,
lastPage: 'Submitter',
submitted : 0
};
},
render: function() {
let message;
if (this.state.stale) {
message = (
<Alert bsStyle='danger'>
<h1>Stale client</h1>
<p>This window should be closed since an active window is open. Check your other browser windows or refresh this window.</p>
</Alert>
);
} else if (this.state.disconnected) {
message = (
<Alert bsStyle='danger'>
<h1>Server disconnected</h1>
<p>The server is not responding to ping requests. It may be necessary to restart it.</p>
</Alert>
);
}
let step;
switch (this.state.step) {
case 'Destination':
step = <Destination caller={this} options={this.state.options} trsets={this.state.trsets}/>;
break;
case 'Options':
step = <Options caller={this} defaultOptions={DefaultOptions()} options={this.state.options}/>;
break;
case 'Trace':
step = <Trace caller={this} currentStatus={this.state.currentStatus} statusMessage={this.state.statusMessage} messages={this.state.messages} options={this.state.options} progress={this.state.progress} />;
break;
case 'Finished':
step = <Finished submitted={this.state.submitted} caller={this} lastPage={this.state.lastPage} />
break;
default:
step = <Submitter caller={this} options={this.state.options} />;
}
return (
<div className="container">
{message}
<Row className="col-md-12">
<form className='form-horizontal'>
{step}
</form>
</Row>
</div>
);
},
stepCall: function(to, opts, fields) {
if (fields) {
fields.forEach(i => {
this.state.options[i] = opts[i];
});
} else if (to === 'Finished') {
this.state.lastPage = opts;
}
// don't default to these anymore
delete this.state.options.geoip;
this.setState({
step: to
});
if (to === 'Trace') {
this.submitTrace(this.state.options);
}
},
savePrefs: function(prefs) {
socket.emit('savePreferences', prefs);
}
});
Submitter.jsx
/* jslint node: true, esnext: true */
var React = require('react'), {Input, Button, Panel} = require('react-bootstrap'),
createReactClass = require('create-react-class');
module.exports = createReactClass({
fields : ['submitter', 'city', 'postal_code', 'isp'],
render: function() {
var {caller} = this.props, {submitter, city, postal_code, isp, geoip} = this.state;
return (
<div>
<p>To get started, please provide your name, or pseudonym if you prefer. This is not required, but will help you find your own traceroutes later:
<input type='text' placeholder='Name or pseudonym (25 chars max)' onChange={this.change.bind(null, 'submitter')} value={submitter} className='input submitter' /></p>
<p>You appear to be near
<input type='text' placeholder='city' onChange={this.change.bind(null, 'city')} value={city} className='input city' />
<input type='text' placeholder='postal_code' onChange={this.change.bind(null, 'postal_code')} value={postal_code} className='input postal_code' /> <br />
with
<input type='text' placeholder='Internet Service Provider' onChange={this.change.bind(null, 'isp')} value={isp} className='input isp' />
as your internet service provider (ISP).</p>
<p>Please correct these if appropriate. This too is optional, but will assist in more accurately positioning the origin of the traceroutes you contribute.</p>
<Input ref='savePrefs' className='text-right' defaultChecked={true} type='checkbox' label='Store this information on your computer' />
<Button bsStyle='primary' className='pull-right' onClick={this.use}>Continue</Button>
<Button className='pull-right' onClick={this.cancel}>Cancel</Button>
</div>
);
},
change: function(field, e) {
this.setState({[field]: e.target.value});
},
getInitialState: function() {
return this.optionsWithGeoip(this.props.options, this.props.geoip);
},
componentWillReceiveProps(p) {
this.setState(this.optionsWithGeoip(p.options, p.geoip));
},
use: function() {
let options = {};
this.fields.forEach(i => {
options[i] = this.state[i];
});
if (this.refs.savePrefs.getChecked()) {
this.props.caller.savePrefs(options);
}
this.props.caller.stepCall('Destination', options, this.fields);
},
cancel: function() {
this.props.caller.stepCall('Finished', 'Submitter');
},
optionsWithGeoip: function(options) {
let geoip = options.geoip || {};
return {
submitter: options.submitter,
city: options.city || geoip.city,
postal_code: options.postal_code || geoip.postal_code,
isp: options.isp || geoip.isp
}
}
});
package.json
{
...
"scripts": {
"webpack-production": "webpack -p --config production.config.js",
"webpack": "webpack-dev-server --progress --colors --config dev.config.js --port 2050",
"dev": "NODE_ENV=development node server.js",
"public": "NODE_ENV=public node server.js",
"publicdev": "NODE_ENV=publicdev node server.js",
"start": "node server.js",
"test": "node test/*/*",
"build-macos": "pkg -t node10-macos-x64 server.js -o dist/macos/app --config package.json"
},
"pkg": {
"scripts": "lib/*.js",
"assets": "web/**/*"
},
"keywords": [
"internet mapping tool personal data traceroute surveillance"
],
"dependencies": {
"#babel/core": "^7.7.4",
"async": "^3.1.0",
"babel-core": "^7.0.0-bridge.0",
"babel-loader": "8.0.6",
"babel-preset-react": "^6.24.1",
"bootstrap": "^4.4.1",
"cheerio": "^0.22.0",
"create-react-class": "^15.6.3",
"express": "^4.17.1",
"lodash": "^4.17.15",
"lodash.template": "^4.5.0",
"moment": "^2.24.0",
"node-libs-browser": "^2.2.1",
"open": "^7.0.0",
"raw-socket": "^1.7.0",
"react": "^16.12.0",
"react-bootstrap": "^0.33.1",
"react-dom": "^16.12.0",
"request": "^2.88.0",
"socket.io": "^2.3.0",
"socket.io-client": "^2.3.0",
"webpack": "^4.41.2"
},
"devDependencies": {
"#babel/polyfill": "^7.7.0",
"#babel/preset-env": "^7.7.4",
"#babel/preset-react": "^7.0.0",
"gulp": "^4.0.2",
"gulp-less": "^4.0.1",
"gulp-notify": "^3.2.0",
"gulp-shell": "^0.7.1",
"gulp-streamify": "1.0.2",
"gulp-uglify": "^3.0.2",
"gulp-util": "^3.0.8",
"http-proxy": "^1.18.0",
"mkdirp": "^0.5.1",
"react-hot-loader": "^4.12.18",
"tape": "^4.11.0",
"vinyl-source-stream": "^2.0.0",
"watchify": "^3.11.1",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"
}
}

Can't specify a custom reporter in mocha options/mocharc/etc

I am trying to develop a custom reporter for mocha output that will be used with protractor. I have developed a good deal of the reporter and if I use the "--reporter" command line argument it works fine. However if I try to specify it in mocharc, or more importantly reporterOptions within the protractor configuration file it can't seem to find the package. Is the command line reporter flag the only way to specify a local/custom reporter? If not, how are you supposed to specify it outside of the command line?
.babelrc:
require:
- '#babel/polyfill'
- '#babel/register'
reporter: './mocha-reporter'
spec: '_src/js/tests/unit/**/*.spec.js'
package.json:
{
"name": "box",
"version": "1.0.0",
"description": "boom!",
"main": "index.js",
"scripts": {
"mocha": "mocha",
"mocha-custom": "mocha -O outputDir=_src/js/tests/reports,testDir=_src/js/tests/unit --reporter mocha-reporter",
"mochawesonme": "mocha --reporter mochawesome --reporter-options reportDir=_src/js/tests/reports,reportFilename=PCMS_unit_test_results",
"check-types": "tsc",
"clean-selenium": "webdriver-manager clean",
"update-selenium": "webdriver-manager update --standalone --versions.standalone=3.8.0",
"start-selenium": "webdriver-manager start --versions.standalone=3.8.0",
"integration-tests": "protractor protractor.conf.js"
},
"devDependencies": {
"#babel/cli": "~7.4.3",
"#babel/core": "~7.4.3",
"#babel/plugin-proposal-class-properties": "7.4.0",
"#babel/plugin-proposal-object-rest-spread": "~7.4.3",
"#babel/plugin-transform-destructuring": "~7.4.3",
"#babel/polyfill": "~7.4.3",
"#babel/preset-env": "~7.4.3",
"#babel/preset-typescript": "~7.3.3",
"#babel/register": "~7.4.0",
"#fortawesome/fontawesome-free": "5.8.1",
"#types/bluebird": "3.5.26",
"#types/jquery": "3.3.29",
"#types/knockout": "~3.4.65",
"#typescript-eslint/eslint-plugin": "~1.7.0",
"#typescript-eslint/parser": "~1.7.0",
"appcache-webpack-plugin": "~1.4.0",
"autoprefixer": "~9.5.1",
"babel-loader": "~8.0.5",
"chai": "~4.2.0",
"chai-as-promised": "7.1.1",
"copy-webpack-plugin": "~5.0.3",
"css-loader": "~2.1.1",
"eslint": "~5.16.0",
"eslint-config-airbnb-base": "~13.1.0",
"eslint-config-airbnb-typescript": "~3.0.0",
"eslint-plugin-import": "~2.17.2",
"file-loader": "~3.0.1",
"html-loader": "~0.5.5",
"html-webpack-plugin": "3.2.0",
"js-yaml": "~3.13.1",
"json-loader": "~0.5.7",
"jszip": "~3.2.1",
"karma": "~4.1.0",
"karma-chai": "~0.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-firefox-launcher": "~1.1.0",
"karma-mocha": "~1.3.0",
"karma-sinon": "~1.0.5",
"karma-webpack": "~3.0.5",
"mini-css-extract-plugin": "~0.6.0",
"mocha": "~6.1.4",
"mocha-reporter": "file:mocha-reporter",
"mochawesome": "~3.1.2",
"mochawesome-report-generator": "3.1.5",
"mochawesome-screenshots": "1.6.0",
"node-sass": "^4.12.0",
"popper.js": "~1.15.0",
"postcss-loader": "~3.0.0",
"protractor": "5.4.2",
"protractor-image-comparison": "3.1.0",
"sass-loader": "~7.1.0",
"sinon": "~7.3.2",
"style-loader": "~0.23.1",
"typescript": "~3.4.5",
"url-loader": "~1.1.2",
"webpack": "~4.30.0",
"webpack-cli": "~3.3.1",
"webpack-dev-server": "~3.3.1"
},
"dependencies": {
"bluebird": "~3.5.4",
"bootstrap": "3.3.7",
"d3": "~5.9.2",
"isomorphic-fetch": "2.2.1",
"jquery": "^3.4.0",
"jquery-ui": "~1.12.1",
"knockout": "~3.5.0",
"knockout-mapping": "~2.6.0",
"lodash": "~4.17.11",
"numeral": "~2.0.6",
"page": "~1.11.4"
}
}
index.js:
import mochaBaseReporter from 'mocha/lib/reporters/base';
import { takeScreenShot } from './javascript/screenShots';
import { populateTestResults } from './javascript/testTree';
import {
getFileContents,
writeToOutputFile,
} from './javascript/fileSystemAccess';
import {
getTemplate,
parseTestsIntoOutput,
addValuesToTemplate,
} from './javascript/templating';
import {
SUCCESS,
FAILURE,
FINISHED,
} from './constants';
const addStyle = template => getFileContents('styles.css')
.then(styles => addValuesToTemplate(template, { styles }))
.catch(error => console.log('file read of styles.css failed', error));
const createReport = (outputDirectory, fileName, data) => getTemplate('report')
.then(template => addValuesToTemplate(template, { 'test-suites': data }))
.then(template => writeToOutputFile(outputDirectory, `${fileName}.html`, template))
.catch(error => console.log('file read of template.html failed', error));
function mochaReporter(runner, environment) {
const tests = {};
const fileName = 'testfile';
const { outputDir, testDir, takeScreenShotOnFailure } = environment.reporterOptions || {};
const outputDirectory = outputDir && `${process.cwd()}/${outputDir}`;
const accumulateTestResults = (test, image) => populateTestResults(test, testDir, tests, image);
mochaBaseReporter.call(this, runner);
runner.on(SUCCESS, accumulateTestResults);
runner.on(FAILURE, test => (
takeScreenShotOnFailure && window
? takeScreenShot()
: Promise.resolve()
).then(image => accumulateTestResults(test, image)));
runner.on(FINISHED, () => {
parseTestsIntoOutput(tests)
.then(addStyle)
.then(template => addValuesToTemplate(template, runner.stats))
.then(html => createReport(outputDirectory, fileName, html))
.then(() => writeToOutputFile(
`${outputDirectory}/history`,
`test-run-${Date.now()}.json`,
JSON.stringify(tests),
));
});
return runner;
}
module.exports = mochaReporter;
protractor.conf:
/* eslint-disable global-require */
/* eslint-disable #typescript-eslint/no-var-requires */
const protractor = require('protractor');
const { join } = require('path');
const testDirectory = '_src/js/tests';
const baseDirectory = `${testDirectory}/integration/`;
// specifies whether tests will be run in parralel or not
const shardTestFiles = true;
// specifies how many browsers/drivers may be run in parralel
const maxInstances = 4;
function onPrepare() {
// register typescript file extensions with the babel compiler
require('#babel/register')({ extensions: ['.js', '.ts'] });
require('#babel/polyfill');
// don't wait for angular (since our app is currently not angular)
protractor.browser.waitForAngularEnabled(false);
// hot fix for protractor strange map behavior
// found here: https://github.com/angular/protractor/issues/2227#issuecomment-337249891
protractor.ElementArrayFinder.prototype.map = function mapHotFix(mapFn) {
return this.reduce((arr, el) => arr.concat(mapFn(el, arr.length)), []);
};
}
exports.config = {
// mocha configuration
framework: 'mocha',
mochaOpts: {
reporter: './mocha-reporter',
reporterOptions: {
outputDir: `${testDirectory}/reports`,
testDir: `${baseDirectory}/endToEnd`,
takeScreenShotOnFailure: true,
},
timeout: 600000,
slow: 3000,
},
seleniumAddress: 'http://localhost:4444/wd/hub',
// turn off promise management in favor of async/await
SELENIUM_PROMISE_MANAGER: false,
// spec config
specs: [`${baseDirectory}/endToEnd/**/*.spec.js`],
// browser configuration
timeout: 100000,
multiCapabilities: [
{
browserName: 'chrome',
shardTestFiles,
maxInstances,
chromeOptions: {
args: [
// 'show-fps-counter=true',
'--headless',
// '--disable-gpu',
'--window-size=1300,1000',
],
},
},
{
browserName: 'firefox',
shardTestFiles,
maxInstances,
'moz:firefoxOptions': {
args: [
'--headless',
],
},
},
],
onPrepare,
plugins: [
{
package: 'protractor-image-comparison',
options: {
baselineFolder: join(process.cwd(), `${baseDirectory}/screenshots/baseline/`),
screenshotPath: join(process.cwd(), `${baseDirectory}/screenshots/tmp/`),
formatImageName: '{tag}-{logName}-{width}x{height}',
savePerInstance: true,
autoSaveBaseline: true,
},
},
],
};

I could not find a way to load the local file directly, however I gave it a package.json and installed it directly to node_modules with npm. To be specific I ran
npm install ./mocha-reporter --save-dev
on my project directory after creating a package.json within the project folder. After some debugging I was able to solve my issue since the package was now a part of node's named packages.

Protractor - SyntaxError: Unexpected identifier

I wrote some tests in Protractor, but sadly I have little problem with import/export files.
HomePage.js
export default class HomePage {
constructor() {
this.path = 'http://automationpractice.com/index.php';
this.searchQuery = element(by.css('.search_query'));
this.searchButton = element(by.name('submit_search'));
this.signInButtonHeader = element(by.css('.header_user_info'));
this.emailInput = element(by.id('email'));
this.passwordInput = element(by.id('passwd'));
this.logInButton = element(by.id('SubmitLogin'));
}
}
homepage-spec.js
import HomePage from '../page_objects/HomePage';
browser.waitForAngularEnabled(false);
const homePage = new HomePage();
beforeEach(async () => {
browser.get(homePage.path);
});
describe('Homepage', () => {
it('should have a title', () => {
expect(browser.getTitle()).toEqual('My Store');
});
it('Log into your account', () => {
homePage.signInButtonHeader.click();
homePage.emailInput.sendKeys('testprotractor#gmail.com');
homePage.passwordInput.sendKeys('xxxx');
homePage.logInButton.click();
});
it('Check categories', () => {
element(by.linkText('Women')).click();
});
});`
conf.js
const SpecReporter = require('jasmine-spec-reporter').SpecReporter;
require('#babel/register');
exports.config = {
framework: 'jasmine',
capabilities: {
browserName: 'chrome',
},
suites: {
homePage: 'specs/homepage-spec.js',
searchResults: 'specs/search-results-spec.js',
},
onPrepare: () => {
jasmine.getEnv().addReporter(new SpecReporter({
spec: {
displayStacktrace: true,
},
}));
},
};
package.json
{
"name": "protractorautomation",
"version": "1.0.0",
"description": "This is my test",
"main": "conf.js",
"dependencies": {
"babel-eslint": "^10.0.1",
"#babel/register": "^7.0.0",
"eslint": "^5.3.0",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-plugin-import": "^2.14.0",
"jasmine-spec-reporter": "^4.2.1"
},
"devDependencies": {
"#babel/core": "^7.2.2",
"babel-preset-env": "^1.7.0",
"babel-register": "^6.26.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"Protractor"
],
"author": "Xxxx",
"license": "ISC"
}
Whenever I run tests, receive this error:
(function (exports, require, module, __filename, __dirname) { import
HomePage from '../page_objects/HomePage'; ^^^^^^^^
SyntaxError: Unexpected identifier
at new Script (vm.js:84:7)
at createScript (vm.js:264:10)
at Object.runInThisContext (vm.js:312:10)
at Module._compile (internal/modules/cjs/loader.js:694:28)
at Module._compile (C:\Users\X\Documents\protractorAutomation\node_modules\pirates\lib\index.js:83:24)
at Module._extensions..js (internal/modules/cjs/loader.js:745:10)
at Object.newLoader [as .js] (C:\Users\Mati\Documents\protractorAutomation\node_modules\pirates\lib\index.js:88:7)
at Module.load (internal/modules/cjs/loader.js:626:32)
at tryModuleLoad (internal/modules/cjs/loader.js:566:12)
at Function.Module._load (internal/modules/cjs/loader.js:558:3) [16:53:29] E/launcher - Process exited with error code 100
Anyone can help me fix this problem?

It appears that the es6 style of imports you are attempting to use are not supported natively in NodeJS.
According to this answer you have two options. I have created an example of the first for you to try.
module.exports = class HomePage {
constructor() {
this.path = 'http://automationpractice.com/index.php';
this.searchQuery = element(by.css('.search_query'));
this.searchButton = element(by.name('submit_search'));
this.signInButtonHeader = element(by.css('.header_user_info'));
this.emailInput = element(by.id('email'));
this.passwordInput = element(by.id('passwd'));
this.logInButton = element(by.id('SubmitLogin'));
}
}
Change Import to require
//Change import statement to standard require
let HomePage = require('../page_objects/HomePage');
browser.waitForAngularEnabled(false);
const homePage = new HomePage();
beforeEach(async () => {
browser.get(homePage.path);
});
describe('Homepage', () => {
it('should have a title', () => {
expect(browser.getTitle()).toEqual('My Store');
});
it('Log into your account', () => {
homePage.signInButtonHeader.click();
homePage.emailInput.sendKeys('testprotractor#gmail.com');
homePage.passwordInput.sendKeys('xxxx');
homePage.logInButton.click();
});
it('Check categories', () => {
element(by.linkText('Women')).click();
});
});