It should be very simple this one, but I can't run it. I have installed the plugin according the their docs and written a simple example also according to their docs:
test.js:
import pluginTester from 'babel-plugin-tester'
pluginTester({
plugin: identifierReversePlugin,
snapshot: true,
tests: [
{code: '"hello";', snapshot: false},
{
code: 'var hello = "hi";',
output: 'var olleh = "hi";',
},
`
function sayHi(person) {
return 'Hello ' + person + '!'
}
console.log(sayHi('Jenny'))
`,
],
})
// normally you would import this from your plugin module
function identifierReversePlugin() {
return {
name: 'identifier reverse',
visitor: {
Identifier(idPath) {
idPath.node.name = idPath.node.name.split('').reverse().join('')
},
},
}
}
I have installed jest according to jest docs:
npm install jest --save-dev
My package.json file:
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "jest"
},
"author": "",
"license": "ISC",
"dependencies": {},
"devDependencies": {
"#babel/cli": "^7.10.1",
"#babel/core": "^7.10.2",
"#babel/preset-env": "^7.10.2",
"babel-jest": "^26.0.1",
"babel-plugin-tester": "^9.2.0",
"jest": "^26.0.1"
}
}
I also have babel config as:
module.exports = {
presets: [
[
'#babel/preset-env',
{
targets: {
node: 'current',
},
},
],
],
};
I try to run npx jest test.js but it just spits out
No tests found, exiting with code 1
Run with `--passWithNoTests` to exit with code 0
I can run jest on a simple example without babel-plugin-tester, so everything seems to work, but I probably don't understand how it is intended to be used with jest. I feel so stupid.
This is stupid! I had to rename my testfile to fit *.test.js. Why don't jest trust me that the file I intend to run indeed contains tests?! This is obviously a stupid implementation of jest!!
Hours of wasted time.. thanks to stupid jest
Related
I am attempting to build a web app using Laravel 9.1 which comes with Vite, personally I've never used Vite before so I'm not too sure about this error.
I seem to be receiving the error
TypeError: laravel is not a function
whenever I run npm run dev. I get the same error when running build.
Below I will post my package.json & my vite.config.js files.
Package.json
{
"type": "module",
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"#vitejs/plugin-vue": "^2.3.3",
"axios": "^1.1.2",
"laravel-vite-plugin": "^0.7.1",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"vite": "^3.2.4"
},
"dependencies": {
"got": "^11.8.3",
"vue": "^3.2.36",
"vue-loader": "^17.0.1"
}
}
vite.config.js
import laravel from 'laravel-vite-plugin'
import vue from '#vitejs/plugin-vue'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
resolve: {
alias: {
'#': '/resources/js',
},
},
});
I'm not sure how to fix this error, or proceed with this error occurring when attempting to run dev.
Thanks in Advance for any help :)
I have tried reinstalling the node modules, updating Node to v19 and even fully restarted the project install.
Try removing
"type" : "module"
From your package.json, it worked for me but i am still investigating the reason behind
I am currently working on a web app using next js and I want to import an npm package I wrote a few months ago but the import does not work because my imports are undefined. The package only contains an bundle.js and I wonder if this could be the cause.
This package is written in Typescript and transpiled into Javascript using Webpack and ts-loader.
All my exports are like export default foo or export foo. I have 2 objects exported in this package Patient and Doctor.
Here is how I have been trying to import them
import SkopAPI from "skop-api"
I get this error when I try to use the package after this import.
screenshot of the error
or
import {Patient} from "skop-api"
or again
import Patient from "skop-api"
The error is different in this case Screenshot of the 2nd error
This is my index.js file
import Doctor from './Doctor';
import Patient from './Patient';
export {Doctor, Patient};
Here is the npm package webpack configuration
module.exports = {
entry: './src/index.ts',
mode: 'development',
target: "web",
resolve: {
extensions: ['.ts','.js'],
},
module: {
rules: [{
test: /\.ts$/,
use: [
'ts-loader',
]
}],
},
output: {
filename: 'SkopAPI.js',
path: path.resolve(__dirname, 'dist'),
path: path.resolve(__dirname, 'demo'),
library:{
name: 'SkopAPI',
type: 'umd',
},
globalObject: 'this',
},
};
Package.json
{
"name": "skop-api",
"version": "1.1.8",
"description": "API for the Skop",
"main": "dist/SkopAPI.js",
"files": [
"dist"
],
"license": "CC BY-NC-ND 4.0",
"keywords": [
"api",
"skop",
"health api",
"health",
"WeMed"
],
"author": "Ben Gregory",
"repository": {
"type": "git",
"url": "https://github.com/BenGregory23/SKOP-API-documentation.git"
},
"homepage": "https://github.com/BenGregory23/SKOP-API-documentation#readme",
"scripts": {
"build": "webpack"
},
"dependencies": {
"#opentok/client": "^2.22.1",
"#tensorflow-models/blazeface": "^0.0.7",
"#tensorflow/tfjs-backend-webgl": "^3.18.0",
"#tensorflow/tfjs-core": "^3.18.0",
"axios": "^0.27.2",
"base64url": "^3.0.1",
"sweetalert2": "^11.4.10"
},
"devDependencies": {
"ts-loader": "^9.3.0",
"typescript": "^4.7.3",
"webpack": "^5.72.0",
"webpack-cli": "^4.9.2",
"concurrently": "^6.2.1"
}
}
I tried to add to my package the code in javascript and not only the bundle named SkopAPI.js but Patient and Doctor objects were still undefined.
Code to reproduce
import {Patient} from "skop-api"
export default foo(){
const key = "key123";
const room = 995;
Patient.init(key, room);
}
As I understand your problem, you have 2 differents projects (=2 package.json) :
your skop-api project, exporting items
your "client project", importing functions you describe in skop-api
How are you importing skop-api in your client ?
you should have something like this in your client's package.json
"dependencies":{
"skop-api": "file:../path/to/skop-api/bundle.js"
...
}
I keep getting error Uncaught ReferenceError: require is not defined in browser even with Webpack and Babel. For some reason I never had to worry about this before. I'm not sure if this error is caused by updated packages or what. I set up a very simple test application for simplicity.
package.json
{
"name": "require-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"engines": {
"node": "16.16.0"
},
"scripts": {
"build": "webpack --config webpack.config.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.18.10",
"#babel/preset-env": "^7.18.10",
"babel-loader": "^8.2.5",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0"
}
}
webpack.config.js
const path = require('path');
module.exports = {
target: "node",
mode: "production",
output: {
path: path.resolve(__dirname, 'dist'),
clean: true,
filename: (pathData) => {
return 'index.js'
},
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env']
}
}
}
]
}
}
src/index.js (js file before build)
const path = require('path');
console.log(path);
dist/index.js (js file after build)
(()=>{var r,e={17:r=>{"use strict";r.exports=require("path")}},t={};r=function r(o){var s=t[o];if(void 0!==s)return s.exports;var p=t[o]={exports:{}};return e[o](p,p.exports,r),p.exports}(17),console.log(r)})();
There're a few things on your code needing changed. First of all, you can't target to build for node while you run that code on browser which is wrong. Secondly, path is designed and built to run on node server specifically, however, there's a fallback for path on browser though which is called path-browserify. You can check its document to see how it works.
Anyway to sum up, you need to switch target as web in the end:
module.exports = {
target: "web",
// ...
}
hello i made a simple library for vue 3
my code.
export class REfTest() {
private ref = ref(null)
constructor(value: any) { this.ref.value = value }
update(value) {
this.ref.value = value;
}
}
i used npm link
Created an instance of a class from a library.
But nothing works.
For some reason, reactivity stopped working.
Also, the file with all the library code weighs 160 kilobytes.
It's a lot.
As I understand it, he compiled and added vue3 to this file, which is why it does not work and the file is so large.
here is the dependency file
{
"name": "ref-tets",
"version": "1.0.0",
"description": "",
"main": "./dist/index.js",
"scripts": {
"build": "webpack"
},
"keywords": [],
"license": "ISC",
"devDependencies": {
"ts-loader": "^9.3.1",
"typescript": "^4.7.4",
"webpack": "^5.73.0",
"webpack-cli": "^4.10.0"
},
"peerDependencies": {
"vue": "^3.0.0"
},
"files": [
"dist"
]
}
I pointed out that vue3 is a peer dependency.
but didn't help
You have forgotten to import ref from vue.
Please add below line to top of the code snippet.
import { ref } from "vue"
setting up a new project that will have multiple grunt tasks that I want to load from task files.
when running my first task, 'core' which is supposed to build the core css for the site, I'm getting an error that I can't seem to resolve. been doing some googling and not finding this specific issue. any issues with the same error message usually were the result of a typo or misplaced curly braces on the part of the OP. Not sure that's the case here, but perhaps someone else sees what I'm obviously not seeing.
Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: require('./package.json')
});
grunt.loadTasks('grunt-tasks');
};
grunt-tasks/grunt-core.js
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-sass');
grunt.config('core', {
sass : {
options : {
sourceMap : true,
includePaths : 'node_modules/bootstrap-sass/assets/stylesheets'
},
dist : {
files : {
'main.css' : 'main.scss'
}
}
}
});
grunt.registerTask('core', ['sass:dist']);
};
error:
$ grunt core
Running "sass:dist" (sass) task
Verifying property sass.dist exists in config...ERROR
>> Unable to process task.
Warning: Required config property "sass.dist" missing. Use --force to continue.
Aborted due to warnings.
I've tried a few different things. If I change the registerTask to this:
grunt.registerTask('core', ['sass']);
I get this error:
$ grunt core
>> No "sass" targets found.
Warning: Task "sass" failed. Use --force to continue.
Aborted due to warnings.
not sure if this is relevant, but here is package.json and some specs on the system I'm using.
Mac OSX Yosemite
node version v5.10.1
npm 3.8.3
package.json
{
"name": "TEST",
"version": "1.0.0",
"description": "test test test",
"main": "Gruntfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/path/to/repo"
},
"author": "me <me#example.com>",
"license": "ISC",
"bugs": {
"url": "https://github.com/path/to/repo/issues"
},
"homepage": "https://github.com/path/to/repo",
"devDependencies": {
"angular": "^1.5.5",
"bootstrap-sass": "^3.3.6",
"grunt": "^1.0.1",
"grunt-contrib-jshint": "^1.0.0",
"grunt-contrib-uglify": "^1.0.1",
"grunt-contrib-watch": "^1.0.0",
"grunt-sass": "^1.1.0",
"jquery": "^2.2.3",
"sass-lint": "^1.5.1"
},
"dependencies": {
"jquery": "^2.2.3"
}
}
Looks like it was user error on my part.
in the task file, I had grunt.config(), but I should have had grunt.initConfig()
var taskConfig = {
sass : {
options : {
sourceMap : true,
includePaths : 'node_modules/bootstrap-sass/assets/stylesheets'
},
dist : {
files : {
'main.css' : 'main.scss'
}
}
},
concat : {
core : {
src : ['node_modules/jquery/dist/jquery.js', 'js/main.js'],
dest : "../dev/js/main.js"
}
}
};
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-sass');
grunt.initConfig(taskConfig);
grunt.registerTask('core', ['concat:core','sass']);
};