WebStorm: Karma server not starting, TypeError: undefined is not a function on server.start(); - npm

I have the latest version of WebStorm (10.0.4). Today I wanted to include karma in my project so I installed Python and ran:
npm install -g karma
npm install karma
npm install karma-jasmine
npm install karma-chrome-launcher
npm install karma-phantomjs-launcher
I tried it with two different config files, one for my project and one superbasic config, but both throw the same error. Here is the basic config:
// Karma configuration
// Generated on Fri Jul 17 2015 14:05:46 GMT+0200 (Mitteleuropäische Sommerzeit)
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
'test/**/*Spec.js'
],
// list of files to exclude
exclude: [
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false
})
}
I then created a new "Karma" Run configuration, but when I click run, it says:
"C:\Program Files\nodejs\node.exe" "C:\Program Files (x86)\JetBrains\WebStorm 10.0.4\plugins\js-karma\js_reporter\karma-intellij\lib\intellijServer.js" --karmaPackageDir=C:\workspace\full_ui\node_modules\karma --configFile=C:\workspace\full_ui\tests\karma.conf_messages.js --browsers=Chrome
C:\Program Files (x86)\JetBrains\WebStorm 10.0.4\plugins\js-karma\js_reporter\karma-intellij\lib\intellijServer.js:10
server.start(cliOptions);
^
TypeError: undefined is not a function
at Object.<anonymous> (C:\Program Files (x86)\JetBrains\WebStorm 10.0.4\plugins\js-karma\js_reporter\karma-intellij\lib\intellijServer.js:10:8)
at Module._compile (module.js:460:26)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Function.Module.runMain (module.js:501:10)
at startup (node.js:129:16)
at node.js:814:3
Process finished with exit code 1
I really don't know what could cause this problem. Did I miss anything to install? I have never used karma before, so I might have some basic error somewhere, but I can't figure out what.

I think this may be caused by a recent update to the karma lib 9 days ago
https://github.com/karma-runner/karma/commits/master/lib/server.js
It could be the intellijServer.js is now out of date and needs to be altered. I've got it working by updating the intellijServer.js (until intellij fix it) with:
var cli = require('./intellijCli.js')
, Server = cli.requireKarmaModule('lib/server.js')
, cliOptions = { configFile: require.resolve('./intellij.conf.js') };
var browsers = cli.getBrowsers();
if (browsers != null) {
cliOptions.browsers = browsers;
}
var server=new Server(cliOptions);
server.start();
// Prevent karma server from being an orphan process.
// For example, if WebStorm is killed using SIGKILL, karma server will still be alive.
// When WebStorm is terminated, karma server's standard input is closed automatically.
process.stdin.resume();
process.stdin.on('close', function () {
// terminating orphan process
process.exit(123);
});
Once I got the server bit working i got another issue with No provider for “framework:jasmine”! (However this appears to be a separate unrelated issue affecting me, because I didn't fully setup karma).
This was resolved with:
npm install karma-jasmine --save-dev
npm install karma-chrome-launcher --save-dev
followed by
npm install

Related

How to add a loader in a Vue/Webpack app to support non JS files used in a dependency of a node module

I have a Vue 2 app that uses Webpack, and I am trying to use in it the node module PSD.js, which in itself utilizes CoffeeScript as part of it's dependencies. When I try to compile i get the error:
Module parse failed: Unexpected character '#' (1:0) You may need an appropriate loader to handle this file type,
referring to the the file ./node_modules/coffee-script/lib/coffee-script/register.js that PSD.js installed as part of it's dependencies when I did npm install psd.
Any ideas on how to make this work?
I understand I need to tell the Vue app how to handle .coffee files with a loader, but I have tried installing coffee-loader, coffee, set the vue.config.js to:
module.exports = {
publicPath: "./",
configureWebpack: {
target: "node-webkit",
node: false,
module: {
rules: [
// ...
{
test: /\.coffee$/,
use: [
{
loader: 'coffee-loader'
}
]
}
]
}
},
lintOnSave: false
};
yet still nothing works, I get the same error. I feel it is because I am not using CoffeeScript directly but rather a node module that I AM using, psd.js, is the one using it. That is why I cannot set lang="coffee" in the script tag attribute of my Vue module (I am using vanilla JS to run everything).
thnx in advance
ADDING MORE INFO:
I use a boilerplate framework to setup my app, and it initialises the vue/webpack app for me indirectly.
To reproduce, and even though this system is for Adobe plugins, you do not need the Adobe host app to see the issue, do:
npm install -g bombino
Then in a folder of your choosing run:
bombino
and fill in these params when asked:
? Name of panel? Hello World
? Use your custom templates or bombino defaults? Bombino
What tooling preset should be used? Vue-CLI
? Which Vue-CLI template should be used? bombino-vue-bare (Absolute minimum)
? Host apps to include: After Effects
? Base CEF Port (between 1024 and 65534) 8666
? Run npm install for you? Yes
then cd into Hello-World and run npm run serve. You should see the app is compiled correctly and is running on some port (8080 or higher if taken).
Now go back to the root folder and install psd.js: npm install psd
then go back into Hello-World and run npm run serve again. This time it will fail to compile with the error I started this question with. Even if you go and install coffee-loader by doing npm install --save coffeescript coffee-loader and change the vue.config.js to be like so:
publicPath: "./",
// Thanks Eric Robinson
configureWebpack: {
target: "node-webkit", // Set the target to node-webkit (https://webpack.js.org/configuration/target/)
node: false, // Don't set certain Node globals/modules to empty objects (https://webpack.js.org/configuration/node/),
module: {
rules: [
// ...
{
test: /\.coffee$/,
use: [
{
loader: 'coffee-loader'
}
]
}
]
}
},
lintOnSave: false
};
or if you do vue use coffee - all of these result in the same error: the compiler/packager doesn't know how to handle the .coffee file (used as a dependency by psd.js).
Thnx again to anyone who has info

Can't remove `console` statements with babel nor terser in vue cli 3 / 4, but second build run works

I'm having issues with npm run build, which effectively calls vue-cli-service build. My goal is to remove console statements in production builds. However, the first time it fails. If I run it again immediately (without code changes), it succeeds.
For reproducibility and isolation, I'm running code in a node docker:
docker run --rm -it -v "$(pwd):/usr/src/app" node:14.4.0 /bin/bash
In the docker I setup the environment
npm ci
In the clean environment, running the build fails:
root#bd366b5873ca:/usr/src/app# npm run build
> my-app#0.1.0 build /usr/src/app
> vue-cli-service build
PRODUCTION babel setup
production eslint setup.
⠦ Building for production...production eslint setup.
⠇ Building for production...PRODUCTION babel setup
⠼ Building for production...production eslint setup.
⠙ Building for production...
ERROR Failed to compile with 8 errors
The errors are all eslint errors on occurrences of console. commands:
Module Error (from ./node_modules/eslint-loader/index.js):
error: Unexpected console statement (no-console) at XXXX
Immediately running the build again, results in a successful build:
root#bd366b5873ca:/usr/src/app# npm run build
> my-app#0.1.0 build /usr/src/app
> vue-cli-service build
PRODUCTION babel setup
production eslint setup.
⠏ Building for production...
WARNING Compiled with 2 warnings
The PRODUCTION babel setup and production eslint setup originate from my babel.config.js and .eslint.rc.
I've configured eslint as follows, to fail on console. statements in production:
# .eslintrc.js
if (process.env.NODE_ENV === 'production') {
console.info('production eslint setup.')
}
module.exports = {
root: true,
env: {
node: true
},
'plugins': ['jest'],
'extends': [
'eslint:recommended',
'plugin:vue/recommended',
'#vue/standard',
'plugin:jest/recommended',
'plugin:jest/style'
],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
},
parserOptions: {
parser: 'babel-eslint',
parserOptions: {
babelOptions: {
configFile: "babel.config.js"
}
}
}
}
I've configured babel to remove the console. statements:
# babel.config.js
/* eslint-disable no-var */
module.exports = (api) => {
var isProd = api.cache.invalidate(() => process.env.NODE_ENV === 'production')
var plugins = []
if (isProd) {
console.info('PRODUCTION babel setup')
plugins.push(['transform-remove-console', { exclude: [] }])
}
return {
presets: ['#vue/cli-plugin-babel/preset'],
plugins
}
}
In attempts to get it fixed, I've also configured terser to remove console. statements:
# vue.config.js
module.exports = {
'transpileDependencies': [
'vuetify'
],
publicPath: process.env.PUBLIC_SUB_PATH === ''
? '/' : '/' + process.env.PUBLIC_SUB_PATH + '/',
runtimeCompiler: true,
css: {
extract: { ignoreOrder: true }
},
chainWebpack: config => {
config.optimization.minimize = true
config.optimization.minimizer('terser').tap((args) => {
args[0].terserOptions.compress.drop_console = true
return args
})
}
}
Versions (from package.json). In attempt to fix it, upgraded to vue-cli 4, also happened in vue-cli 3:
....
"dependencies": {
"axios": "^0.19.2",
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vue-router": "^3.3.4",
"vuetify": "^2.3.1",
"vuex": "^3.4.0"
},
....
"devDependencies": {
"#babel/core": "^7.10.3",
"#babel/preset-env": "^7.10.3",
"#vue/cli-service": "^4.4.4",
"babel-eslint": "^10.1.0"
"babel-loader": "^8.1.0",
"babel-plugin-transform-remove-console": "^6.9.4",
"eslint": "^5.16.0",
...
}
Question:
The console prints of PRODUCTION babel setup and production eslint setup show that in a clean build, the configuration is loaded multiple times. Then it fails somehow. Running it again seems more straightforward, configs are loaded once and then it succeeds.
How can I configure vue to successfully build the first time, removing the console statements?
Is it the cache?
After the successsful build, removing the cache:
rm -Rf ./node_modules/.cache
and then building it again (npm run build) is equal to the first run: fails
Modern build?
When creating a modern build (after a npm run build to populate the cache):
npm run build -- --modern
Successfully builds the legacy build, but fails the modern build:
> my-app#0.1.0 build /usr/src/app
> vue-cli-service build "--modern"
PRODUCTION babel setup
production eslint setup.
⠏ Building legacy bundle for production...
WARNING Compiled with 2 warnings
....
PRODUCTION babel setup
production eslint setup.
⠹ Building modern bundle for production...PRODUCTION babel setup
⠧ Building modern bundle for production...PRODUCTION babel setup
⠋ Building modern bundle for production...PRODUCTION babel setup
⠏ Building modern bundle for production...PRODUCTION babel setup
PRODUCTION babel setup
⠹ Building modern bundle for production...PRODUCTION babel setup
⠧ Building modern bundle for production...PRODUCTION babel setup
⠦ Building modern bundle for production...
ERROR Failed to compile with 3 errors
Module Error (from ./node_modules/thread-loader/dist/cjs.js):
/usr/src/app/src/axios.js
7:3 error Unexpected console statement no-console
Running the modern build again immediately after it succeeds successfully. So I need in total 3 runs for the modern build to succeed (first time legacy bundle fails, second time legacy bundle succeeds but modern build fails, third time legacy and modern build succeed).
Vue issue
There is a related vue issue at https://github.com/vuejs/vue-cli/issues/5399
I met the same err and i fixed it through adding lintOnSave: process.env.NODE_ENV === 'development' in vue.config.js. The following is the checklist to help u fix ur problem:
npx vue-cli-service inspect --mode production >> webpack.config.production.js generate webpack configuration file in production
then you can see lint is before terser. It makes the first time yarn build failure and the next time is successful
so in this case, you can turn off the lintOnSave in production
About lintOnsave

Set a custom entry file for Metro dev server in React Native build

I'm writing some scripts that do custom React Native builds for unit testing and such, specifying a custom entry file for the react-native-xcode.sh script using the ENTRY_FILE env variable. This is super useful and great. I'm able to do release builds no problem, and they work just fine, so basically I can build a RN app from any entry file at will. However, when I try a Debug variant build, metro doesn't seem to know about my special custom entry file, and gives me this error:
None of these files exist:
* index(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
* index/index(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
at ModuleResolver.resolveDependency (/Users/justin/dev/enmesh/testutilsnative/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:165:15)
at ResolutionRequest.resolveDependency (/Users/justin/dev/enmesh/testutilsnative/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)
at DependencyGraph.resolveDependency (/Users/justin/dev/enmesh/testutilsnative/node_modules/metro/src/node-haste/DependencyGraph.js:285:16)
at /Users/justin/dev/enmesh/testutilsnative/node_modules/metro/src/lib/transformHelpers.js:267:42
at Server.<anonymous> (/Users/justin/dev/enmesh/testutilsnative/node_modules/metro/src/Server.js:841:41)
at Generator.next (<anonymous>)
at asyncGeneratorStep (/Users/justin/dev/enmesh/testutilsnative/node_modules/metro/src/Server.js:99:24)
at _next (/Users/justin/dev/enmesh/testutilsnative/node_modules/metro/src/Server.js:119:9)
at processTicksAndRejections (internal/process/task_queues.js:97:5)
IN RESOLVER
Error: Unable to resolve module `./index` from ``:
Does anyone know how I can get the Debug build of the app to interface properly with the Metro development server, so I can debug my app builds better? Any guidance here would be greatly appreciated!
Metro is just getting launched automatically by the xcodebuild process, which I'm calling like this:
const args = {
simulator: device,
configuration: variant,
scheme,
projectPath: xcodeProjectPath,
device: undefined,
uuid: undefined,
packager: true,
verbose: true,
port: 8081,
terminal: undefined,
};
const xcodebuildSpawnOptionsArgs: any = {
...args,
cwd: folder,
env: {
PLATFORM: 'ios',
ENTRY_FILE: builtEntryFilePath,
},
};
const buildProcess = spawn(
'xcodebuild',
xcodebuildArgs,
getProcessOptions(xcodebuildSpawnOptionsArgs),
);

vue-cli-service build: validationError for new workbox-webpack-plugin options

With the following vue.config.js:
module.exports = {
pwa: {
name: 'My App',
...
workboxPluginMode: 'InjectManifest',
workboxOptions: {
swSrc: 'src/sw.js', //and I use "sw.js" in my registerServiceWorker.js file
skipWaiting: true,
clientsClaim: true,
}
}
}
The validation errors during build are that 'skipWaiting' and 'clientsClaim' are not supported parameters. Why? swSrc is from the same list of options listed here and the build doesn't complain about that option. When I remove these two options, the build works.
So I guess my question is:
skipWaiting, clientsClaim are "not a supported parameter" of what? Of webpack? of the PWA plugin? Of the workbox-webpack plugin? Where can I find the correct set of options? Thanks.
UPDATE: I do not have a .env file setting the NODE-ENV. However npm run build which I guess builds production assets works only if I remove the 2 options. The removed options in dev (npm run serve) yields NO service worker file.
You are using workbox plugin in InjectManifest mode, but pass parameters for GenerateSW.
InjectManifest mode expects an existing service-worker file to be injected and it's path defined in swSrc, while GenerateSW will create service-worker file, thus accepts different set of options (e.g. swDest, etc)
All options for each of modes can be found on the same documentation page of workbox-webpack-plugin you've posted in corresponding sections.

Gulp karma "spawn ENAMETOOLONG" when processing many files

We're using gulp-karma plugin to gulp for our testing and PhantomJS. We're running on Windows and PhantomJS is a .exe file. Our files that has the tests has grown and now we're getting the error "spawn ENAMETOOLONG". From what I've gather from this answer: https://github.com/dbushell/grunt-svg2png/issues/17 for Grunt is that the problem is the parameters sendt to PhantomJS is too large. Have anyone had simlar problems or know any work arounds for it (except having to merge test files into fewer files)?
Error message:
[14:20:19] Starting Karma server...
events.js:72
throw er; // Unhandled 'error' event
^
Error: spawn ENAMETOOLONG
at errnoException (child_process.js:1001:11)
at Process.ChildProcess._handle.onexit (child_process.js:792:34)
Give files list into karma config instead of gulp.src()
Example
var files =[
'lib/**/*.js',
'src/**/*.js',
'test/**/*.js'
],
gulp.task('unit.test', function() {
return gulp.src([])
.pipe(karma({
configFile: 'my.karma.conf.js',
files : files,
action: 'run'
}))
.on('error', function(err) {
throw err;
});
});