I Have a third-party library needed to be used in project ts code, which is added to the application using a CDN path in the HTML. And this library is exporting a window variable, which is used in the code.
The package is not available as an npm module. While running the webpack build it's failing with the following error message:
error TS2304: Cannot find name 'CUSTOM_WINDOW_VARIABLE'.
I have added this in name in the webpackconfig.js file as :
externals: {
CUSTOM_WINDOW_VARIABLE: "CUSTOM_WINDOW_VARIABLE",
},
But still getting the same error.
How to tell webpack to ignore these global variables while building. Or convert them to window.CUSTOM_WINDOW_VARIABLE from CUSTOM_WINDOW_VARIABLE.
As I know your problem is not about webpack at all. The issue is most likely throwing from ts-loader which uses tsc compiler your tsx? files so in order to fix this issue you might need to define the type for your global value which is available on window as following steps:
Create your project typing dir and the file types/global.d.ts (you can name whatever you want, feel free to use my suggested name in terms of no idea how to name it) with following content:
// global.d.ts
// You can define your own type by replacing with the exact type
declare const CUSTOM_WINDOW_VARIABLE: any;
Make sure your tsconfig.json which is placed at repo's root dir in most cases includes your types dir by adding to include config option:
// tsconfig.json
{
"include": ["types", ...]
}
Hopefully it would work for your case
PS: If you don't import your library as externals, basically you don't have to configure the externals property in your webpack.config file
Related
I am trying install react-input-search. I have error:
Could not find a declaration file for module 'react-search-input'. '.../app/node_modules/react-search-input/lib/index.js' implicitly has an 'any' type.
Try npm install #types/react-search-input if it exists or add a new declaration (.d.ts) file containing declare module 'react-search-input';ts(7016)
Typescript should go with Typescript NPM package, the Typescript NPM package had prefix #types/ on it name.
The NPM package react-search-input do not had Typescript package for it yet, then you can simple fix by following
Create file with name globals.d.ts and put on your source root of Typescript watcher folder
Put declare module 'react-search-input' on that file
And it should working fine
This is a common error that you can simply solve by creating an index.d.ts file and then add a declaration line like this:
declare module 'react-input-search';
You can save this file anywhere you wish but make sure to add the filepath to tsconfig.json like this "typeRoots": [
"types/index.d.ts"
],
This is assuming you saved it in types/index.d.ts
It's a typescript error. It means that there is no type declarations in 'react-input-search' library. There is no package 'react-input-search' with types for it, so you need to declare usage of these library in your project by creating a file with extension .d.ts (for example libraries.d.ts) and insert a line declare module 'react-search-input'; into it.
You can always create the type definition library for this library react-search-input and put it on definitelytyped so now everyone including you can use it.
Here is a guide with examples on how to create a type definition library.
Ive created a library that helps to trace an object state using rx streams and
Im trying to publish it to npm community.
you can check this out In my github repo
I want to compile my library to a single Javascript file and also create a declaration file ".d.ts" for Typescript users.
As i understand, when running $ npm publish i release my entire repository. what i want is to release the dist folder with the library source and declaration file and so the end users will be able to debug my library if necessary through their code so i need also source map.
So first i need to compile my src directory to a single javascript file and i have 2 ways to do so, using tsc or with webpack.
What ive tried so far and you should know:
I used module alias, configured in tsconfig.json.
I separated the library's bussiness logic to multiple files.
I wanted to import internal library's modules using "#lib" prefix.
so in my tsconfig.json i added:
"paths": {
"#lib/*": [
"src/*"
]
},
That alone cause some problems.
first of all running the command:
$ tsc src/index.ts
doesn't work at all and it shows me an error:
src/index.ts(3,15): error TS2307: Cannot find module '#lib/state-traceable'.
src/index.ts(4,15): error TS2307: Cannot find module '#lib/traceable-decorator'. src/index.ts(5,15): error TS2307: Cannot find module '#lib/effect-decorator'.
src/index.ts(6,15): error TS2307: Cannot find module '#lib/meta'.
yet running the command:
$ tsc
does actually works but it compiles each source file and create declaration file for each one of them.
Additionally, it preserves the path alias "#lib/*" instead of compiling it to something javscript compatible with relative paths "../", "./" etc...
Using webpack:
I succeed to bundle all my library sources to a single file and get rid of the "#lib" prefix however im not able to create a single declaration file.
im using "awesome-typescript-loader" plugin for webpack.
I created an issue, thought its a bug but i yet received any response from them:
https://github.com/s-panferov/awesome-typescript-loader/issues/559
Also tried to get some help from Gitter chats, Typescript community, "awesome-typescript-loader" library has no dedicated chat but couldn't find any useful information. Most of the examples ive seen, Typescript library publishers used to create a single file in their source directory: "index.ts" and it makes life easier because you can use tsc and compile that single file to a javascript file.
I hope i will find salvation here.
Some general info about the environment itself:
OS: Windows 10 Pro
Node Version: 9.5.0
npm version: 5.6.0
webpack version: 4.2.0
Please use the path configuration like below
"paths": {
"#lib/state-traceable": ["src/state-traceable.ts"],
"#lib/meta": ["src/meta.ts"],
"#lib/effect-decorator": ["src/effect-decorator.ts"],
"#lib/traceable-decorator": ["src/traceable-decorator.ts"],
"#lib/contracts/*": ["src/contracts/*"],
"#lib/utils/*": ["src/utils/*"],
"#lib/rx-operators/*": ["src/rx-operators/*"]
},
I'm trying to use tracking-js library in my project I'm using react but I dont know if I'm doing anything wrong but keep showing that the module is not found, I already check my package.json and the module install. So this is how I require the module:
const tracking = require("tracking");
what am I doing wrong?
For node, including node-based build tools, first make sure that the module is present. Keep in mind that require does not care about the package.json of your app, only about the module files being present.
Check if node_modules/tracking is present.
Make sure the "main" JS file can be found. If there's a node_modules/tracking/package.json file, see if it has a main property and if the file it references exists. If there is no main property, make sure there's an index.js in the root of the module directory.
If all this is fine and you're getting the module not found error at runtime in client-side JavaScript, then your bundling config may be incorrect, and your webpack/browserify/whatever config will have to be scrutinized for bugs.
Say I write a node module, m. Later, I decide to add Typescript typings to it. Luckily, the module only exports a single function, so the m.d.ts file is as follows:
/// <reference path="./typings/globals/node/index.d.ts" />
declare module "m" {
doThings(b: Buffer): int;
export = doThings;
}
My function uses node's Buffer, so I included a valid reference to the node typings in the installed typings folder (without it, Sublime gives me the "Cannot find name 'Buffer' message, which seems like a bad thing). Everything looks good, so I update the typings key in my package.json and deploy.
Separately, I'm using module m in a separate typescript project, p. I don't have to worry about using typings, since my module has types included. When I run tsc, I get the following error: node_modules/m/m.d.ts(6,1): error TS6053: File '/Users/$USER/projects/p/node_modules/m/typings/globals/node/index.d.ts' not found. That makes a lot of sense, since there isn't a typings folder in node_modules (I was under the impression checking generated folders like that was discouraged). When a typings file is loaded into DefinitelyTyped, it strips out all of the triple slash references (and the best practices say that you shouldn't include them in d.ts files). When there's a typings file loaded into an npm module, nothing is stripped out.
So, my question is this: can I have my cake and eat it too? Is it possible to have valid typings in my module (m) while not including broken references in external projects (p)?
Thanks a bunch!
can I have my cake and eat it too? Is it possible to have valid typings in my module (m) while not including broken references in external projects (p)?
You don't include node.d.ts as a reference tag. Instead you specify that people need to include node.d.ts in their compilation context e.g. using tsconfig.json.
I have quite an annoying, but probably simple, problem that I just cannot figure out.
In a TypeScript file I have defined the following line:
import test1 = require('domReady');
This "domReady" module is defined in a main.js file that is loaded as the entry point for RequireJS. The definition is as followed:
require.config({
paths: {
'domReady': '../domReady',
}
However... in my TypeScript file I simply get a "cannot find module 'domReady'" and it is driving me insane, as I have double checked the pathing to the file and it is indeed in the correct location with the correct name. Additionally, I am fairly certain that the domReady.js file IS AMD compatible, so it should define an external module just fine! (domReady GitHub Link).
I seriously can't understand why the module can't be found in the import statement. Does anyone have any ideas to what the problem may be?
EDIT 1
The directory structure is as follows:
.
+--App
| +--main.js
| +--dashboard.js
+--domReady.js
The import statement takes place in the "dashboard.js" file, and the config for require.js happens in "main.js".
In order for TypeScript to find a module, you must actually provide module information to TypeScript.
TypeScript doesn’t yet support AMD-style paths configuration, it doesn’t ever use calls within your JavaScript code (like require.config()) to configure itself, and it won’t treat JavaScript files on disk as modules when compiling. So right now, you aren’t doing anything to actually give the compiler the information it needs to successfully process the import statement.
For your code to compile without error, you have to explicitly declare an ambient declaration for the module you’re importing within the compiler, in a separate d.ts file:
// in domReady.d.ts
declare module 'domReady' {
function domReady(callback: () => any): void;
export = domReady;
}
Then, include this d.ts in the list of files you pass to the compiler:
tsc domReady.d.ts App/main.ts App/dashboard.ts
Any other third party JavaScript code that you import also needs ambient declarations to compile successfully; DefinitelyTyped provides d.ts files for many of these.
I've had problems before when the path key and the directory name or file name are the same (in your case, domReady). Might not work, but worth giving it a quick try, i.e.
either
'domReadyModule': '../domReady',
require('domReadyModule')
or rename domReady.js to e.g. domReady-1.0.js and use
'domReady': '../domReady-1.0',
require('domReady')
If that doesn't work, I'd check the relative directories between main.js and the file that is doing the require, or else try importing another library in the same fashion, or finally compare with other libraries that you are importing successfully.
Good luck, hope you resolve the problem!