Issues with setting up rollupjs configuration

While compiling my TypeScript project with the provided configuration, I encountered an error message stating: "Error: When building multiple chunks, the output.dir option must be used, not output.file."

Any assistance would be greatly appreciated. Thank you.

// [EDIT: I've made adjustments to simplify this configuration]

// 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 file in case it might factor in. The build script begins with 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*"
  ]
}

Answer №1

Dealing with a similar issue, I found the solution by specifying the output module in my package.json file.

{
 ...
 "module": "./dist/app/index.esm.js",
 ...
}

This adjustment was also reflected in my rollup configuration:

output: [
      { file: pkg.main, format: 'cjs' },
      { file: pkg.module, format: 'esm' },
    ]

Answer №2

If you're encountering difficulties resolving this problem and implement dynamic imports within your component, consider incorporating inlineDynamicImports: true immediately before the output object

Answer №3

It appears the issue was not with the configuration, but rather a problem with the versions of my node modules.

Once I performed the following steps, everything started working correctly again:

> ncu -u
> npm update
> npm install

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The hook call you made in next.js/react is invalid and cannot be

I recently followed a tutorial on creating a hamburger menu in react/next.js. You can check out the tutorial here. import { useState } from "react"; import user from '../styles/userview.module.css' export function PageHeader() { con ...

What is the process of generating a fresh JavaScript object using GWT JSNI?

Is there a way to create a new JavaScript object from GWT using JSNI? I can't seem to find any information in the documentation. I did manage to make it work by moving all the JS code to .html files, but that caused another unrelated problem. Here is ...

JavaScript: Iterating over the characters of items in an array

I'm currently facing an issue with the following task: Create a function that accepts a list of words and returns an object indicating how many times each letter appears. For example: var data = ['hat', 'cat', 'dog']; ...

The compilation of the Angular application is successful, however, errors are arising stating that the property does not exist with the 'ng build --prod' command

When compiling the Angular app, it is successful but encountered errors in 'ng build --prod' ERROR in src\app\header\header.component.html(31,124): : Property 'searchText' does not exist on type 'HeaderComponent&apo ...

Implement type declarations for a React JS form validation schema

I encountered the following scenario: interface FORM<P> { onSubmit: (d: P) => void; schema?: yup.SchemaOf<P>; } This is an example of my onSubmit function: const onSubmit = (d: { firstName: string; lastName: string }) => { conso ...

Enhancing user experience by implementing AJAX in a contact form to eliminate the need for page

I have read numerous questions on this topic and have compiled the code I currently have from various responses. Unfortunately, despite my efforts, I am unable to make it work and I cannot identify the reason behind this issue. Below is the HTML form str ...

I have attempted every possible solution to identify the reason behind this recurring error. Specifically, I keep encountering a CastError when trying to convert a

Struggling to figure out why this error keeps happening. It's so frustrating! I've been attempting to eliminate the cloudinary upload feature from my website. This should allow users to post on my blog without having to upload an image. Howeve ...

Implementing logic with multiple columns in JavaScript

Looking for a way to display an array of data in multiple columns using Java Script, like this: 1 2 3 4 5 6 7 8 9 instead of 1 4 7 2 5 8 3 6 9 Any suggestions would be greatly appreciated. Thank you. ...

Validating date parameter in Wiremock request - How to ensure dynamic date matching during testing?

Looking for some assistance in verifying that the date in a request is exactly Today. I've tried various methods from the documentation, but haven't achieved the desired outcome yet. Calling out to any helpful souls who can guide a junior QA thro ...

Transferring information between two components in separate Angular 4 modules

Within my application, I have defined two modules named AppModule and UserModule. I am currently encountering an issue with data sharing between the AppComponent and the LoginComponent (which belongs to the UserModule). Below is a snippet of app.componen ...

Chrome reload causing page to automatically scroll to bottom on my website

Could really use some assistance in solving this problem as I am completely stumped. I've noticed an issue on one of my websites when pages are reloaded. Every now and then (not consistently, which adds to the confusion), upon refreshing a page, it ...

The alterations made to a single dropdown option are causing ripple effects across all other dropdowns

There is an add button that continuously adds a div container containing two dropdowns. The selection in one dropdown affects the data in the other dropdown. When the add button is clicked, a second div with both dropdowns is added. However, changing the ...

Displaying an iframe in Internet Explorer

My current setup involves a button that triggers the loading and printing of a report within an "invisible" iframe enclosed in a div. This process allows users to print the report from a different page without any visual disruption or changing pages, aside ...

Opening a window using Javascript with a PHP Ajax response

I'm attempting to use echo in a controller to return the content below in an AJAX response: $url = url('/expert-profile-view')."/".$request->ticket_id."/".$key->user_id; $url = "<a onclick='window.open('$url','m ...

A guide to accessing an ngModel element within a reusable component

I have a specific ngModel component inside a reusable component that is not part of a form. I need to access it in order to make some changes, but when I try to do so using the code below, it returns undefined during OnInit. Can you advise me on how to pro ...

What is the reason behind arr.reverse() flipping the original array?

My goal is to reverse an array and store the reversed version in a new array without altering the original array. Here is the code I am using: var arr= ["1", "2", "5"] var arrTwo = arr.reverse(); console.log(arrTwo) \\ ["5" , "2" , "1"] console. ...

Experiencing a lack of content in an Express response

Currently utilizing express to manage a POST request, but encountering an issue when sending the body using node-fetch. After sending the body and logging it in express (server-side code), I am seeing an empty object. The reason behind this behavior remain ...

Issue with two Jquery slider forms

Within a Jquery slider, I have implemented two distinct forms (using this specific Jquery slider: http://tympanus.net/Tutorials/FancySlidingForm/) . My goal now is to establish JavaScript/jQuery validation for these two forms separately BASED on the form ...

I will see the "undefined" entity displayed in the bar chart created using react-chartjs

Using the react-chartjs-2 library, I created a bar chart with the following data: const chartData = { labels: ['Dealer1', 'Dealer2', 'Dealer3', 'Dealer4', 'Dealer5', 'Deal ...

Utilizing JQuery's .Toggle function in conjunction with a stylish CSS transform button

I am trying to create a toggle menu that shows and hides itself without requiring the button to be clicked twice. I have added e.preventDefault(); which solves the issue, but now the button does not transform as intended. $(document).ready(function() { ...