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
Related
I am trying to make a UI library that contained code in .jsx , now I want to make the new components in typescript (.tsx), is there a way to bundle my code in one file after running the build command.
My rollup config
import external from "rollup-plugin-peer-deps-external";
import resolve from "#rollup/plugin-node-resolve";
import typescript from "rollup-plugin-typescript2";
import { terser } from "rollup-plugin-terser";
import postcss from "rollup-plugin-postcss";
import babel from "rollup-plugin-babel";
import { DEFAULT_EXTENSIONS } from "#babel/core";
export default [
{
input: "./src/index.js",
output: [
{
file: "dist/index.js",
format: "cjs",
},
{
file: "dist/index.es.js",
format: "es",
exports: "named",
},
],
plugins: [
postcss({
plugins: [],
minimize: true,
}),
babel({
exclude: "node_modules/**",
presets: ["#babel/preset-react"],
extensions: [
...DEFAULT_EXTENSIONS,
".ts",
".tsx"
],
plugins: [
[
"transform-react-remove-prop-types",
{
removeImport: true,
additionalLibraries: ["react-style-proptype"],
},
],
typescript({
include: "src/**/*.{js,ts}"
})
],
}),
external(),
resolve(),
terser(),
],
},
{
input: "./src/index.ts",
output: [
{
file: "dist/index.js",
format: "cjs",
},
{
file: "dist/index.es.js",
format: "es",
exports: "named",
}
],
plugins: [typescript()]
}
];
my tsconfig.json
{
"compilerOptions": {
"target": "ES2016",
"module": "ES2020",
"moduleResolution": "node",
"allowJs": true,
"noEmitOnError": true,
"jsx": "react",
"allowSyntheticDefaultImports": true,
"lib": ["ES2015"],
"strict": true,
"esModuleInterop": false,
"outDir": "./dist",
"rootDir": "./"
}
,
"include": ["./src/**/*.ts"]
// "include": ["./src/**/*.ts", "src/components/Tag/index.tsx"]
}
Current issues : The build file contains code only of my ts files
package being used to add ts support : "rollup-plugin-typescript2"
build command : "build-lib": "rollup -c"
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
Im trying to build my lib and export the components like MaterialUI way:
But, the only thing I can do, is that:
Im using rollup.js and typescript. I notice that d.ts and type.ts files have been exported in the component folder but the component itself is exported in main folder.
Can someone help me to fix it?
My rollup.js config:
import commonjs from '#rollup/plugin-commonjs'
import resolve from '#rollup/plugin-node-resolve'
import replace from '#rollup/plugin-replace'
import peerDepsExternal from 'rollup-plugin-peer-deps-external'
import typescript from 'rollup-plugin-typescript2'
import postcss from 'rollup-plugin-postcss'
import { terser } from 'rollup-plugin-terser'
import del from 'rollup-plugin-delete'
import includePaths from 'rollup-plugin-includepaths'
/* css imports */
import pkg from './package.json'
export default {
input: ['./src/index.ts', './src/TestComponent/index.tsx'],
output: [
{
dir: 'dist/esm',
format: 'esm',
sourcemap: true,
exports: 'named',
strict: false,
plugins: [terser()]
}
],
plugins: [
includePaths({ paths: ['./src'] }),
typescript({
}),
peerDepsExternal(),
resolve(),
commonjs(),
del({
targets: ['dist/*']
}),
postcss({
modules: true,
extract: false,
namedExports: true,
writeDefinitions: true,
}),
replace({
preventAssignment: true,
ENV: JSON.stringify(process.env)
}),
],
external: Object.keys(pkg.peerDependencies)
}
My tsconfig.json file:
{
"compilerOptions": {
"declaration": true,
"declarationDir": "dist",
"outDir": "dist",
"module": "esnext",
"target": "es5",
"lib": ["es6", "dom", "es2016", "es2017"],
"sourceMap": true,
"allowJs": false,
"jsx": "react",
"moduleResolution": "node",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"plugins": [{ "name": "typescript-plugin-css-modules" }]
},
"include": ["src/**/*"],
"exclude": [
"node_modules",
"dist",
"src/**/*.stories.tsx",
"src/**/*.test.tsx"
]
}
My folder's structure:
Ps: I'd like to export only the components to import like
import TestComponent from '#ind/package/esm/TestComponent'
and
import {TestComponent} from '#ind/package/esm'
Late reply, but for anyone stumbling on this the most straightforward way I found was to use the preserveModules option: Instead of creating as few chunks as possible, this mode will create separate chunks for all modules using the original module names as file names.
It does respects the file's relative path, components/Test.jsx ends up in dist/components/Test.js.
This issue also suggests you can map things in input directly; but that doesn't seem to work when using rollup programmatically:
export default {
input: {
'module1': 'src/module1.js',
'foo/module2': 'src/foo/module2.js',
'foo/bar/module3': 'src/foo/bar/module3.js',
},
output: {
format: cjs,
dir: 'dist'
}
}
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/
},
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']);
}