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

Spread with optional chaining failing with TypeScript and Webpack

I have an application with TypeScript bundled with webpack.
I am using spread operators:
const payload = {
...originalList,
byKey: {
[listId]: {
...originalList?.byKey[listId],
members: [
...originalList?.byKey[listId]?.members, // <== members may be undefined
{
id: data?.attributes?.id,
},
],
},
},
};
When members is undefined, I get an error:
TypeError: can't access property Symbol.iterator of undefined
But this only happens on Firefox; on Chrome, for example, it pass.
May it be related to my webpack build or the tsconfig?
This is the tsconfig:
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/",
"jsx": "react",
"allowJs": true,
"sourceMap": true,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"target": "ES6",
"lib": ["ES6", "dom", "esnext"],
"resolveJsonModule": true,
"esModuleInterop": true,
},
"include": ["./src/**/*", "./*"]
}
This is my webpack
const webpackClientDevConfig = {
mode: 'development',
entry: ['webpack-hot-middleware/client', WEBPACK_SRC_CLIENT],
output: {
filename: 'client-[hash:4].js',
publicPath: WEBPACK_ROOT,
},
devtool: '#source-map',
stats: 'normal',
module: {
rules: [
{
test: /\.(less|css)$/,
use: ['style-loader', 'css-loader', 'less-loader'],
exclude: /node_modules/,
},
],
},
[…] etc.
I'm really curious, any help will be welcome

Undefined isn't spreadable. So if the? triggers then the result is undefined, and your code is effectively ...undefined which obviously doesn't work.
Use ?? To coelesce to an empty array ...(thing?. Prop ?? []), Or find another way to handle null/undefined (like an if check)

syntaxerror unexpected token export in node_modules / esnext and commonjs not compatible

In my typescript based project A, I am importing project B using:
import { functionA, functionB } from '#something/projectB'
But I got the error:
Path_To_Project_B\lib\index.js:1
(function (exports, require, module, __filename, __dirname) { export * from './core/index';
^^^^^^
SyntaxError: Unexpected token export
I checked the tsconfig.json for both projects, here is the tsconfig.json for Project B:
{
"compilerOptions": {
"incremental": true,
"target": "es5",
"module": "esnext",
"jsx": "react",
"declaration": true,
"sourceMap": true,
"experimentalDecorators": true,
"noEmitOnError": true,
"moduleResolution": "node",
"strict": true,
"noFallthroughCasesInSwitch": true,
"noImplicitReturns": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"importHelpers": true
}
}
And here is the tsconfig.json for my project A:
{
"compileOnSave": true,
"compilerOptions": {
"outDir": "../../dist/ProjectA/dts",
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"lib": [
"dom",
"es6",
"scripthost",
"es2016",
"es2015",
"es2015.promise",
"esnext"
],
"declaration": true,
"sourceMap": true,
"noEmitOnError": true,
"noImplicitThis": true,
"alwaysStrict": true,
"strictBindCallApply": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"strictPropertyInitialization": true,
"experimentalDecorators": true,
},
"include": [
"./scripts/Definitions/*.d.ts",
"./scripts/Main.ts"
],
"exclude": []
}
I have tried adding babel dependencies and .babelrc with (Followed Babel official website's steps)
{
"plugins": ["preset-env"]
}
I noticed there are posts related to Jest, but in my project A I am not using it, and in project B, Jest is in use.
I have also tried adding 'babel-loder' in my webpack file:
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
include: /node_modules/,
use: [
'thread-loader',
{
loader: 'babel-loader',
options: {
cacheDirectory: true,
configFile: path.resolve(
__dirname,
"./.babelrc",
),
},
},
],
enforce: 'pre',
query: {
presets: ['preset-env']
}
},
{
test: /\.ts$/,
loader: 'babel-loader',
include: /node_modules/,
use: [
'thread-loader',
{
loader: 'babel-loader',
options: {
cacheDirectory: true,
configFile: path.resolve(
__dirname,
"./.babelrc",
),
},
},
],
query: {
presets: ['preset-env']
},
use: [
{ loader: "ts-loader", options: tsLoaderOptions },
{ loader: "ifdef-loader", options: ifDefLoaderOptions }
]
}
]
},
But the issue still persists, how would project B under node_modules be transpiled and be used by my project A? Thanks!

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

Grunt duplicate errors typescript

I am very new to TypeScript and have just been setting up a project with Grunt. When compiling I receive a large amount duplicate errors in relation to the TypeScript grunt-typescript folder. Any advice would be appreciated!
Bens-MacBook-Pro:Chapter1 bendavies$ Grunt
Running "watch" task
Waiting...
>> File "app.ts" changed.
Running "typescript:base" (typescript) task
>> node_modules/grunt-typescript/node_modules/typescript/lib/lib.core.d.ts(83,5): error TS2300: Duplicate identifier 'configurable'.
This is just a subset of the errors, but they all seem to be duplicate related!
Cheers!
Here is my tsconfig.json file if that's any help!
{
"compilerOptions": {
"outDir": "tasks",
"target": "ES5",
"module": "commonjs",
"noEmitOnError": true,
"diagnostics": true,
"noLib": true,
"experimentalDecorators": true
},
"files": [
"src/index.ts",
"node_modules/typescript/lib/lib.core.d.ts",
"typings/lib.support.d.ts"
],
"exclude": [
"node_modules",
"typings/browser.d.ts",
"typings/browser/**"
]
}

As you have not included your tsconfig.json - I might guess that you missed to exclude node_modules folder.
Try with 'exclude' section set like in the sample below:
{
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"module": "commonjs",
"target": "es6",
"sourceMap": true,
"outDir": "bin",
"declaration": true
},
"exclude": [
"node_modules",
"typings/browser.d.ts",
"typings/browser/**"
]
}

Resolved the issue by modifying the GruntFile.js to a more specific set of sources. Here is the GruntFile I am using now!
module.exports = function(grunt){
grunt.loadNpmTasks('grunt-typescript');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
typescript: {
base: {
src: ['*.ts'],
options:{
module: 'commonjs',
target: 'ea5',
sourceMap: true
}
}
},
watch: {
files: '*.ts',
tasks: ['typescript']
}
});
grunt.registerTask('default',['watch']);
}