I am trying to convert React.js web app to desktop app through Electron. Please find the error trace, scripts/start.js, and package.json. When I comment out require('../config/env'); it starts giving same error on const paths = require('../config/paths');
start.js
'use strict';
// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = 'development';
process.env.NODE_ENV = 'development';
// Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code.
process.on('unhandledRejection', err => {
throw err;
});
// Ensure environment variables are read.
require('../config/env');
const fs = require('fs');
const chalk = require('chalk');
const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const clearConsole = require('react-dev-utils/clearConsole');
const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
const {
choosePort,
createCompiler,
prepareProxy,
prepareUrls,
} = require('react-dev-utils/WebpackDevServerUtils');
const openBrowser = require('react-dev-utils/openBrowser');
const paths = require('../config/paths');
const config = require('../config/webpack.config.dev');
const createDevServerConfig = require('../config/webpackDevServer.config');
const useYarn = fs.existsSync(paths.yarnLockFile);
const isInteractive = process.stdout.isTTY;
// Warn and crash if required files are missing
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
process.exit(1);
}
// Tools like Cloud9 rely on this.
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
const HOST = process.env.HOST || '0.0.0.0';
if (process.env.HOST) {
console.log(
chalk.cyan(
`Attempting to bind to HOST environment variable: ${chalk.yellow(
chalk.bold(process.env.HOST)
)}`
)
);
console.log(
`If this was unintentional, check that you haven't mistakenly set it in your shell.`
);
console.log(`Learn more here: ${chalk.yellow('bitLyLink')}`);
console.log();
}
// We attempt to use the default port but if it is busy, we offer the user to
// run on a different port. `choosePort()` Promise resolves to the next free port.
choosePort(HOST, DEFAULT_PORT)
.then(port => {
if (port == null) {
// We have not found a port.
return;
}
const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
const appName = require(paths.appPackageJson).name;
const urls = prepareUrls(protocol, HOST, port);
// Create a webpack compiler that is configured with custom messages.
const compiler = createCompiler(webpack, config, appName, urls, useYarn);
// Load proxy config
const proxySetting = require(paths.appPackageJson).proxy;
const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
// Serve webpack assets generated by the compiler over a web sever.
const serverConfig = createDevServerConfig(
proxyConfig,
urls.lanUrlForConfig
);
const devServer = new WebpackDevServer(compiler, serverConfig);
// Launch WebpackDevServer.
devServer.listen(port, HOST, err => {
if (err) {
return console.log(err);
}
if (isInteractive) {
clearConsole();
}
console.log(chalk.cyan('Starting the development server...\n'));
openBrowser(urls.localUrlForBrowser);
});
['SIGINT', 'SIGTERM'].forEach(function(sig) {
process.on(sig, function() {
devServer.close();
process.exit();
});
});
})
.catch(err => {
if (err && err.message) {
console.log(err.message);
}
process.exit(1);
});
package.json
{
"name": "utility-core",
"version": "0.1.0",
"private": true,
"main": "public/electron.js",
"homepage": "./",
"dependencies": {
"autoprefixer": "7.1.6",
"axios": "^0.18.0",
"babel-core": "6.26.0",
"babel-eslint": "7.2.3",
"babel-jest": "20.0.3",
"babel-loader": "7.1.2",
"babel-preset-react-app": "^3.1.1",
"babel-runtime": "6.26.0",
"bootstrap": "^4.1.3",
"case-sensitive-paths-webpack-plugin": "2.1.1",
"chalk": "1.1.3",
"concurrently": "^4.1.1",
"css-loader": "0.28.7",
"dotenv": "4.0.0",
"dotenv-expand": "4.2.0",
"electron-is-dev": "^1.1.0",
"eslint": "4.10.0",
"eslint-config-react-app": "^2.1.0",
"eslint-loader": "1.9.0",
"eslint-plugin-flowtype": "2.39.1",
"eslint-plugin-import": "2.8.0",
"eslint-plugin-jsx-a11y": "5.1.1",
"eslint-plugin-react": "7.4.0",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.5",
"fs-extra": "3.0.1",
"html-webpack-plugin": "2.29.0",
"jest": "20.0.4",
"jquery": "^3.4.1",
"mdbreact": "^4.15.0",
"object-assign": "4.1.1",
"papaparse": "^4.6.0",
"postcss-flexbugs-fixes": "3.2.0",
"postcss-loader": "2.0.8",
"promise": "8.0.1",
"raf": "3.4.0",
"react": "^16.4.1",
"react-dev-utils": "^5.0.1",
"react-dom": "^16.4.1",
"react-file-reader": "^1.1.4",
"react-router-dom": "^4.2.0",
"react-spinners": "^0.4.6",
"resolve": "1.6.0",
"style-loader": "0.19.0",
"sw-precache-webpack-plugin": "0.11.4",
"universal-cookie": "^3.0.4",
"url-loader": "0.6.2",
"wait-on": "^3.2.0",
"webpack": "3.8.1",
"webpack-dev-server": "2.9.4",
"webpack-manifest-plugin": "1.3.2",
"whatwg-fetch": "2.0.3"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom",
"electron-dev": "concurrently \" cross-env BROWSER=none npm run start\" \"wait-on http://localhost:3000 && electron .\"",
"electron-pack": "build -c.extraMetadata.main=build/electron.js",
"preelectron-pack": "npm run build"
},
"devDependencies": {
"cross-env": "^5.2.0",
"csv-loader": "^3.0.2",
"electron": "^1.8.8",
"electron-builder": "^20.44.4",
"electron-installer-windows": "^2.0.0",
"electron-packager": "^8.7.2"
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx,mjs}"
],
"setupFiles": [
"<rootDir>/config/polyfills.js"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
"<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
],
"testEnvironment": "node",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web"
},
"moduleFileExtensions": [
"web.js",
"js",
"json",
"web.jsx",
"jsx",
"node",
"mjs"
]
},
"babel": {
"presets": [
"env",
"react-app"
],
"plugins": []
},
"eslintConfig": {
"extends": "react-app"
},
"author": "Zain Ul Abideen",
"license": "ISC",
"build": {
"extends": null,
"appId": "com.example.utility-core",
"files": [
"build/**/*",
"node_modules/**/*",
"./public/electron.js"
],
"directories": {
"buildResources": "assets"
}
}
}
Error
D:\Import Utility\fc-import-utility\utility-core>npm run electron-dev
> utility-core#0.1.0 electron-dev D:\Import Utility\fc-import-utility\utility-core
> concurrently " cross-env BROWSER=none npm run start" "wait-on http://localhost:3000 && electron ."
[0]
[0] > utility-core#0.1.0 start D:\Import Utility\fc-import-utility\utility-core
[0] > node scripts/start.js
[0]
[0] internal/modules/cjs/loader.js:613
throw err;
[0] ^
[0]
[0] Error: Cannot find module '../config/paths'
[0] Require stack:
[0] - D:\Import Utility\fc-import-utility\utility-core\scripts\start.js
[0] at Function.Module._resolveFilename (internal/modules/cjs/loader.js:610:15)
[0] at Function.Module._load (internal/modules/cjs/loader.js:526:27)
[0] at Module.require (internal/modules/cjs/loader.js:666:19)
[0] at require (internal/modules/cjs/helpers.js:16:16)
[0] at Object.<anonymous> (D:\Import Utility\fc-import-utility\utility-core\scripts\start.js:30:15)
[0] at Module._compile (internal/modules/cjs/loader.js:759:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:770:10)
[0] at Module.load (internal/modules/cjs/loader.js:628:32)
[0] at Function.Module._load (internal/modules/cjs/loader.js:555:12)
[0] at Function.Module.runMain (internal/modules/cjs/loader.js:822:10)
[0]
[0] npm ERR! Windows_NT 10.0.17134
[0] npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\HP\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "start"
[0] npm ERR! node v12.2.0
[0] npm ERR! npm v3.8.6
npm ERR! code ELIFECYCLE
[0] npm ERR! utility-core#0.1.0 start: `node scripts/start.js`
[0] npm ERR! Exit status 1
[0] npm ERR!
[0] npm ERR! Failed at the utility-core#0.1.0 start script 'node scripts/start.js'.
[0] npm ERR! Make sure you have the latest version of node.js and npm installed.
[0] npm ERR! If you do, this is most likely a problem with the utility-core package,
[0] npm ERR! not with npm itself.
[0] npm ERR! Tell the author that this fails on your system:
[0] npm ERR! node scripts/start.js
[0] npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs utility-core
[0] npm ERR! Or if that isn't available, you can get their info via:
[0] npm ERR! npm owner ls utility-core
[0] npm ERR! There is likely additional logging output above.
[0]
[0] npm ERR! Please include the following file with any support request:
[0] npm ERR! D:\Import Utility\fc-import-utility\utility-core\npm-debug.log
[0] cross-env BROWSER=none npm run start exited with code 1
Related
I'm building a project based off the Electron React Boilerplate project. I am running MacOS 10.15.7 and node v14.15.1.
I'm trying to install sqlite3 package. Since it's a native dependency, I ran yarn add sqlite3 inside the src/ directory, like it says to do here. The compilation fails with the following output:
henryoconnor#Henrys-MacBook-Pro-5 src % yarn add sqlite3
yarn add v1.22.10
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ sqlite3#5.0.2
info All dependencies
└─ sqlite3#5.0.2
$ yarn electron-rebuild
yarn run v1.22.10
$ node -r ../.erb/scripts/BabelRegister.js ../.erb/scripts/ElectronRebuild.js
⠴ Building modules: 0/1gyp info find Python using Python version 2.7.16 found at "/System/Library/Frameworks/Python.framework/Versions/2.7/Resources/Python.app/Contents/MacOS/Python"
⠦ Building modules: 0/1gyp info spawn /System/Library/Frameworks/Python.framework/Versions/2.7/Resources/Python.app/Contents/MacOS/Python
gyp info spawn args [
gyp info spawn args '/Users/henryoconnor/Documents/secretary/electron-app/node_modules/node-gyp/gyp/gyp_main.py',
gyp info spawn args 'binding.gyp',
gyp info spawn args '-f',
gyp info spawn args 'make',
gyp info spawn args '-I',
gyp info spawn args '/Users/henryoconnor/Documents/secretary/electron-app/src/node_modules/sqlite3/build/config.gypi',
gyp info spawn args '-I',
gyp info spawn args '/Users/henryoconnor/Documents/secretary/electron-app/node_modules/node-gyp/addon.gypi',
gyp info spawn args '-I',
gyp info spawn args '/Users/henryoconnor/.electron-gyp/11.3.0/include/node/common.gypi',
gyp info spawn args '-Dlibrary=shared_library',
gyp info spawn args '-Dvisibility=default',
gyp info spawn args '-Dnode_root_dir=/Users/henryoconnor/.electron-gyp/11.3.0',
gyp info spawn args '-Dnode_gyp_dir=/Users/henryoconnor/Documents/secretary/electron-app/node_modules/node-gyp',
gyp info spawn args '-Dnode_lib_file=/Users/henryoconnor/.electron-gyp/11.3.0/<(target_arch)/node.lib',
gyp info spawn args '-Dmodule_root_dir=/Users/henryoconnor/Documents/secretary/electron-app/src/node_modules/sqlite3',
gyp info spawn args '-Dnode_engine=v8',
gyp info spawn args '--depth=.',
gyp info spawn args '--no-parallel',
gyp info spawn args '--generator-output',
gyp info spawn args 'build',
gyp info spawn args '-Goutput_dir=.'
gyp info spawn args ]
⠸ Building modules: 0/1No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.
No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.
No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.
⠴ Building modules: 0/1gyp info spawn make
gyp info spawn args [ 'BUILDTYPE=Release', '-C', 'build' ]
CC(target) Release/obj.target/nothing/../node-addon-api/nothing.o
⠧ Building modules: 0/1 LIBTOOL-STATIC Release/nothing.a
⠋ Building modules: 0/1 ACTION deps_sqlite3_gyp_action_before_build_target_unpack_sqlite_dep Release/obj/gen/sqlite-autoconf-3340000/sqlite3.c
⠼ Building modules: 0/1 TOUCH Release/obj.target/deps/action_before_build.stamp
⠴ Building modules: 0/1 CC(target) Release/obj.target/sqlite3/gen/sqlite-autoconf-3340000/sqlite3.o
⠸ Building modules: 0/1 LIBTOOL-STATIC Release/sqlite3.a
⠴ Building modules: 0/1 CXX(target) Release/obj.target/node_sqlite3/src/backup.o
⠹ Building modules: 0/1In file included from ../src/backup.cc:2:
In file included from /Users/henryoconnor/Documents/secretary/electron-app/src/node_modules/node-addon-api/napi.h:2636:
/Users/henryoconnor/Documents/secretary/electron-app/src/node_modules/node-addon-api/napi-inl.h:1575:24: error: use of undeclared
identifier 'napi_is_detached_arraybuffer'; did you mean 'napi_is_arraybuffer'?
napi_status status = napi_is_detached_arraybuffer(_env, _value, &detached);
^~~~~~~~~~~~~~~~~~~~~~~~~~~~
napi_is_arraybuffer
/Users/henryoconnor/.electron-gyp/11.3.0/include/node/js_native_api.h:383:25: note: 'napi_is_arraybuffer' declared here
NAPI_EXTERN napi_status napi_is_arraybuffer(napi_env env,
^
In file included from ../src/backup.cc:2:
In file included from /Users/henryoconnor/Documents/secretary/electron-app/src/node_modules/node-addon-api/napi.h:2636:
/Users/henryoconnor/Documents/secretary/electron-app/src/node_modules/node-addon-api/napi-inl.h:1581:24: error: use of undeclared
identifier 'napi_detach_arraybuffer'
napi_status status = napi_detach_arraybuffer(_env, _value);
^
⠴ Building modules: 0/1../src/backup.cc:179:9: warning: unused variable 'status' [-Wunused-variable]
int status = napi_create_async_work(
^
../src/backup.cc:252:5: warning: unused variable 'status' [-Wunused-variable]
BACKUP_BEGIN(Step);
^
../src/macros.h:182:9: note: expanded from macro 'BACKUP_BEGIN'
int status = napi_create_async_work( \
^
../src/backup.cc:319:5: warning: unused variable 'status' [-Wunused-variable]
BACKUP_BEGIN(Finish);
^
../src/macros.h:182:9: note: expanded from macro 'BACKUP_BEGIN'
int status = napi_create_async_work( \
^
⠧ Building modules: 0/13 warnings and 2 errors generated.
make: *** [Release/obj.target/node_sqlite3/src/backup.o] Error 1
✖ Rebuild Failed
An unhandled error occurred inside electron-rebuild
node-gyp failed to rebuild '/Users/henryoconnor/Documents/secretary/electron-app/src/node_modules/sqlite3'.
Error: `make` failed with exit code: 2
Error: node-gyp failed to rebuild '/Users/henryoconnor/Documents/secretary/electron-app/src/node_modules/sqlite3'.
Error: `make` failed with exit code: 2
at ModuleRebuilder.rebuildNodeGypModule (/Users/henryoconnor/Documents/secretary/electron-app/node_modules/electron-rebuild/lib/src/module-rebuilder.js:193:19)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at async Rebuilder.rebuildModuleAt (/Users/henryoconnor/Documents/secretary/electron-app/node_modules/electron-rebuild/lib/src/rebuild.js:190:9)
at async Promise.all (index 105)
at async Rebuilder.rebuild (/Users/henryoconnor/Documents/secretary/electron-app/node_modules/electron-rebuild/lib/src/rebuild.js:148:13)
at async /Users/henryoconnor/Documents/secretary/electron-app/node_modules/electron-rebuild/lib/src/cli.js:146:9
child_process.js:655
throw err;
^
Error: Command failed: ../node_modules/.bin/electron-rebuild --parallel --force --types prod,dev,optional --module-dir .
at checkExecSyncError (child_process.js:616:11)
at execSync (child_process.js:652:15)
at Object.<anonymous> (/Users/henryoconnor/Documents/secretary/electron-app/.erb/scripts/ElectronRebuild.js:18:3)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Module._compile (/Users/henryoconnor/Documents/secretary/electron-app/node_modules/pirates/lib/index.js:99:24)
at Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Object.newLoader [as .js] (/Users/henryoconnor/Documents/secretary/electron-app/node_modules/pirates/lib/index.js:104:7)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12) {
status: 255,
signal: null,
output: [ null, null, null ],
pid: 9189,
stdout: null,
stderr: null
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
package.json
{
"name": "secretary",
"productName": "Secretary",
"description": "A personal secretary for handling daily work.",
"scripts": {
"build": "concurrently \"yarn build:main\" \"yarn build:renderer\"",
"build:main": "cross-env NODE_ENV=production webpack --config ./.erb/configs/webpack.config.main.prod.babel.js",
"build:renderer": "cross-env NODE_ENV=production webpack --config ./.erb/configs/webpack.config.renderer.prod.babel.js",
"rebuild": "electron-rebuild --parallel --types prod,dev,optional --module-dir src",
"lint": "cross-env NODE_ENV=development eslint . --cache --ext .js,.jsx,.ts,.tsx",
"package": "rm -rf src/dist && yarn build && electron-builder build --publish never",
"postinstall": "node -r #babel/register .erb/scripts/CheckNativeDep.js && electron-builder install-app-deps && yarn cross-env NODE_ENV=development webpack --config ./.erb/configs/webpack.config.renderer.dev.dll.babel.js && opencollective-postinstall && yarn-deduplicate yarn.lock",
"start": "node -r #babel/register ./.erb/scripts/CheckPortInUse.js && cross-env yarn start:renderer",
"start:main": "cross-env NODE_ENV=development electron -r ./.erb/scripts/BabelRegister ./src/main.dev.ts",
"start:renderer": "cross-env NODE_ENV=development webpack serve --config ./.erb/configs/webpack.config.renderer.dev.babel.js",
"test": "jest"
},
"lint-staged": {
"*.{js,jsx,ts,tsx}": [
"cross-env NODE_ENV=development eslint --cache"
],
"{*.json,.{babelrc,eslintrc,prettierrc}}": [
"prettier --ignore-path .eslintignore --parser json --write"
],
"*.{css,scss}": [
"prettier --ignore-path .eslintignore --single-quote --write"
],
"*.{html,md,yml}": [
"prettier --ignore-path .eslintignore --single-quote --write"
]
},
"build": {
"productName": "Secretary",
"appId": "secretary",
"files": [
"dist/",
"node_modules/",
"index.html",
"main.prod.js",
"main.prod.js.map",
"package.json"
],
"afterSign": ".erb/scripts/Notarize.js",
"mac": {
"target": [
"dmg"
],
"type": "distribution",
"hardenedRuntime": true,
"entitlements": "assets/entitlements.mac.plist",
"entitlementsInherit": "assets/entitlements.mac.plist",
"gatekeeperAssess": false
},
"dmg": {
"contents": [
{
"x": 130,
"y": 220
},
{
"x": 410,
"y": 220,
"type": "link",
"path": "/Applications"
}
]
},
"win": {
"target": [
"nsis"
]
},
"linux": {
"target": [
"AppImage"
],
"category": "Development"
},
"directories": {
"app": "src",
"buildResources": "assets",
"output": "release"
},
"extraResources": [
"./assets/**"
],
"publish": {
"provider": "github",
"owner": "electron-react-boilerplate",
"repo": "electron-react-boilerplate"
}
},
"jest": {
"testURL": "http://localhost/",
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/.erb/mocks/fileMock.js",
"\\.(css|less|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"js",
"jsx",
"ts",
"tsx",
"json"
],
"moduleDirectories": [
"node_modules",
"src/node_modules"
],
"setupFiles": [
"./.erb/scripts/CheckBuildsExist.js"
]
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/plugin-proposal-class-properties": "^7.12.1",
"#babel/plugin-proposal-decorators": "^7.12.1",
"#babel/plugin-proposal-do-expressions": "^7.12.1",
"#babel/plugin-proposal-export-default-from": "^7.12.1",
"#babel/plugin-proposal-export-namespace-from": "^7.12.1",
"#babel/plugin-proposal-function-bind": "^7.12.1",
"#babel/plugin-proposal-function-sent": "^7.12.1",
"#babel/plugin-proposal-json-strings": "^7.12.1",
"#babel/plugin-proposal-logical-assignment-operators": "^7.12.1",
"#babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
"#babel/plugin-proposal-optional-chaining": "^7.12.7",
"#babel/plugin-proposal-pipeline-operator": "^7.12.1",
"#babel/plugin-proposal-throw-expressions": "^7.12.1",
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/plugin-syntax-import-meta": "^7.10.4",
"#babel/plugin-transform-react-constant-elements": "^7.12.1",
"#babel/plugin-transform-react-inline-elements": "^7.12.1",
"#babel/plugin-transform-runtime": "^7.12.1",
"#babel/preset-env": "^7.12.7",
"#babel/preset-react": "^7.12.7",
"#babel/preset-typescript": "^7.12.7",
"#babel/register": "^7.12.1",
"#pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
"#teamsupercell/typings-for-css-modules-loader": "^2.4.0",
"#testing-library/jest-dom": "^5.11.6",
"#testing-library/react": "^11.2.2",
"#types/enzyme": "^3.10.5",
"#types/enzyme-adapter-react-16": "^1.0.6",
"#types/history": "4.7.6",
"#types/jest": "^26.0.15",
"#types/node": "14.14.10",
"#types/react": "^16.9.44",
"#types/react-dom": "^16.9.9",
"#types/react-router-dom": "^5.1.6",
"#types/react-test-renderer": "^16.9.3",
"#types/webpack-env": "^1.15.2",
"#typescript-eslint/eslint-plugin": "^4.8.1",
"#typescript-eslint/parser": "^4.8.1",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.1.0",
"babel-loader": "^8.2.2",
"babel-plugin-dev-expression": "^0.2.2",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"browserslist-config-erb": "^0.0.1",
"chalk": "^4.1.0",
"concurrently": "^5.3.0",
"core-js": "^3.6.5",
"cross-env": "^7.0.2",
"css-loader": "^5.0.1",
"css-minimizer-webpack-plugin": "^1.1.5",
"detect-port": "^1.3.0",
"electron": "^11.0.1",
"electron-builder": "^22.3.6",
"electron-devtools-installer": "^3.1.1",
"electron-notarize": "^1.0.0",
"electron-rebuild": "^2.3.2",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.3",
"enzyme-to-json": "^3.5.0",
"eslint": "^7.5.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-airbnb-typescript": "^12.0.0",
"eslint-config-erb": "^2.0.0",
"eslint-config-prettier": "^6.11.0",
"eslint-import-resolver-webpack": "^0.13.0",
"eslint-plugin-compat": "^3.8.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jest": "^24.1.3",
"eslint-plugin-jsx-a11y": "6.4.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.20.6",
"eslint-plugin-react-hooks": "^4.0.8",
"file-loader": "^6.0.0",
"husky": "^4.2.5",
"identity-obj-proxy": "^3.0.0",
"jest": "^26.1.0",
"lint-staged": "^10.2.11",
"mini-css-extract-plugin": "^1.3.1",
"node-sass": "^5.0.0",
"opencollective-postinstall": "^2.0.3",
"prettier": "^2.0.5",
"react-refresh": "^0.9.0",
"react-test-renderer": "^17.0.1",
"rimraf": "^3.0.0",
"sass-loader": "^10.1.0",
"style-loader": "^2.0.0",
"terser-webpack-plugin": "^5.0.3",
"typescript": "^4.0.5",
"url-loader": "^4.1.0",
"webpack": "^5.5.1",
"webpack-bundle-analyzer": "^4.1.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^5.4.0",
"yarn-deduplicate": "^3.1.0"
},
"dependencies": {
"#fullcalendar/daygrid": "^5.5.0",
"#fullcalendar/react": "^5.5.0",
"#getstation/electron-google-oauth2": "^2.1.0",
"#reduxjs/toolkit": "^1.5.0",
"#tippyjs/react": "^4.2.0",
"electron-debug": "^3.1.0",
"electron-log": "^4.2.4",
"electron-updater": "^4.3.4",
"googleapis": "^67.1.0",
"history": "^5.0.0",
"jquery": "^3.5.1",
"js-cookie": "^2.2.1",
"lodash": "^4.17.21",
"moment": "^2.29.1",
"moment-timezone": "^0.5.33",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-modal": "^3.12.1",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0",
"regenerator-runtime": "^0.13.7",
"reselect": "^4.0.0",
"sanitize-html": "^2.3.2",
"source-map-support": "^0.5.19",
"styled-components": "^5.2.1"
},
"devEngines": {
"node": ">=10.x",
"npm": ">=6.x",
"yarn": ">=1.21.3"
},
"browserslist": [],
"prettier": {
"overrides": [
{
"files": [
".prettierrc",
".babelrc",
".eslintrc"
],
"options": {
"parser": "json"
}
}
],
"singleQuote": true
},
"renovate": {
"extends": [
"bliss"
],
"baseBranches": [
"next"
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
}
}
src/package.json
{
"name": "electron-react-boilerplate",
"productName": "electron-react-boilerplate",
"version": "2.3.0",
"description": "Electron application boilerplate based on React, React Router, Webpack, React Hot Loader for rapid application development",
"main": "./main.prod.js",
"author": {
"name": "Electron React Boilerplate Maintainers",
"email": "electronreactboilerplate#gmail.com",
"url": "https://github.com/electron-react-boilerplate"
},
"scripts": {
"electron-rebuild": "node -r ../.erb/scripts/BabelRegister.js ../.erb/scripts/ElectronRebuild.js",
"postinstall": "yarn electron-rebuild"
},
"license": "MIT",
"dependencies": {
"sqlite": "^4.0.19",
"sqlite3": "^5.0.2"
}
}
I downgraded the sqlite3 package to v5.0.0 and it rebuilt correctly. Hope this helps anyone else with the same issue.
Source: nodejs electronjs sqlite3 - use of undeclared identifier 'napi_is_detached_arraybuffer'
I'm trying to resurrect my automated KSS build process which died a year ago after I upgraded Node for another project.
KSS works fine when I run it directly via the command line ($ ./node_modules/kss/bin/kss --config kss-config.json)
But when I run it via gulp using node spawn I get the following error:
user#computer /c/users/user/Documents/projects/kss
$ gulp
[12:04:42] Using gulpfile C:\users\user\Documents\projects\kss\gulpfile.js
[12:04:42] Starting 'default'...
[12:04:42] Starting 'compileKss'...
[12:04:42] 'compileKss' errored after 3.21 ms
[12:04:42] Error: spawn ./node_modules/kss/bin/kss ENOENT
at Process.ChildProcess._handle.onexit (internal/child_process.js:264:19)
at onErrorNT (internal/child_process.js:456:16)
at processTicksAndRejections (internal/process/task_queues.js:80:21)
[12:04:42] 'default' errored after 6.78 ms
My gulp file looks like this:
'use strict'
/**
* Some useful links to help with understanding this file:
* * https://www.webstoemp.com/blog/switching-to-gulp4/
*/
const { series } = require('gulp')
const childProcess = require('child_process')
/**
* a Gulp task for compiling Sass files to CSS and creating source maps
*/
const compileKss = (gulpCallBack) => {
const kss = childProcess.spawn(
'./node_modules/kss/bin/kss',
[
'--config',
'./kss-config.json'
]
)
kss.on('exit', (code) => {
const errorMsg = (code === 0) ? null : 'ERROR: kss-node process exited with code: ' + code
gulpCallBack(errorMsg)
})
return kss
}
exports.default = series(compileKss)
and my kss config file looks like this:
{
"title": "KSS style guide",
"source": [
"./style-guide/css/"
],
"destination": "./style-guide/",
"homepage": "src/homepage.md",
"builder": "node_modules/michelangelo/kss_styleguide/custom-template",
"css": [],
"js": []
}
and my package.json looks like this:
{
"name": "KSS style-guide",
"description": "KSS style-guide",
"author": {},
"browserslist": [
"last 2 version",
"> 1%"
],
"bugs": {},
"contributors": [],
"dependencies": {},
"devDependencies": {
"acorn": "^7.1.0",
"browser-sync": "^2.26.7",
"compass-importer": "^0.4.1",
"concat": "^1.0.3",
"del": "^5.1.0",
"fancy-log": "^1.3.3",
"gulp": "^4.0.2",
"gulp-concat": "^2.6.1",
"gulp-plumber": "^1.2.1",
"gulp-sass": "^4.0.2",
"gulp-sass-lint": "^1.4.0",
"gulp-sourcemaps": "^2.6.5",
"gulp-terser": "^1.2.0",
"gulp-uglify": "^3.0.2",
"kss": "^3.0.0-beta.25",
"michelangelo": "^0.8.0",
"standard": "^14.3.1",
"terser": "^4.3.9"
},
"engines": {"node": ">=12"},
"engineStrict": true,
"repository": {},
"scripts": {},
"version": "0.0.1"
}
FYI: My system is using
Windows: 10 (10.0.16299)
Git Bash (mintty 3.0.6) (GNU bash, version 4.4.23(1)-release (x86_64-pc-msys))
Node: 12.13.0
Gulp: 4.0.2
kss-node: 3.0.0-beta.25
When hosting my app I get the following errors
2018-07-03T23:32:25.175363+00:00 heroku[web.1]: Starting process with command `npm start`
2018-07-03T23:32:28.093779+00:00 heroku[web.1]: State changed from starting to crashed
2018-07-03T23:32:27.719911+00:00 app[web.1]:
2018-07-03T23:32:27.719929+00:00 app[web.1]: > doombot#1.0.0 start /app
2018-07-03T23:32:27.719931+00:00 app[web.1]: > node src/server/dist/server.js
2018-07-03T23:32:27.719932+00:00 app[web.1]:
2018-07-03T23:32:27.942441+00:00 app[web.1]: module.js:545
2018-07-03T23:32:27.942444+00:00 app[web.1]: throw err;
2018-07-03T23:32:27.942446+00:00 app[web.1]: ^
2018-07-03T23:32:27.942447+00:00 app[web.1]:
2018-07-03T23:32:27.942449+00:00 app[web.1]: Error: Cannot find module '/app/src/server/dist/server.js'
2018-07-03T23:32:27.942451+00:00 app[web.1]: at Function.Module._resolveFilename (module.js:543:15)
2018-07-03T23:32:27.942453+00:00 app[web.1]: at Function.Module._load (module.js:470:25)
2018-07-03T23:32:27.942454+00:00 app[web.1]: at Function.Module.runMain (module.js:690:10)
2018-07-03T23:32:27.942456+00:00 app[web.1]: at startup (bootstrap_node.js:194:16)
2018-07-03T23:32:27.942457+00:00 app[web.1]: at bootstrap_node.js:666:3
2018-07-03T23:32:27.960851+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2018-07-03T23:32:27.961370+00:00 app[web.1]: npm ERR! errno 1
2018-07-03T23:32:27.965212+00:00 app[web.1]: npm ERR! doombot#1.0.0 start: `node src/server/dist/server.js`
2018-07-03T23:32:27.966189+00:00 app[web.1]: npm ERR! Exit status 1
2018-07-03T23:32:27.967067+00:00 app[web.1]: npm ERR!
2018-07-03T23:32:27.967873+00:00 app[web.1]: npm ERR! Failed at the doombot#1.0.0 start script.
2018-07-03T23:32:27.968281+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2018-07-03T23:32:28.070076+00:00 heroku[web.1]: Process exited with status 1
2018-07-03T23:32:28.010680+00:00 app[web.1]:
2018-07-03T23:32:28.010886+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2018-07-03T23:32:28.011019+00:00 app[web.1]: npm ERR! /app/.npm/_logs/2018-07-03T23_32_27_989Z-debug.log
This is my package.json file
{
"name": "doombot",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"tsc": "tsc",
"start": "node src/server/dist/server.js",
"heroku-postbuild": "webpack --config webpack.prod.js; tsc -p ./tsconfig.json",
"server": "nodemon src/server/lib/server.ts",
"client": "webpack-dev-server --open --config webpack.dev.js",
"dev": "concurrently \"npm run server\" \"npm run client\""
},
"keywords": [],
"author": "",
"license": "ISC",
"engines": {
"npm": "6.0.0",
"node": "9.9.0"
},
"dependencies": {
"#types/express": "^4.11.1",
"antd": "^3.6.4",
"app-root-path": "^2.1.0",
"axios": "^0.18.0",
"body-parser": "^1.18.3",
"cors": "^2.8.4",
"express": "^4.16.3",
"prop-types": "^15.6.2",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"typescript": "2.9.1"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-plugin-import": "^1.8.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"clean-webpack-plugin": "^0.1.19",
"concurrently": "^3.5.1",
"css-loader": "^0.28.11",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-import": "^2.11.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.7.0",
"html-webpack-plugin": "^3.2.0",
"nodemon": "^1.17.3",
"style-loader": "^0.20.3",
"uglifyjs-webpack-plugin": "^1.2.7",
"webpack": "^4.5.0",
"webpack-cli": "^2.0.14",
"webpack-dev-server": "^3.1.3",
"webpack-merge": "^4.1.3"
}
}
webpack.common.js
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/client/index.js',
plugins: [new CleanWebpackPlugin(['build']), new HtmlWebpackPlugin()],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'build')
}
};
webpack.dev.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const path = require('path');
module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
contentBase: './build',
port: 3000,
open: true,
proxy: {
'/api': 'http://localhost:4040'
}
}
});
webpack.prod.js
const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const path = require('path');
module.exports = merge(common, {
mode: 'production',
devtool: 'source-map',
plugins: [
new UglifyJSPlugin({
sourceMap: true
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
});
and my tsconfig file
{
"compilerOptions": {
"module": "commonjs",
"moduleResolution": "node",
"pretty": true,
"sourceMap": true,
"target": "es6",
"outDir": "./src/server/dist", // creates the dist directory & places compiles files here
"baseUrl": "./src/server/lib"
},
"include": [
"./src/server/lib/**/*.ts" // specifies that we should include all ts files within lib
],
"exclude": ["node_modules"]
}
If I understand correctly, this is not appearing due to it not building properly. My question is how can I build and run my app the correct way?
If you would like to see my entire code, you can find it here - https://github.com/albertogodinez/dooms-data
You're missing quite a few steps. Let's backtrack a bit.
You're telling Heroku that to start your app, it should run node src/server/dist/server.js (because you specify that as the start script in your package.json). However, server.js does not exist on Heroku, there's only server.ts (i.e. the TypeScript file).
Thus, you'll have to tell Heroku to convert your TypeScript file to Javascript - right now, you're only telling it to build your client (i.e. through webpack in the heroku-postbuild script). To fix this, you can change that script to "webpack --mode production; tsc --project=tsconfig.json",
However, that won't work either as the TypeScript compiler is not installed on Heroku. Therefore, be sure to add typescript to your dependencies (note that IIRC, Heroku does not install devDependencies, so either make it a regular dependency or tell Heroku to install devDependencies as well.
Even if your server then runs correctly, it only serves your API. If you also want your client to be reachable, you have to tell Express to serve it. You could do that something like this:
.
app.use(
express.static(
path.join(__dirname, '../../compiled_frontend'),
{ index: false },
),
);
That, I think, should do the trick, but obviously more could be wrong. Coincidentally, I'm working on an app with a very similar setup, and it's open source - so feel free to give it a look if you need inspiration.
Hi I am struggling for a week solving this
Unexpected token 'import' error.
After tons of searching, now I know that this is a problem of babel-register which is not applying to mocha test, while webpack serve works fine.
At first I had an Unexpected token 'import' error when using antd library
and I followed other solutions which told me to set .babelrc(setting node_modules: false)
But now I am getting same Unexpected token 'import' error from my test file. Please help me... This is not a duplicate and I've done almost every solution in the web related to this. I'm pretty sure that
--require babel-register is not working in mocha test.
Thank you.
myerror message
CSE_frontend choihongsuk$ npm run test
redux-simple-starter#1.0.0 test /Users/choihongsuk/Desktop/-13-SNUCSE-website-SWPP-/CSE_frontend
BABEL_ENV=test mocha --require babel-hook --require babel-register --require ./test/test_hel per.js --recursive ./test
babel-preset-env: DEBUG option Using targets: {}
Modules transform: false
Using plugins: check-es2015-constants {}
transform-es2015-arrow-functions {}
transform-es2015-block-scoped-functions {}
transform-es2015-block-scoping {} transform-es2015-classes {}
transform-es2015-computed-properties {}
transform-es2015-destructuring {} transform-es2015-duplicate-keys {}
transform-es2015-for-of {} transform-es2015-function-name {}
transform-es2015-literals {} transform-es2015-object-super {}
transform-es2015-parameters {} transform-es2015-shorthand-properties
{} transform-es2015-spread {} transform-es2015-sticky-regex {}
transform-es2015-template-literals {} transform-es2015-typeof-symbol
{} transform-es2015-unicode-regex {} transform-regenerator {}
transform-exponentiation-operator {} transform-async-to-generator {}
syntax-trailing-function-commas {}
/Users/choihongsuk/Desktop/-13-SNUCSE-website-SWPP-/CSE_frontend/test/test_helper.js:1
(function (exports, require, module, __filename, __dirname) { import
_$ from 'jquery';
^^^^^^
SyntaxError: Unexpected token import
at new Script (vm.js:51:7)
at createScript (vm.js:136:10)
at Object.runInThisContext (vm.js:197:10)
at Module._compile (module.js:613:28)
at loader (/Users/choihongsuk/Desktop/-13-SNUCSE-website-SWPP-/CSE_frontend/node_modules/babel-register/lib/node.js:144:5)
at Object.require.extensions.(anonymous function) [as .js] (/Users/choihongsuk/Desktop/-13-SNUCSE-website-SWPP-/CSE_frontend/node_modules/babel-register/lib/node.js:154:7)
at Module.load (module.js:561:32)
at tryModuleLoad (module.js:501:12)
at Function.Module._load (module.js:493:3)
at Module.require (module.js:593:17)
at require (internal/module.js:11:18)
at /Users/choihongsuk/Desktop/-13-SNUCSE-website-SWPP-/CSE_frontend/node_modules/mocha/bin/_mocha:366:3
at Array.forEach ()
at Object. (/Users/choihongsuk/Desktop/-13-SNUCSE-website-SWPP-/CSE_frontend/node_modules/mocha/bin/_mocha:365:10)
at Module._compile (module.js:649:30)
at Object.Module._extensions..js (module.js:660:10)
at Module.load (module.js:561:32)
at tryModuleLoad (module.js:501:12)
at Function.Module._load (module.js:493:3)
at Function.Module.runMain (module.js:690:10)
at startup (bootstrap_node.js:194:16)
at bootstrap_node.js:666:3 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! redux-simple-starter#1.0.0 test: BABEL_ENV=test mocha
--require babel-hook --require babel-register --require ./test/test_helper.js --recursive ./test npm ERR! Exit status 1 npm
ERR! npm ERR! Failed at the redux-simple-starter#1.0.0 test script.
npm ERR! This is probably not a problem with npm. There is likely
additional logging output above.
npm ERR! A complete log of this run can be found in: npm ERR!
/Users/choihongsuk/.npm/_logs/2018-05-25T03_45_58_998Z-debug.log
package.json
{
"name": "redux-simple-starter",
"version": "1.0.0",
"description": "Simple starter package for Redux with React and Babel support",
"main": "index.js",
"repository": "git#github.com:StephenGrider/ReduxSimpleStarter.git",
"scripts": {
"start": "webpack-dev-server --progress --colors --open --hot",
"test": "BABEL_ENV=test mocha --require babel-hook --require babel-register --require ./test/test_helper.js --recursive ./test",
"test:watch": "npm run test -- --watch"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^6.4.1",
"babel-plugin-import": "^1.7.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-register": "^6.26.0",
"chai": "^3.5.0",
"chai-jquery": "^2.0.0",
"css-loader": "^0.28.11",
"enzyme": "^3.3.0",
"jquery": "^2.2.1",
"jsdom": "^8.1.0",
"mocha": "^3.5.3",
"react-hot-loader": "^4.1.3",
"react-test-renderer": "^16.3.2",
"style-loader": "^0.21.0",
"webpack": "^3.4.1",
"webpack-dev-server": "^2.9.7"
},
"dependencies": {
"antd": "^3.5.1",
"axios": "^0.18.0",
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-polyfill": "^6.26.0",
"babel-preset-stage-1": "^6.1.18",
"babel-runtime": "^6.26.0",
"bootstrap": "^4.1.1",
"core-js": "^2.5.6",
"lodash": "^3.10.1",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"react-dropzone": "^4.2.9",
"react-redux": "^5.0.7",
"react-router": "^2.0.1",
"react-router-dom": "^4.2.2",
"reactstrap": "^6.0.1",
"redux": "4.0.0",
"redux-form": "^7.3.0",
"redux-promise": "^0.5.3"
}
}
.babelrc
{
"presets": ["react",[
"env",
{
"modules": false,
"targets": {
"node": "current"
}
}
], "stage-1"
],
"env": {
"test": {
"presets": ["react",
[
"env",
{
"modules": false,
"debug": true
}
],
"stage-1"
]
}
},
"plugins": [
["import",
{ "libraryName": "antd", "libraryDirectory": "es", "style": "css" }],
"transform-decorators-legacy",
"transform-class-properties",
"transform-async-to-generator",
"transform-runtime"
]
}
webpack.config
module.exports = {
entry: ['./src/index.js', 'babel-register'],
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
],
},
resolve: {
extensions: ['*', '.js', '.jsx', '.css']
},
devServer: {
historyApiFallback: true,
contentBase: './',
watchOptions: {
aggregateTimeout: 300,
poll: 1000
}
},
};
testhelper.js
import _$ from 'jquery';
import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-dom/test-utils';
import jsdom from 'jsdom';
import chai, { expect } from 'chai';
import chaiJquery from 'chai-jquery';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducers from '../src/reducers';
global.document = jsdom.jsdom('<!doctype html><html><body></body></html>');
global.window = global.document.defaultView;
global.navigator = global.window.navigator;
const $ = _$(window);
chaiJquery(chai, chai.util, $);
function renderComponent(ComponentClass, props = {}, state = {}) {
const componentInstance = TestUtils.renderIntoDocument(
<Provider store={createStore(reducers, state)}>
<ComponentClass {...props} />
</Provider>
);
return $(ReactDOM.findDOMNode(componentInstance));
}
$.fn.simulate = function(eventName, value) {
if (value) {
this.val(value);
}
TestUtils.Simulate[eventName](this[0]);
};
export {renderComponent, expect};
I'm trying to export my firebase app so I can call it inside of mocha test specs as well as within the source code I'm trying to test.
My Mocha test spec looks like this:
import Vue from 'vue'
import Edit from '#/components/Edit'
import filedata from '../../../static/filedata.js'
import submitFile from '../../../helpers/submitFile.js'
import firebaseapp from '../../../src/db.js'
var db = firebaseapp.database()
var storage = firebaseapp.storage()
describe('Edit.vue', () => {
it('should let me add files without choosing a category', () => {
// add files to appear on the homepage
var Constructor = Vue.extend(Edit)
var vm = new Constructor().$mount()
console.log(filedata + ' is the file data')
var ref = storage.ref('categories')
console.log(ref)
submitFile(filedata)
}) ...
And the submitFile file looks like this:
var firebaseapp = require('../src/db.js')
console.log('the app is: ' + firebaseapp)
var db = firebaseapp.database()
var storage = firebaseapp.storage()
module.exports = function(files){
// is the function being called from the test environment?
if(files){
console.log(files)
}
else {
// function called from src -- files were null
var files = this.$refs.upload.uploadFiles;
}
var storageRef = storage.ref();
var pdfsRef = storageRef.child('files');
// var self = this;
console.log('the files length is ' + files.length)
files.forEach(function(file){
var file = file['raw'];
var name = file['name']
var fileref = storageRef.child(name);
var uploadTask = fileref.put(file);
uploadTask.then(function(snapshot){
console.log('uploaded');
var url = snapshot.downloadURL;
self.gettext(url, name);
});
try {
uploadTask.on('state_changed', function(snapshot){
// Observe state change events such as progress, pause, and resume
// Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
self.uploadProgress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
console.log(self.uploadProgress + ' is the upload progress.');
switch (snapshot.state) {
case app.storage.TaskState.PAUSED: // or 'paused'
console.log('Upload is paused');
break;
case app.storage.TaskState.RUNNING: // or 'running'
console.log('Upload is running');
break;
}
}, function(error) {
// Handle unsuccessful uploads
}, function() {
// Handle successful uploads on complete
// For instance, get the download URL: https://firebasestorage.googleapis.com/...
var downloadURL = uploadTask.snapshot.downloadURL;
});
}
catch(e){
console.log(e)
}
})
}
Lastly, here's what db.js looks like:
var Firebase = require('firebase')//import Firebase from 'firebase'
var config = {
...
};
var app = Firebase.initializeApp(config) /// USED TO BE CONST APP
export default app
What's very strange is that when I run npm run unit, I get an error telling me that const is not recognized.
SyntaxError: Unexpected token 'const'
at webpack:///src/db.js~:11:0 <- index.js:38182
So I went through my db.js file and changed const to var, and I'm getting the exact same error*, no matter how I change the file.
Does anyone have any idea what could be going on?
Here's my package.json
{
...
"private": true,
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js",
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
"e2e": "node test/e2e/runner.js",
"prepare": "node ./helpers/gettestfiles.js",
"test": "npm run prepare && npm run unit && npm run e2e && cd ../neuhold-front && npm run unit && npm run e2e",
"deploy": "npm run build && firebase deploy"
},
"dependencies": {
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"element-ui": "^1.4.2",
"firebase": "^4.3.0",
"pdfjs-dist": "^1.9.450",
"vue": "^2.3.3",
"vue-awesome": "^2.3.1",
"vuefire": "^1.4.3"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-loader": "^7.1.1",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"chalk": "^2.0.1",
"connect-history-api-fallback": "^1.3.0",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"cssnano": "^3.10.0",
"eventsource-polyfill": "^0.9.6",
"express": "^4.14.1",
"extract-text-webpack-plugin": "^2.0.0",
"file-loader": "^0.11.1",
"friendly-errors-webpack-plugin": "^1.1.3",
"html-webpack-plugin": "^2.28.0",
"http-proxy-middleware": "^0.17.3",
"webpack-bundle-analyzer": "^2.2.1",
"cross-env": "^5.0.1",
"karma": "^1.4.1",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.2",
"karma-phantomjs-shim": "^1.4.0",
"karma-sinon-chai": "^1.3.1",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.31",
"karma-webpack": "^2.0.2",
"lolex": "^1.5.2",
"mocha": "^3.2.0",
"chai": "^3.5.0",
"sinon": "^2.1.0",
"sinon-chai": "^2.8.0",
"inject-loader": "^3.0.0",
"babel-plugin-istanbul": "^4.1.1",
"phantomjs-prebuilt": "^2.1.14",
"chromedriver": "^2.27.2",
"cross-spawn": "^5.0.1",
"nightwatch": "^0.9.12",
"selenium-server": "^3.0.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"opn": "^5.1.0",
"optimize-css-assets-webpack-plugin": "^2.0.0",
"ora": "^1.2.0",
"rimraf": "^2.6.0",
"url-loader": "^0.5.8",
"vue-loader": "^12.1.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.3.3",
"webpack": "^2.6.1",
"webpack-dev-middleware": "^1.10.0",
"webpack-hot-middleware": "^2.18.0",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
build/webpack.dev.conf.js
var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
// add hot-reload related code to entry chunks
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})
module.exports = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
},
// cheap-module-eval-source-map is faster for development
devtool: '#cheap-module-eval-source-map',
plugins: [
new webpack.DefinePlugin({
'process.env': config.dev.env
}),
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
new FriendlyErrorsPlugin()
]
})
To show that I'm not mistakenly editing different repos ...
macbook001:docu-repo josephadmin$ cd neuhold-back
macbook001:neuhold-back josephadmin$ cd ..
macbook001:docu-repo josephadmin$ cd neuhold-back/src
macbook001:src josephadmin$ ls
App.vue assets components db.js db.js~ main.js
macbook001:src josephadmin$ cat db.js
/* eslint-disable */
import Firebase from 'firebase'
var config = {
...
};
var app = Firebase.initializeApp(config)
export default app
macbook001:src josephadmin$ cd ../ && npm run unit
> neuhold-back#0.1.0 unit /Users/josephadmin/production/docu-repo/neuhold-back
> cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run
28 08 2017 12:45:41.353:INFO [karma]: Karma v1.7.0 server started at http://0.0.0.0:9876/
28 08 2017 12:45:41.357:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
28 08 2017 12:45:41.376:INFO [launcher]: Starting browser PhantomJS
28 08 2017 12:45:42.504:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket ... with id 994129
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
SyntaxError: Unexpected token 'const'
at webpack:///src/db.js~:11:0 <- index.js:38108
PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 0 of 0 ERROR (0.65 secs / 0 secs)
PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 0 of 0 ERROR (0 secs / 0 secs)
=============================== Coverage summary ===============================
Statements : 100% ( 0/0 )
Branches : 100% ( 0/0 )
Functions : 100% ( 0/0 )
Lines : 100% ( 0/0 )
================================================================================
npm ERR! Darwin 15.6.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "unit"
npm ERR! node v7.10.0
npm ERR! npm v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! neuhold-back#0.1.0 unit: `cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the neuhold-back#0.1.0 unit script 'cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the neuhold-back package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs neuhold-back
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls neuhold-back
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /Users/josephadmin/.npm/_logs/2017-08-28T10_45_43_361Z-debug.log
macbook001:neuhold-back josephadmin$
From the looks of the error thrown, this seems like a problem with PhantomJS cache. Check this Stack Overflow post right here.