CJS + ESM Question/discussion about react-fast-compare HOT 6 CLOSED

Usually the commonjs module in Rollup should be placed pretty early in the pipeline, like after resolve, so it may be as simple as that in this case.

from react-fast-compare.

I can confirm, putting the commonjs plugin before the babel plugin solved this. Not certain why that didn't work yesterday during my testing, but glad it's working today... ship it, amiright?

from react-fast-compare.

to answer the original question, our goal is to keep react-fast-compare small and minimal, and to only provide a commonjs dist.

hopefully for your case we can find the proper configuration for @rollup/plugin-commonjs. To echo @kitten, in their docs they have this note, which explicitly uses @rollup/plugin-commonjs directly after @rollup/plugin-node-resolve:

plugins: [resolve(), commonjs()]

(happy to keep discussing in this issue, but i will also close it, as we have no ESM plans)

from react-fast-compare.

Can you provide a small reproduction via a minimal repository for us to install and build? I was under the impression rollup can handle CJS deps with a plugin or something? Thanks!

from react-fast-compare.

Yeah, that was my impression as well. I believe it has to do with the import in a node_module pulling in another node module. It may be that rollup only goes so far `shrug

I ended up rebuilding the entire rollup js file (to ensure all packages were up to date) and ended up with this list of plugins:

const plugins = [
  replace({
    'process.env.NODE_ENV': JSON.stringify(
      process.env.NODE_ENV || 'production'
    ),
  }),
  resolve(),
  svgr(),
  json(),
  url(),
  postcss({
    extract: true,
    plugins: [
      simplevars(),
      nested(),
      autoprefixer(),
      cssnext({ warnForDuplicates: false }),
    ],
  }),
  babel({
    babelHelpers: 'bundled',
    exclude: 'node_modules/**',
  }),
  peerDepsExternal({
    includeDependencies: true,
  }),
  commonjs({
    include: /node_modules/,
  }),
  autoNamedExports(),
  isProduction && terser(),
];

I'll work on a small reproduction, but will not be near my computer to do so (after today) until next Monday, so there may be a slight delay here.

I also added a discussion over in the Popper Spectrum chat to (hopefully) get insight from them: https://spectrum.chat/popper-js/react-popper/getting-error-when-using-rollup-due-to-import-without-default~45c053ae-4442-4502-9f07-8f970aa41649

from react-fast-compare.

Thanks so much for the assistance and answering the question! I'll be diving into this more and hope the suggestions mentioned work!

from react-fast-compare.