Paratron / hookrouter

The flexible, and fast router for react that is entirely based on hooks

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Cannot get the distributed package to work with Rollup

MaxMotovilov opened this issue · comments

There is some odd conflict between the logic in @rollup/plugin-commonjs and the interop conventions adopted by the build script in hookrouter. Given Rollup configuration which is roughly this (including only the relevant parts):

import nodeResolve from '@rollup/plugin-node-resolve';
import extGlobals from 'rollup-plugin-external-globals';
import cjs from '@rollup/plugin-commonjs';

export default {
  input: { ... },
  output: {
    format: 'es',
    interop: 'auto',
    ...
  },
  external: ['react', 'react-dom', ...],
  plugins: [
    nodeResolve(...),
    cjs({
       include: 'node_modules/**'
    }),
    extGlobals({
      'react': 'React',
      'react-dom': 'ReactDOM',
      ...
    })
  ],
  ...
}

I am getting the following inexplicable error during the build:

[!] Error: Export 'React' is not defined (Note that you need plugins to import files that are not JavaScript)
react?commonjs-external (1:8)
1: export {default} from "react";
           ^
Error: Export 'React' is not defined (Note that you need plugins to import files that are not JavaScript)

I have verified that it is caused by a proxy chunk generated by @rollup/plugin-commonjs when processing modules in hookrouter. Experimenting with plugin settings, I discovered that setting esmExternals: true makes the error disappear only to result in improper access to the React exports (via global) during runtime. Clearly my combination (Rollup and externally loaded React script) conflicts with the code generated during hookrouter build.

Now, just as I suspected, the problem has a very simple solution -- feeding the hookrouter source code into Rollup. I had to use a git submodule and a bit of npm fakery to achieve that (package.json for hookrouter does not set module field, only main -- and that of course points to dist/ rather than src/). I would generally prefer to deal with source ES6++ library code when bundling with Rollup anyway, but thus far this is the first library that resolutely refused to build from distributed package.

My suggestion for the time being is to, perhaps, include the src/ directory in the package and set the module field in package.json to point to it.