TypeError: Cannot read property 'then' of undefined

[jonataswalker]

TypeError: Cannot read property 'then' of undefined
    at next (/var/www/FileBrowser/node_modules/rollup/dist/rollup.js:148:22)
    at /var/www/FileBrowser/node_modules/rollup/dist/rollup.js:152:48
    at <anonymous>

Rollup: 0.46.1

This happens with watch option at the first modification.

[Rich-Harris]

Can you make a repro please?

[jonataswalker]

I'm trying but no success until now. Perhaps it's some plugin.

Edit:
The error is thrown here:

export function mapSequence ( array, fn ) {
	const results = [];
	let promise = Promise.resolve();

	function next ( member, i ) {
		return fn( member ).then( value => results[i] = value );
	}

	for ( let i = 0; i < array.length; i += 1 ) {
		promise = promise.then( () => next( array[i], i ) );
	}

	return promise.then( () => results );
}

Specifically: return fn( member ).then( value => results[i] = value );

fn is undefined isn't promise function.

[jonataswalker]

@Rich-Harris actually the problem (my guess) is when you have multiple configs.

Repro: https://github.com/jonataswalker/rollup-watch-repro

[Rich-Harris]

Thank you — this is fixed in 0.47.5

[reactkeshav]

i Have also same problem.. please help me out

import React, { useState, useEffect } from 'react'
import { CCard, CCardHeader, CCardBody, CRow } from '@coreui/react'
import { Table, Tag, Space, Carousel, Popconfirm, message } from 'antd'
import '../../../scss/_custom.scss'
import DataBase from '../../../Firebase/DataFirebase'
import { Images } from '../../../Shared/Assets'
import ImageIcon from '../../../components/Atoms/ImageIcon'

import ProductDataSource from './Constant/ProductDataSource'

import '../BuisnessPost/style.scss'

// import Modal from 'src/components/Cell'17
import { Modal, Button, Form } from 'react-bootstrap'
import { object } from 'prop-types'

const BuisnessPost = () => {
const { Column, ColumnGroup } = Table
const [show, setShow] = useState(false)
const [active, setActive] = useState()
const [productsList, setProductsList] = useState(ProductDataSource)
const [dataList, setDataList] = useState([])

const handleClose = () => setShow(false)
const handleShow = () => {
setShow(true)
}

// delete handle
function deleteHandle(ind) {
setProductsList(productsList.filter((item) => item.key !== ind.key))
}

// data from firebase
useEffect(() => {
DataBase.getAllProducts().then((response) => {
console.log('Data fetched', response)
setDataList({
dataList,
})
})
// .catch(() => {
// setDataList({
// ...dataList,
// })
// })
})

// message popups
function confirm(e) {
e.preventDefault()
console.log(e)
message.success('Click on Yes')
}
function cancel(e) {
console.log(e)
message.error('Click on No')
}

// const ProductDataSource = [
// {
// key: 0,
// Image: (
//
//

// <ImageIcon style={{ width: '100px' }} src={Images.AVATAR} />
//

//

// <ImageIcon style={{ width: '100px' }} src={Images.AVATAR} />
//

//
// ),
// Product: 'cam',
// Price: ' $100 ',
// Description: ' Camera for photography ',
// status: 'Active',
// created: '12 june 2021',
// },
// ]

return (
<>


Posts
{/* */}

          <Column
            title="Action"
            key="action"
            render={(text, record) => (
              <Space size="middle">
                <a className="View">View</a>
                <a className="Approve" onClick={handleShow}>
                  Aproved status
                </a>
                <Popconfirm
                  title="Are you sure to delete this task?"
                  onCancel={() => {}}
                  onConfirm={confirm}
                  okText="Yes"
                  cancelText="No"
                >
                  <a className="Delete">Delete</a>
                </Popconfirm>
              </Space>
            )}
          />
        </Table>
      </CRow>

      <Modal show={show}>
        <Modal.Header>
          <Modal.Title>Status</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <Form.Control
            as="select"
            value={active}
            onChange={(e) => {
              e.preventDefault()
              setActive(e.target.value)
            }}
          >
            <option value=""> Choose Type</option>
            <option value="Approved">Approved</option>
            <option value="Reject">Reject</option>
          </Form.Control>
        </Modal.Body>
        <Modal.Footer>
          <Button className="text-white" variant="secondary" onClick={handleClose}>
            Close
          </Button>
          {/* <Button className="text-white" variant="success" onClick={handleSubmitChange}>
            Save
          </Button> */}
        </Modal.Footer>
      </Modal>
    </CCardBody>
  </CCard>
</>

)
}
export default BuisnessPost

[yearswriter]

Having the same issue, happens with Promise in window.onload handler, rollup does succesfully bundle, main question is why it looses this

Input:

rollup v2.58.1

rollup.config.js

import json from '@rollup/plugin-json';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import nodePolyfills from 'rollup-plugin-polyfill-node';

export default {
    input: 'src/src_mapInit.js',
    context: 'window',
    output: {
      file: 'build/mapInit.js',
      format: 'iife',
    },
    plugins: [json(),resolve(),nodePolyfills(),
        commonjs()]
  };

src/src_mapInit.js

import { Map, Polyline, GeoJSON, TileLayer, Canvas } from  'Leaflet';
import {MapSettings, LayerSettings} from "./classes/Settings.js";
window.onload = function (){
    mapInit();
}
function mapInit() {
 //...bunch of leaflet stuff that works
var loadJson = new Promise((resolve, reject) => {
    var request = new XMLHttpRequest();
    request.open('GET', "./geojson/map_template.json");
    request.setRequestHeader('Content-Type', 'application/json');
    request.responseType = 'json';
    request.onload = function() {
        if (request.status === 200) {
            resolve(request.response);            
        } else {
            reject(Error('Json didn\'t load successfully; error code:' + request.statusText));
        }
    }
    request.onerror = function() {
        reject(Error('There was a network error.'));
    };
    request.send();
});

loadJson.then((map_template) => {
    GeoJSON(map_template).addTo(map);
});
}

html:

    <script type="module" async src="... mapInit.js" crossorigin=" "></script>

error

Uncaught (in promise) TypeError: this is undefined

stack trace:

    NewClass ... mapInit.js:261
    mapInit ... mapInit.js:14031
    promise callback*mapInit  ... mapInit.js:14030
    onload ... mapInit.js:13664
    EventHandlerNonNull* ... mapInit.js:13662
    ...

mapInit.js:261 (+- line or two)

// @class Class
// @aka L.Class

// @section
// @uninheritable

// Thanks to John Resig and Dean Edwards for inspiration!

function Class() {}

Class.extend = function (props) {

// @function extend(props: Object): Function
// [Extends the current class](#class-inheritance) given the properties to be included.
// Returns a Javascript function that is a class constructor (to be called with `new`).
var NewClass = function () {
//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
	// call the constructor
	if (this.initialize) { // this.initialize is asking undefined this -  why? <----- ERROR IN QQ
		this.initialize.apply(this, arguments);
	}
//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
	// call all constructor hooks
	this.callInitHooks();
};

var parentProto = NewClass.__super__ = this.prototype;

var proto = create$2(parentProto);
proto.constructor = NewClass;

NewClass.prototype = proto;

// inherit parent's statics
for (var i in this) {
	if (Object.prototype.hasOwnProperty.call(this, i) && i !== 'prototype' && i !== '__super__') {
		NewClass[i] = this[i];
	}
}

// mix static properties into the class
if (props.statics) {
	extend(NewClass, props.statics);
	delete props.statics;
}

// mix includes into the prototype
if (props.includes) {
	checkDeprecatedMixinEvents(props.includes);
	extend.apply(null, [proto].concat(props.includes));
	delete props.includes;
}

// merge options
if (proto.options) {
	props.options = extend(create$2(proto.options), props.options);
}

// mix given properties into the prototype
extend(proto, props);

proto._initHooks = [];

// add method for calling all hooks
proto.callInitHooks = function () {

	if (this._initHooksCalled) { return; }

	if (parentProto.callInitHooks) {
		parentProto.callInitHooks.call(this);
	}

	this._initHooksCalled = true;

	for (var i = 0, len = proto._initHooks.length; i < len; i++) {
		proto._initHooks[i].call(this);
	}
};

return NewClass;
};