Rollup Issue with React

[Buddierdl]

Quick, short summary:

I have a small React App that imports as follows:

import React from 'react'; import ReactDOM from 'react-dom';

This works just fine with the bundler. However, when I add one more import for a DatePicker component from npm:

import DatePicker from 'react-datepicker';

Now, it will no longer bundle but gives this error:

Bundling/transpiling failed with this error: 'findDOMNode' is not exported by ../../../node_modules/react-dom/index.js

This is really odd because the DatePicker doesn't even import findDOMNode. What can I do to fix this?

[Buddierdl]

I believe this has to do with needing the commonJS plugin for Rollup because of the way React does its exports.

[bdkjones]

CodeKit uses the rollup-common-js plugin, without any customizations for that plugin's options. If you can get it working using Rollup/Babel from the command line, let me know the configuration that you end up using.

[Buddierdl]

I got it to work. I need to be able to add the namedExport option to the commonjs plugin. Here is the rollup config I got to work:

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import replace from "@rollup/plugin-replace";
import babel from "rollup-plugin-babel";

export default {
  plugins: [
    babel({ exclude: 'node_modules/**' }),
    commonjs({
      namedExports: {
        'react-dom': ["findDOMNode"],
        'react': ["createElement", "Component"]
      }
    }),
    replace({
      "process.env.NODE_ENV": JSON.stringify("development")
    }), 
    resolve(), 
  ]
};

Can you add this option to CodeKit?

Also, as a side note, I used a hook to run rollup with these options and CodeKit shows an error even when rollup returns 0 because it writes its messages to stdErr.

The Hook "Hook #3" exited with code 0 and wrote this to StdErr:


/Users/ryan/Documents/Websites/bb_amberton/src/assets/scripts/edit-profile.js → dist/assets/scripts/edit-profile.js...
created dist/assets/scripts/edit-profile.js in 5s

[Buddierdl]

@bdkjones Just wondering if you've had a chance to look at this?

[bdkjones]

Thanks for looking into the issue! I'll have to build a UI to expose this option.

As for the error when running as a Hook: this is because idiot hipsters don't understand how to properly structure Unix programs. A non-zero exit code does not mean "I ran successfully, and here is some spam you don't care about." It means "I failed to run and anything else in the pipeline that was supposed to rely on me running correctly should abort."

Output like "I did this thing and it took 5 seconds" should go to STDOUT. That's what STDOUT is for.

The trouble is that CodeKit follows proper convention and OTHER tools would break if I altered the app so that output to STDERR was not treated as an error.

[bdkjones]

You might see if Rollup has some sort of "silent" option that could silence that spammy message. That would at least resolve the issue with the Hook reporting a false error.

[Buddierdl]

@bdkjones Have you had any chance to look at implementing this in the UI?

[bdkjones]

Not yet; but it’s still on my list!

On 20 Mar 2020, at 10:47, Buddierdl [email protected] wrote:

@bdkjones https://github.com/bdkjones Have you had any chance to look at implementing this in the UI?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/bdkjones/CodeKit/issues/576#issuecomment-601831552, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAHCGZQQEESCYG4YLCQS5T3RIOTZVANCNFSM4J6WXMQQ.