I have custom type in src/#types/app.d.ts ( export type AuthKeyT = string )
I would like to use it in tsx react file (using import { AuthKeyT } from '#types/app'), but I am getting an error:
Cannot import type declaration files. Consider importing 'app' instead of '#types/app'
So, when I use import { AuthKeyT } from 'app' I am getting:
Cannot find module 'app'.
So.. what is wrong? How should I import custom type?
I am using typescript 3.7.2 in react app.
You're facing this error because #types/... is a global import. For example import { AuthKeyT } from '#types/app' means your're trying to import from #types that is in node_modules.
You can fix this by changing #types to something like #customTypes or by changing the path for your types folder something like #src/types... while importing.
As the error says, you can't import a .d.ts file in TypeScript.
import ... from 'app' mean implicitly import ... from 'app.ts' or this file don't exist so you get the second error.
If you want to use your types using this import, you have to write them in a simple .ts file like that:
src/#types/app.ts:
export type AuthKeyT = string
With this structure you will be able to import this type using:
import { AuthKeyT } from 'app'
You can also add path to your compilterOptons in the tsconfig.json like this:
"compilerOptions": {
"paths": {
"types/*": [
"./#types/*"
]
}
}
and then import { AuthKeyT } from 'types/app'
Related
declare module '*.png'; index.d.ts
include :[ "./src/index.d.ts",] tsconfig.json
By importing image as import Image from "./public/assets/Images/Image.png I faced module can't find, then I added the created a file and added it in tsconfig.json. Yet facing the above mentioned error.
I had another module declaration in index.d.ts file which was using import.
try to move import inside the declaration:
From:
import "#emotion/react";
declare module "#emotion/react" {
export interface Theme {
color: string;
}
}
declare module '*.jpg';
To:
declare module "#emotion/react" {
import "#emotion/react";
export interface Theme {
color: string;
}
}
declare module '*.jpg';
*** NOTE ***
This has solved current issue but created another one with imports from #emotion/react.
Finally I moved #emotion/react declaration to separate file, e.g: emotion.d.ts
I'm using CRA with typescript (create-react-app myapp --typescript)
I have some typescript stuff in my App.tsx that I would like to store externally, and I've tried creating App.d.ts, index.d.ts, module.d.ts and none of it works.
Here's the interface I'm using:
declare interface IArgs {
home: string,
away: string
}
What do I need to do to be able to declare all my Typescript stuff in a file that my source files can share?
Put in external file eg. interfaces/interfaces.ts:
export interface IArgs {
home: string,
away: string
}
Then in App.tsx where you want to use it you import it by: import { IArgs } from 'interfaces/interfaces'; and use it for your needs.
I am trying to import module from #types/ng-file-upload/index.d.ts which contains
declare var angularFileUploadDefaultExport: string;
export = angularFileUploadDefaultExport;
declare module 'angular' {
export namespace angularFileUpload {
interface ImageDimensions {
}
}
}
now if i import it like below
import * as ngFileUpload from 'ng-file-upload';
or
import 'ng-file-upload';
or
import ngFileUpload = require('ng-file-upload');
but webpack is still giving error while trying to access ngFileUpload.ImageDimensions
what is the correct way to import packages defined with module??
given that it is defined inside the angular modules declare module 'angular' { there is no need to import it... just directly use it as angular.angularFileUpload
I am getting a webpack TypeError when I am trying to simplify an import. The following code works without any issues. Here I am importing a React Higher-Order-Component (HOC) called smartForm from core/components/form/index.js.
core/components/form/index.js (does a named export of smartForm)
export smartForm from './smart-form';
login-form.jsx (imports and uses smartForm)
import { smartForm } from 'core/components/form';
class LoginForm extends React.Component {
...
}
export default smartForm(LoginForm);
However, I want to simplify the import to just import { smartForm } from 'core'. So I re-exported smart-form in core/index.js and imported it from core. See the code below:
core/index.js (does a named export of smartForm)
export { smartForm } from './components/form';
// export smartForm from './components/form'; <--- Also tried this
login-form.jsx (imports and uses smartForm)
import { smartForm } from 'core';
class LoginForm extends React.Component {
...
}
export default smartForm(LoginForm); // <--- Runtime exception here
This code compiles without any issues, but I am getting the following runtime exception at the line export default smartForm(LoginForm);:
login-form.jsx:83 Uncaught TypeError: webpack_require.i(...) is not a function(…)
What am I missing?
P.S. Here are the Bable and plugin versions that I am using:
"babel-core": "^6.18.2",
"babel-preset-es2015-webpack": "^6.4.3",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-1": "^6.16.0",
tl;dr
For the questioner: Add this to your webpack.config.js:
resolve: {
alias: {
core: path.join(__dirname, 'core'),
},
},
For the general audience: Make sure the thing you try to import is indeed exists in that package.
Explanation
Questioner's problem: importing own code like npm modules
You try to import your module's exports in the same fashion how you import something from an npm package from the node_modules folder: import { something } from 'packagename';. The problem with this is that doesn't work out of the box. The Node.js docs give the answer on why:
Without a leading '/', './', or '../' to indicate a file, the module must either be a core module or is loaded from a node_modules folder.
So you either has to do what Waldo Jeffers and Spain Train suggested and write import { smartForm } from './core', or you can configure webpack so it can resolve your import path via its aliases which are created to solve this exact problem.
Debugging the error message in general
This error can arise if you try to import something from an existing npm package (in node_modules) but the imported thing doesn't exist in the exports. In this case, make sure there were no typos and that the given thing you try to import is indeed in that package. Nowadays it is trendy to break libraries into multiple npm packages, you might be trying to import from a wrong package.
So if you get something like this:
TypeError: __webpack_require__.i(...) is not a function
at /home/user/code/test/index.js:165080:81
at Layer.handle [as handle_request] (/home/user/code/test/index.js:49645:5)
To get more information on what import you should check, just open the output file generated by webpack and go to the line marked by the topmost line in the error stack (165080 in this case). You should see something like: __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_9_react_router_dom__["match"]). This tells us that there is no match export (or there is but it isn't a function) in react-router-dom, so we need to check our stuff around that import.
Since core is a folder of your app and not an npm module, Webpack can not understand which file you want to load. You must use a correct path pointing to a file. You have to replace import { smartForm } from 'core'; by import { smartForm } from './core/index.js
This error will occur by many reasons. Once I encountered this error when I add js in file-loader then when I removed it start to work correctly.
{
test: /\.(ttf|eot|svg|gif|jpg|png|js)(\?[\s\S]+)?$/,
use: 'file-loader'
},
When I remove |js it works
{
test: /\.(ttf|eot|svg|gif|jpg|png)(\?[\s\S]+)?$/,
use: 'file-loader'
},
Just remove these 2 line from config
const context = resolve.alias.context('./', true, /\.spec\.ts$/); context.keys().map(context);
I'm sorry, but I'm very lost. Actually I have this:
import * as angular from 'angular';
import 'ts-angular-jsonapi';
And dont return any errors. But, when I do this
import * as angular from 'angular';
import * as jsonapi from 'ts-angular-jsonapi';
I get this error:
ERROR in ./src/index.ts
(14,23): error TS2307: Cannot find module 'ts-angular-jsonapi'.
What changes need I do on ts-angular-jsonapi library for fix this errors.
More info: I need do this becouse I need make something like this:
class myresource extend jsonapi.resource {
}
I found the solution. When you write a .TS file, you can not import any .JS file. You need use require(). In the code:
// some_file.ts
import * as angular from 'angular';
var jsonapi = require('ts-angular-jsonapi'); // .js library
But if you are searching the best and correct solution for typescript node module, I build a simple example on github. With this example, you can do something like this:
import * as animal_module from 'animal_module';
class Snake extends animal_module.Animal {
constructor(name: string) { super(name); }
}
let sam = new Snake('Sammy the Python');
why don't you try
import angular from 'angular'; import jsonapi from 'ts-angular-jsonapi';