React: Cannot find module or its corresponding type declarations.ts - reactjs

I'm trying to access an asset to use in a css declaration...
import FooterBackgroundDesktop from "../../assets/register-bg.png";
"background-image": `url(${FooterBackgroundDesktop})`
However, although the path to assets and the filename is correct, I get the following error:
Cannot find module '../../assets/register-bg.png' or its corresponding type
declarations.ts(2307)
Any ideas?

use like this
"background-image": url("../../assets/register-bg.png")
or you can do this
let FooterBackgroundDesktop = "../../assets/register-bg.png";
"background-image": url(FooterBackgroundDesktop)

Related

Module parse failed: Unexpected token. You may need an additional loader to handle the result of these loaders

When I import Attributes from 'graphology-types' in my .jsx file, I get this error
import { Attributes } from 'graphology-types'
ERROR in ./node_modules/graphology-types/index.d.ts 11:5
Module parse failed: Unexpected token (11:5)
File was processed with these loaders:
./node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
| * Miscellaneous types.
| */
type Attributes = {[name: string]: any};
|
| type GraphType = 'mixed' | 'directed' | 'undirected';
I am new in React. I think the problem is that the graphology-types/index.d.ts is a TypeScript file and I am using .jsx files. How can I make this work?
If you are not using TypeScript, you don't need to import types in your code. Attributes is a TS type that has no meaning or purpose in JS code. You don't need it. I suspect you may be copying TS examples into your code? If so, you can modify those to strip away the types.
Unless you want your app to be strongly typed, but that's a decision you should make separate from encountering this, on its own merits.

SvelteKit, import type LayoutServerLoad/PageLoad

In layout.server.ts I try to
import type { LayoutServerLoad } from './$types';
but the type can't be found:
'"./$types"' has no exported member named 'LayoutServerLoad'. Did you mean 'LayoutServerData'?
What do I need to do to get the type LayoutServerLoad (or PageLoad or PageServerLoad ...) in ./$types?
The file has to be called +layout.server.ts (or for another load action, one of the other fixed names, see docs)
The Vite dev server has to be running, which watches the files and generates the types when a file is changed
(The tsconfig.json has to extend .svelte-kit\tsconfig.json, which defines rootDirs, so the generated types are resolved. This should already be the case, judging by the suggestion for LayoutServerData.)

Using external type definitions with some types not exported

I am using typescript in ReactJs together with Leaflet library (for displaying world maps). I needed to provide the typescript definitions for the library, but they already exist, so I installed them as a node module under #types.
In some place the library requires type of:
(feature: Feature<Geometry, any>, layer: Layer) => void
so I thought it will not be a problem, I created such function:
import L from 'leaflet';
...
function f(feature: L.Feature<L.Geometry, any>, layer: L.Layer){}
the Layer type works without any problems, but for Feature or Geometry I get:
Namespace '"/.../node_modules/#types/leaflet/index"' has no exported member 'Feature'
so I checked what is inside the type definition file:
export as namespace L;
import * as geojson from 'geojson';
...
onEachFeature?(feature: geojson.Feature<geojson.GeometryObject, P>, layer: Layer): void;
it's hidden under geojson, but when I try to access it, like L.geojson.Feature I get has no exported member named 'geojson', so I changed my own code to:
import L from 'leaflet';
import * as geojson from 'geojson';
...
(feature: geojson.Feature<geojson.Geometry, any>, layer: L.Layer
and it works but I am confused, because I thought you don't import type definitions, but only your code and the types living in x.d.ts will be imported for you (this is how the type L.Layer works). However, there is no geojson module in the main node_modules, it's nested under #types module. Am I doing something wrong here?
I thought you don't import type definitions
Actually we do, it is just that TypeScript does it automatically for us with the actual import:
import L from 'leaflet'; // Bundler will import the Leaflet library,
// while TypeScript will look for types in the library, or in "#types"
There are several tsconfig modules options to configure this automatic behaviour, like types, typeRoots (by default the #types folder) and paths (for aliases).
As you figured out, it is also possible to import just types. You can use import type to make it explicit (and to hint the bundler that there is no code to actually import):
import type * as geojson from 'geojson';
It is also possible to access non exported types by deep access:
type TonEachFeature = L.GeoJSONOptions["onEachFeature"];
// ^? ((feature: geojson.Feature<geojson.GeometryObject, any>, layer: Layer): void) | undefined
// You can type the function and let TS infer the argument types automatically
const myOnEachFeature: TonEachFeature = (feature, layer) => {
feature
// ^? geojson.Feature<geojson.GeometryObject, any>
layer
// ^? L.Layer
}
And using utility types:
function myOnEachFeature2(feature: Parameters<NonNullable<TonEachFeature>>[0], layer: L.Layer) {
feature
// ^? geojson.Feature<geojson.GeometryObject, any>
}
Playground Link

Sencha Grid Exporter fails when exporting to CSV or any other type other than xlsx?

I am using Sencha Grid Exporter plugin, while it works perfectly fine when exported to Excel, I cant get it to export to CSV or any other types from my app.
It works fine as listed on the KitchenSink example.
KitchenSink Exporter Example
http://docs.sencha.com/extjs/6.2.1/classic/Ext.grid.plugin.Exporter.html
Ext.getCmp('grid').saveDocumentAs({
type: 'csv', // What other possible values can go here
title: globals.reportName,
fileName: 'myExport.csv'
});
Comes with an error as below:
Uncaught Error: [Ext.createByAlias] Unrecognized alias: exporter.CSV
at Ext.Inventory.instantiateByAlias (app.js?_dc=1481916938387:13520)
at Ext.Factory.create (app.js?_dc=1481916938387:23199)
at constructor.getExporter (app.js?_dc=1481916938387:204593)
at constructor.saveDocumentAs (app.js?_dc=1481916938387:204520)
at constructor.saveDocumentAs (app.js?_dc=1481916938387:5355)
at constructor.onMenuitemClick (app.js?_dc=1481916938387:255332)
at constructor.fire (app.js?_dc=1481916938387:19281)
at constructor.doFireEvent (app.js?_dc=1481916938387:20248)
at constructor.doFireEvent (app.js?_dc=1481916938387:65488)
at constructor.prototype.doFireEvent (app.js?_dc=1481916938387:56438)
You are missing a requires.
If you tell ExtJS to use type:'csv', it will try to instantiate exporter.csv. If you tell ExtJS to use type:'excel', it will try to instantiate exporter.excel. To get that one from the file system, you have to include the fully qualified name somewhere, e.g. in your requires section:
requires:[
'Ext.exporter.text.CSV'
]
The heading in the docs has two parts: First the full qualified class name, which is "Ext.exporter.text.CSV", and then, the short name ("exporter.csv"). If you haven't provided the full name anywhere, the file cannot be loaded, unless the framework itself already requires the exporter by full name. Which it, according to the error message, doesn't.
Background info, before you ask "Why doesn't it?": Since the plugin can work with any of the dozens of exporters, and you wouldn't want to load all just to create one type of export, you have to import the exporter manually.

Java 7: get Path of resource (as object of type Path)

I'm using the features of Java 7 to read in a file. For that purpose I need an object of type Path. In my code, I use the getResource() function to get the relative path (of type URL) to a file.
However, now I have the problem that I don't really now how to get from an object of type URL to an object of type Path easily (without having to go through castings to e.g. to URI then to File and from that to Path)?
Here an example to show you what I would like to do:
URL url = getClass().getResource("file.txt");
Path path = (new File(url.toURI())).toPath(); //is there an easier way?
List<String> list = Files.readAllLines(path, Charset.defaultCharset());
So is there an easier way to achieve that and not having to do that code mess on line 2?
How about
Path path = Paths.get(url.toURI());
It is not proper to create a File from your URL, since it's gotten from the classpath and the file may actually be within a jar.
In Scala would be
import java.nio.file.Paths
val resource = getClass.getResource("myfile.txt")
val path = Paths.get(resource.toURI)
In Java should be the same (with slightly different syntax)

Resources