Develop Reference

Rollup & Typescript type declarations with absolute imports

I'm making React component library. Project structure is something like:
src/
components/
utils/
hooks/
Now I'm trying to generate types (.d.ts.) files using rollup. Types are generated but e.g. my component NumberInput is using absolute import from Input component like so:
import Input from "components/Input/Input";
Now imports in NumberInput.d.ts look exactly the same:
import Input from "components/Input/Input";
But now those imports in d.ts files are not gonna be resolved since there is no tsconfig.json for generated code (I Guess).
tsconfig.json
{
"compilerOptions": {
"module": "esnext",
"target": "es5",
"lib": ["es6", "dom"],
"sourceMap": true,
"jsx": "react",
"moduleResolution": "node",
"rootDir": "src",
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"declaration": true,
"esModuleInterop": true,
"baseUrl": "src/",
"paths": {
"components/*": ["components/*"],
"models/*": ["hooks/*"],
"utils/*": ["utils/*"]
}
},
"exclude": ["node_modules", "build", "dist", "scripts", "acceptance-tests", "webpack", "jest"],
"types": ["typePatches"]
}
rollup.config.js
export default {
input: [
"./src/index.ts",
...getFiles("./src/components", extensions),
...getFiles("./src/hooks", extensions),
...getFiles("./src/utils", extensions)
],
output: [
{
dir: "dist",
format: "esm",
sourcemap: true
}
],
external: ["react", "react-dom", "styled-components"],
plugins: [
resolve(),
commonjs(),
typescript({
tsconfig: "./tsconfig.build.json",
declaration: true,
declarationDir: "dist"
}),
image(),
url({
include: ["**/*.woff2"],
limit: Infinity
}),
css(),
terser()
],
external: ["react", "react-dom", "styled-components"]
};
Is there any way I can control absolute imports when types are being generated? I wanna use absolute imports inside my project, but when types are generated I rly don't care how they look as long as they work.

The best working solution imo is nicely summed up in this article by using rollup-plugin-dts.
In plugin you can pass compilerOptions parameter, with basePath and paths so it will correctly resolve absolute imports of type declarations.
rollup.config.ts file:
...
plugins: [
dts({
compilerOptions: {
baseUrl: tsConfig.compilerOptions.baseUrl,
paths: tsConfig.compilerOptions.paths,
},
}),
],
...

You have told typescript for files, but rollup does not know how to actually resolve rollup will look in home folder if you write components/a.ts
There is a plugin for rollup #rollup/plugin-alias
plugins: [
alias({
entries: [
{ find: 'components', replacement: 'your path to components folder' },
]
})
]
EDIT

Problems with rollupjs configuration

When building my TypeScript project (all node modules are up to date) with the following configuration I get a error message called "Error: When building multiple chunks, the output.dir option must be used, not output.file."
Can anyone help? Thanks.
// [EDIT: I've simplified this configuration as the original
// one caused some misunderstandings]
// rollup.config.js
import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import typescript from 'rollup-plugin-typescript2'
import { uglify } from 'rollup-plugin-uglify'
import gzip from 'rollup-plugin-gzip'
export default {
input: 'src/main/my-project.ts',
output: {
file: 'dist/my-project.umd.production.js',
format: 'umd',
name: 'MyProject',
sourcemap: false,
globals: {
'react': 'React'
}
},
external: ['react'],
plugins: [
resolve(),
commonjs(),
typescript({
exclude: 'node_modules/**'
}),
uglify(),
gzip()
]
}
This is my tsconfig.json in case it may be important.
The build script is started by rollup --c rollup.config.js:
{
"compilerOptions": {
"target": "ES5",
"jsx": "react",
"allowSyntheticDefaultImports": true,
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"downlevelIteration": true,
"sourceMap": true,
"lib": ["es5", "es6", "dom"],
"esModuleInterop": true,
"baseUrl": ".",
"typeRoots": [
"node_modules/#types"
],
"types": [
"node", "react", "react-dom", "mocha", "chai"
]
},
"files": [
"src/main/my-project.ts"
],
"include": [
"./src/**/*.ts*"
]
}

I had a similar issue and as a fix I needed to specify the output module in package.json
{
...
"module": "./dist/index.esm.js",
...
}
And it's aligned with the rollup config:
output: [
{ file: pkg.main, format: 'cjs' },
{ file: pkg.module, format: 'esm' },
]

For all those how are still struggling to get this issue fixed and you are using dynamic imports in the component than you should add inlineDynamicImports: true just above output object

It seems that the configuration wasn't the problem, but there was still something wrong with the versions of my node modules.
After I did the following, everything worked fine again:
> ncu -u
> npm update
> npm install

TypeScript output file doesn't get updated after transpilation

I downloaded this seed for an Angular & TypeScript project. I updated the ts files and then transpiled it with no errors, but the output file doesn't get updated.
tsconfig:
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"noImplicitAny": true,
"sourceMap": true,
"outFile": "dist/app.js"
},
"exclude": [
"node_modules"
],
"files": [
"app/initialize.ts",
"app/welcome/welcome.ts"
]
}
Please let me know if you need any other information.

Angular 2 - Receiving TSLint errors in my node_modules folder

I just installed this angular2-material-datepicker using NPM. It's installed in my node_modules folder, however I receive tslint errors which I shouldn't be getting.
ERROR in ./~/angular2-material-datepicker/index.ts
[1, 15]: ' should be "
However in my tsconfig.json I clearly state that my node_modules folder should be excluded.
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2016", "dom" ],
"noImplicitAny": true,
"noImplicitReturns": true,
"suppressImplicitAnyIndexErrors": true,
"skipLibCheck": true
},
"include": [
"client/**/*"
],
"exclude": [ "node_modules", "dist" ]
}
I confirmed that the module is located in my node_module folder. This is the first module which gives me these errors.
Any idea for possible solutions?
thanks!

I found out the issue was with webpack.
I had to exclude node_modules over there aswell.
So in /config/base.js I excluded it from the rules like this.
module: {
rules: [
{
enforce: 'pre',
test: /\.ts$/,
loader: 'tslint-loader',
options: {
emitErrors: true,
failOnHint: true
},
exclude: /node_modules/
},

Typescript project setup (first time)

First off, I didn't see a clear answer after hours of googling, sorry if I overlooked something.
Quick version
With Typescript how can I move node_modules to outDir or am I going about things the wrong way?
Long version
I'm trying to get started with typescript and configuring the project seems to be the hardest part. My goal is to have my source code in src/server and my output to be in bin/server
Here is my tsconfig.json for reference:
{
"compilerOptions": {
"allowJs": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"module": "commonjs",
"moduleResolution": "node",
"noEmitOnError": true,
"noImplicitAny": false,
"outDir": "../../bin",
"sourceMap": true,
"suppressImplicitAnyIndexErrors": true,
"target": "ES2015",
"typeRoots": [
"../../node_modules/#types/"
]
},
"exclude": [
"bin/*",
"node_modules/*",
"public/*",
"**/*-aot.ts"
]
}
Here is the directory structure:
Project
+-/bin
| +/server
| +-server.js
+-/src
+/server
+-server.ts
+-package.json
+-/node_modules
+-[...]
+-/typings
+-[...]
To compile from ~/Project I use tsc -p src/server, boom we have bin/server/server.js.
To run I am using vs code, here is launch.json:
{
"version": "0.2.0",
"configurations": [{
"outFiles": [ "${workspaceRoot}/bin/server/**/*.js" ],
"cwd": "${workspaceRoot}/bin/server",
"name": "Launch",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/src/server/server.ts",
"sourceMaps": true,
"env": {
"NODE_ENV": "development",
"SERVER": "http://localhost:8080"
}
}]
}
The error I am getting is Error: Cannot find module 'express', the module is installed in src/server/node_modules/express so I'm guessing I have to move node_modules to bin/server as well? That doesn't seem right.
Super new to typescript (started today) thanks for taking the time to read my long post.
PS: Assume everything is on version latest.

Answer found!
I moved tsconfig.json to src/server/ and ran tsc -p src/server from the project root.
Updated tsconfig.json for reference:
{
"compilerOptions": {
"allowJs": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"module": "commonjs",
"moduleResolution": "node",
"noEmitOnError": true,
"noImplicitAny": false,
"outDir": "../../bin",
"sourceMap": true,
"suppressImplicitAnyIndexErrors": true,
"target": "ES2015",
"typeRoots": ["node_modules/#types/"]
},
"exclude": [
"bin/*",
"node_modules/*",
"public/*",
"**/*-aot.ts"
]
}