I have a preact application which uses #testing-library/preact library for test cases. When I try to run a test for a component it throws an error stating that h is not defined. The app works without the import statement in the components but the test cases doesn't work. I get the it is required for converting jsx to h() calls. But is there any way to avoid it so that I don't have to import it in every component in the app ? PS: I tried to configure babel with this plugic babel-plugin-jsx-pragmatic for automatic import but it didn't work. This is my .babelrc file.
{
"plugins": [
["plugin-transform-react-jsx", {
"runtime": "automatic",
"importSource": "preact"
}]
]
}
I'm trying to write some code that uses Deno and rdflib. And failing miserably.
Here's my test program:
// #deno-types="https://dev.jspm.io/npm:rdflib#2.2.7/lib/index.d.ts"
import { Namespace } from 'https://dev.jspm.io/npm:rdflib#2.2.7/lib/index'
when I ask deno to cache the remote packages, it fails:
$ deno --unstable cache rdflib.ts
Check file:///home/ian/projects/personal/deno-experiments/rdflib.ts
error: TS2502 [ERROR]: 'thisArg' is referenced directly or indirectly in its own type annotation.
bind<T>(this: T, thisArg: ThisParameterType<T>): OmitThisParameter<T>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
at asset:///lib.es5.d.ts:350:22
TS2614 [ERROR]: Module '"https://dev.jspm.io/npm:rdflib#2.2.7/lib/query"' has no exported member 'Query'. Did you mean to use 'import Query from "https://dev.jspm.io/npm:rdflib#2.2.7/lib/query"' instead?
import { Query } from './query';
~~~~~
at https://dev.jspm.io/npm:rdflib#2.2.7/lib/index.d.ts:16:10
TS2614 [ERROR]: Module '"https://dev.jspm.io/npm:rdflib#2.2.7/lib/updates-via"' has no exported member 'UpdatesSocket'. Did you mean to use 'import UpdatesSocket from "https://dev.jspm.io/npm:rdflib#2.2.7/lib/updates-via"' instead?
import { UpdatesSocket } from './updates-via';
~~~~~~~~~~~~~
at https://dev.jspm.io/npm:rdflib#2.2.7/lib/index.d.ts:26:10
TS2614 [ERROR]: Module '"https://dev.jspm.io/npm:rdflib#2.2.7/lib/updates-via"' has no exported member 'UpdatesVia'. Did you mean to use 'import UpdatesVia from "https://dev.jspm.io/npm:rdflib#2.2.7/lib/updates-via"' instead?
import { UpdatesVia } from './updates-via';
~~~~~~~~~~
at https://dev.jspm.io/npm:rdflib#2.2.7/lib/index.d.ts:27:10
TS2749 [ERROR]: 'Store' refers to a value, but is being used as a type here. Did you mean 'typeof Store'?
at https://dev.jspm.io/npm:rdflib#2.2.7/lib/index.d.ts:32:32
... many more lines ...
TS2614 [ERROR]: Module '"https://dev.jspm.io/npm:rdflib#2.2.7/lib/utils/termValue"' has no exported member 'termValue'. Did you mean to use 'import termValue from "https://dev.jspm.io/npm:rdflib#2.2.7/lib/utils/termValue"' instead?
export { termValue } from './utils/termValue';
~~~~~~~~~
at https://dev.jspm.io/npm:rdflib#2.2.7/lib/index.d.ts:40:10
Found 44 errors.
As far as I can tell, the problem is with lines in the remote code that do relative imports. Do such relative imports not work with Deno, or am I missing some vital step, or is my approach doomed?
Version info:
$ deno --version
deno 1.12.2 (release, x86_64-unknown-linux-gnu)
v8 9.2.230.14
typescript 4.3.5
The problem is not that they are relative specifiers, but that they are not fully qualified. From section 6.6 in the manual:
Can I use TypeScript not written for Deno?
Maybe. That is the best answer, we are afraid. For lots of reasons, Deno has chosen to have fully qualified module specifiers. In part this is because it treats TypeScript as a first class language. Also, Deno uses explicit module resolution, with no magic. This is effectively the same way browsers themselves work, though they don't obviously support TypeScript directly. If the TypeScript modules use imports that don't have these design decisions in mind, they may not work under Deno.
Also, in recent versions of Deno (starting with 1.5), we have started to use a Rust library to do transformations of TypeScript to JavaScript in certain scenarios. Because of this, there are certain situations in TypeScript where type information is required, and therefore those are not supported under Deno. If you are using tsc as stand-alone, the setting to use is "isolatedModules" and setting it to true to help ensure that your code can be properly handled by Deno.
One of the ways to deal with the extension and the lack of Node.js non-standard resolution logic is to use import maps which would allow you to specify "packages" of bare specifiers which then Deno could resolve and load.
I read some posts regarding to the error I am seeing now when import pyspark, some suggest to install py4j, and I already did, and yet I am still seeing the error.
I am using a conda environment, here is the steps:
1. create a yml file and include the needed packages (including the py4j)
2. create a env based on the yml
3. create a kernel pointing to the env
4. start the kernel in Jupyter
5. running `import pyspark` throws error: ImportError: No module named py4j.protocol
The issue is resolved with adding environment section in kernel.json and explicitely specify the variables of the following:
"env": {
"HADOOP_CONF_DIR": "/etc/spark2/conf/yarn-conf",
"PYSPARK_PYTHON":"/opt/cloudera/parcels/Anaconda/bin/python",
"SPARK_HOME": "/opt/cloudera/parcels/SPARK2",
"PYTHONPATH": "/opt/cloudera/parcels/SPARK2/lib/spark2/python/lib/py4j-0.10.7-src.zip:/opt/cloudera/parcels/SPARK2/lib/spark2/python/",
"PYTHONSTARTUP": "/opt/cloudera/parcels/SPARK2/lib/spark2/python/pyspark/shell.py",
"PYSPARK_SUBMIT_ARGS": " --master yarn --deploy-mode client pyspark-shell"
}
I've created a vue application scaffolded from the vue cli. Almost everything is reacting as expected with my app except for an issue with import.
The following works fine:
import Vuex from 'vuex';
but, this throws errors:
import { VuetronVue, VuetronVuex } from 'vuetron';
vue.use(VuetronVue);
Linting error:
"export 'VuetronVue' was not found in 'vuetron'
and Console error:
Uncaught TypeError: Cannot read property 'install' of undefined
Changing the code to:
import vuetron from 'vuetron'
vue.use(vuetron.VuetronVue);
resolves the issue...
This original code was taken directly from the Vuetron documentation. Does anyone have a suggestion as to why the ES6 notation would cause an issue?
This seems to be because
vuetron/packages/vuetron-plugins/index.js
only exports the default object:
import VuetronVue from './vuetron-vue';
import VuetronVuex from './vuetron-vuex';
export default {
VuetronVue,
VuetronVuex
};
For named imports as stated in the docs you would need a named export.
I am just getting started with the Jest test framework and while straight up unit tests work fine, I am having massive issues testing any component that in its module (ES module via babel+webpack) requires a HTML file.
Here is an example:
import './errorHandler.scss';
import template from './errorHandler.tmpl';
class ErrorHandler {
...
I am loading the component specific SCSS file which I have set in Jest's package.json config to return an empty object but when Jest tries to run the import template from './errorHandler.tmpl'; line it breaks saying:
/Users/jannis/Sites/my-app/src/scripts/errorHandler/errorHandler.tmpl.html:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<div class="overlay--top">
^
SyntaxError: Unexpected token <
at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:284:10)
My Jest config from package.json is as follows:
"jest": {
"setupTestFrameworkScriptFile": "<rootDir>/test/setupFile.js",
"moduleDirectories": ["node_modules"],
"moduleFileExtensions": ["js", "json", "html", "scss"],
"moduleNameMapper": {
"^.+\\.scss$": "<rootDir>/test/styleMock.js"
}
}
It seems that the webpack html-loader is not working correctly with Jest but I can't find any solution on how to fix this.
Does anyone know how I can make these html-loader imports work in my tests? They load my lodash template markup and i'd rather not have these at times massive HTML chunks in my .js file so i can omit the import template from x part.
PS: This is not a react project, just plain webpack, babel, es6.
I encountered this specific problem recently and creating your own transform preprocesser will solve it. This was my set up:
package.json
"jest": {
"moduleFileExtensions": [
"js",
"html"
],
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.html$": "<rootDir>/test/utils/htmlLoader.js"
}
}
NOTE: babel-jest is normally included by default, but if you specify a custom transform preprocessor, you seem to have to include it manually.
test/utils/htmlLoader.js:
const htmlLoader = require('html-loader');
module.exports = {
process(src, filename, config, options) {
return htmlLoader(src);
}
}
A bit late to the party, but wanted to add that there is also this html-loader-jest npm package out there to do this if you wanted to go that route.
Once you npm install it you will add it to your jest configuration with
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.html?$": "html-loader-jest"
}
For Jest > 28.x.x with html-loader:
Create a custom transformer as documented here.
jest/html-loader.js
const htmlLoader = require("html-loader");
module.exports = {
process(sourceText) {
return {
code: `module.exports = ${htmlLoader(sourceText)};`,
};
},
};
Add it to your jest config.
jest.config.js
...
// A map from regular expressions to paths to transformers
transform: {
"^.+\\.html$": "<rootDir>/jest/html-loader.js",
},
...
It will fix the error : Invalid return value: process() or/and processAsync() method of code transformer found at "<PATH>" should return an object or a Promise resolving to an object.
Maybe your own preprocessor file will be the solution:
ScriptPreprocessor
Custom-preprocessors
scriptpreprocessor: The path to a module that provides a synchronous function from pre-processing source files. For example, if you wanted to be able to use a new language feature in your modules or tests that isn't yet supported by node (like, for example, ES6 classes), you might plug in one of many transpilers that compile ES6 to ES5 here.
I created my own preprocessor when I had a problems with my tests after added transform-decorators-legacy to my webpack module loaders.
html-loader-jest doesn't work for me. My workaround for this:
"transform": {
'\\.(html)$': '<rootDir>/htmlTemplateMock.html'
}
htmlTemplateMock.html is empty file
For Jest 28+ you can use jest-html-loader to make Jest work with code that requires HTML files.
npm install --save-dev jest-html-loader
In your jest config, add it as a transformer for .HTML files:
"transform": {
"^.+\\.html?$": "jest-html-loader"
},