Uncaught ReferenceError: require is not defined

[aedart]

For an application that I'm trying to make, I'm importing the mqtt package, yet it keeps failing, due to require not being defined?!

Since that package exports multiple components, I have to import it as such, which should work

import * as mqtt from 'mqtt';

I know that this has reference to #77 and #108, but not sure what I'm doing wrong....!?

Additional info:

package.json

{
  // ... package details skipped ... //
  "dependencies": {
    "bufferutil": "^1.2.1",
    "mqtt": "~2.0",
    "sails.io.js": "^0.13.3",
    "socket.io": "^1.4.4",
    "socket.io-client": "^1.4.4",
    "utf-8-validate": "^1.2.1"
  },
  "devDependencies": {
    "faker": "^3.1.0",
    "jasmine": "^2.5.2",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-firefox-launcher": "^1.0.0",
    "karma-ie-launcher": "^1.0.0",
    "karma-jasmine": "^1.0.2",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-rollup-plugin": "^0.2.4",
    "karma-spec-reporter": "0.0.26",
    "rollup": "^0.36.3",
    "rollup-plugin-buble": "^0.14.0",
    "rollup-plugin-commonjs": "^5.0.5",
    "rollup-plugin-multi-entry": "^2.0.1",
    "rollup-plugin-node-builtins": "^2.0.0",
    "rollup-plugin-node-globals": "^1.0.9",
    "rollup-plugin-node-resolve": "^2.0.0",
    "rollup-plugin-uglify": "^1.0.1",
    "uglify-js-harmony": "^2.6.2"
  }
}

karma.config.js

// Karma configuration

const buble = require('rollup-plugin-buble');
const commonjs = require('rollup-plugin-commonjs');
const nodeResolve = require('rollup-plugin-node-resolve');
//const uglify = require('rollup-plugin-uglify');
//const minify = require('uglify-js-harmony').minify;
const builtins = require('rollup-plugin-node-builtins');
const globals = require('rollup-plugin-node-globals');

module.exports = function (config) {
    config.set({
        basePath: '',
        frameworks: ['jasmine'],
        files: [
            'tests/**/*Test.js',
        ],
        exclude: [],
        preprocessors: {
            'tests/**/*Test.js': ['rollup'],
        },
        reporters: ['spec','progress'],
        browsers: ['Chrome', 'Firefox'],

        // Rollup preprocessor settings
        rollupPreprocessor: {
            // rollup settings. See Rollup documentation
            plugins: [
                globals(),
                builtins(),
                nodeResolve({
                    jsnext: true,
                    main: true,
                    browser: true
                }),
                commonjs({
                    include: 'node_modules/**',
                }),
            ],
            format: 'iife',
            sourceMap: 'inline'
        }
    })
};

tests/MainTest.js

'use strict';

import * as mqtt from 'mqtt';

describe("Mqtt Client", function(){

    it("can establish a connection", function(done){
        let client = mqtt.connect('wss://iot.eclipse.org:443/ws');

        client.on('connect', function(){
            console.debug('connected');

            client.subscribe('TEST/MY_TOPIC');
            client.publish('TEST/MY_TOPIC', JSON.stringify({name:'John Doe', age: 42}));
        });

        client.on('packetreceive', function(packet){
            console.debug(packet);
        });

        client.on('packetsend', function(packet){
            console.debug(packet);
        });

        client.on('message', function(topic, payload){
            let decoded = JSON.parse(payload.toString());
            console.debug(payload.toString(), decoded);
            client.end();
        });

        client.on('close', function(){
            console.debug('connection closed');
            done();
        });

        client.on('error', function(){
            console.error('cannot connect');
        });

    });
});

[Samlilli]

@aedart Did you manage to resolve this? I think it has something to do with rollup-plugin-commonjs not resolving nested dependencies..

[aedart]

@Samlilli Sadly my solution is not that good.... I ended up transpiling the mqtt package for itself, using webpack and then I manually added a export default mqtt line, in the bottom of the "compiled" component. You can view the configuration that I used in https://github.com/aedart/js-mqtt

Also, not sure how familiar you are with karm, but you will find all of the rollup configuration inside the karma.conf.js

[Rich-Harris]

Please see https://gist.github.com/Rich-Harris/88c5fc2ac6dc941b22e7996af05d70ff – there's too much noise in the information given to start investigating. Thanks

[robianmcd]

I'm getting this error message with when I try to import a module called ag-grid-ng2. I'm using the following rollup config

let commonjs = require('rollup-plugin-commonjs');
let nodeResolve = require('rollup-plugin-node-resolve');

export default {
    entry: 'main.js',
    dest: 'bundle.js',
    format: 'iife',
    plugins: [
        nodeResolve({jsnext: true}),
        commonjs({
            include: ['node_modules/rxjs/**', 'node_modules/ag-grid-ng2/**'],
            namedExports: {
                'node_modules/ag-grid-ng2/main.js': ['AgGridModule']
            }
        })
    ]
};

and the following main.js

import {AgGridModule} from 'ag-grid-ng2/main';

console.log('imported ag grid', AgGridModule);

Here is a minimal app that reproduces the issue
ag-grid-app.zip

it's already build so to run it run npm start.
this will serve it on http://localhost:8080
Note the error message in the console Uncaught ReferenceError: require is not defined

To rebuild the app run

npm install
rollup -c rollup.config.js

I also created an issue on the ag-grid-ng2 repo as I am not sure where the issue lies https://github.com/ceolter/ag-grid-ng2/issues/112#issuecomment-270708588

[unional]

I have a repro. See: calvinmetcalf/rollup-plugin-node-builtins#24

[calvinmetcalf]

@unional 's issue seems to have to do with a prestep which turns typescript into commonjs

[calvinmetcalf]

@unional you probably want to use https://github.com/rollup/rollup-plugin-typescript

[unional]

Typescript to commonjs is done directly by the tsc compiler. The output should be correct. There is no problem consuming it from nodeJS and also webpack produce a bundle that works.

I can't use rollup-plugin-typescript because of some of its existing PR not merged. Do you know someone who maintain that project and can take a look to merge the PRs?

[calvinmetcalf]

rollup is designed for use with es6 modules, if you aren't using es6 modules you probably shouldn't use rollup

[Rich-Harris]

I'm going to close this as it seems to have gone off on a few tangents, and the repros mentioned don't follow these guidelines. Feel free to open a new issue with a minimal reproduction.