How to configure Rollup to React application?

Question

Trying to integrate rollup on my ASP.NET Core 2.0 React application based on default template (with TypeScript).

I am trying "rollup -c" and it shows this error

[!] Error: 'toASCII' is not exported by node_modules\punycode\punycode.js
https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module
node_modules\rollup-plugin-node-builtins\src\es6\url.js (23:8) 21: 22:
23: import {toASCII} from 'punycode';
24: import {isObject,isString,isNullOrUndefined,isNull} from 'util';
25: import {parse as qsParse,stringify as qsStringify} from 'querystring';

rollup.config.js

import typescript from 'rollup-plugin-typescript2';
import lessModules from 'rollup-plugin-less-modules';
import resolve from 'rollup-plugin-node-resolve';
import nodeResolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import json from 'rollup-plugin-json';
import builtins from 'rollup-plugin-node-builtins';
import globals from 'rollup-plugin-node-globals';

export default {

    plugins: [
        typescript(),
        resolve(),
        nodeResolve({
            jsnext: true,
            main: true,
            browser: true
        }),
        commonjs({
            include: [
                'node_modules/**'
            ],
            exclude: [
                'node_modules/process-es6/**'
            ],
            namedExports: {
                'node_modules/react/react.js': ['Children', 'Component', 'PropTypes', 'createElement'],
                'node_modules/react-dom/index.js': ['render']
            }
        }),
        builtins(),
        globals(),
        json(),
        lessModules({output: true})
    ],
    input: './ClientApp/boot.tsx',
    output: {
        file: './wwwroot/dist/bundle.js',
        format: 'iife'
    },
    external: [
        'React',
        'ReactDOM',
        'reactRouterDom'
    ],
    sourceMap: true
}

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "module": "es2015",
    "moduleResolution": "node",
    "target": "es6",
    "jsx": "react",
    "sourceMap": true,
    "skipDefaultLibCheck": true,
    "strict": true
  },
  "exclude": [
      "bin",
      "node_modules"
  ]
}

package.json

{
  "name": "WebApplication",
  "private": true,
  "version": "0.0.0",
  "devDependencies": {
    "@types/history": "4.6.0",
    "@types/react": "15.0.35",
    "@types/react-dom": "15.5.1",
    "@types/react-router": "4.0.12",
    "@types/react-router-dom": "4.0.5",
    "@types/rollup": "0.51.3",
    "event-source-polyfill": "0.0.9",
    "isomorphic-fetch": "2.2.1",
    "react": "15.6.1",
    "react-dom": "15.6.1",
    "react-router-dom": "4.1.1",
    "typescript": "2.4.1",
    "rollup-plugin-typescript2": "0.9.0",
    "rollup": "0.53.3",
    "rollup-plugin-less-modules": "0.1.1",
    "rollup-plugin-node-resolve": "3.0.0",
    "rollup-plugin-commonjs": "8.2.6",
    "rollup-plugin-json": "2.3.0",
    "rollup-plugin-node-builtins": "2.1.2",
    "rollup-plugin-node-globals": "1.1.0"
  }
}

I tried to install punycode.js manually in package.json, but it did not help.

Már Örlygsson Már Örlygsson · Accepted Answer · 2018-05-17T00:35:32

This smells like a bug with rollup-plugin-node-builtins, and this issue seems almost identical to yours: https://github.com/calvinmetcalf/rollup-plugin-node-builtins/issues/38

How to configure Rollup to React application?

1 Answers