Somewhere between version 5.10 & 5.11 dist files lost .js extension

[rosea1]

you will have automatic file name resolution issues with different bundlers if you drop the .js extension on the dist files when importing / exporting.

[danielbarion]

Hi @rosea1, can you provide some examples of the issue happening, please? With the examples, we can investigate to be sure that the dist files will work for all situations.
Thanks!

[rosea1]

Hi @danielbarion i unfortunately dont have time to set up an example however i can explain what i did.
I have one code repository which is a react component library and is built using Rollup with the following configuration;

import babel from '@rollup/plugin-babel';
import commonjs from '@rollup/plugin-commonjs';

const input = 'src/index.js'

var MODE = [
  {
    format: 'cjs'
  },
  {
    format: 'esm'
  },
  {
    format: 'umd'
  }
]

var config = []

MODE.map((m) => {
  var conf = {
    input: input,
    output: {
      name: "XXX",
      file: `dist/index.${m.format}.js`,
      format: m.format,
      exports: "auto",
      interop: "default"
    },
    external: ["react", "react-dom", "@react-spring/web", "@juggle/resize-observer", "styled-components", /@babel\/runtime/],
    plugins: [
      // these are babel comfigurations
      babel({
          exclude: 'node_modules/**',
          plugins: ['@babel/transform-runtime', 'babel-plugin-styled-components'],
          babelHelpers: 'runtime'
      })
    ]
  }
  config.push(conf)
})

export default [
  ...config,
]

In the repository i created a "wrapper" tooltip using styled-components like so;

import styled from './styled-components';
import 'react-tooltip/dist/react-tooltip.css';
import {Tooltip as RTooltip}from 'react-tooltip';

const Tooltip = styled(RTooltip)`
  background: #FFFFFF;
  z-index: 9999;
  opacity: 1;
  color: #333333;
  border-radius: 8px;
  filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.12));
  font-size: 12px;
  font-weight: 500;
`;

export default Tooltip;

The component library then gets built with the rollup command into CJS format.
After building the component library it gets published to NPM repo and then imported into several of my other codebases to use the components. "react-tooltip" is now a peerDependancy of this component library, it isnt bundled into the final file but expected to be installed by the other projects using this library.

The other repository (built with create-react-app) imports this Tooltip component to use. Problem is that the import of react-tooltip fails, or moreover isnt giving expected results - RToolip is undefined;

i used;
import * as Test from 'react-tooltip'
and console.log(Test) which yielded something like this;
{default: 'path/to/react-tooltip/dist/react-tooltip.HASH.cjs' (cant remember the exact error)

Anyway i kept reverting versions until i found one with the .js extension (v.10) and it just worked so i put it down to this.
Apologies to be quick to blame your code, it could well of course be my particular setup, environment.

[gabrieljablonski]

I won't rule out that this might be happening because maybe we use some non-standard build options, but I believe this is definitely fixable by tweaking your own build config.

If you ever get the time to create a minimal project reproducing this issue, we'll definitely check it out. Until then, unfortunately there's not much we can help with.

[rosea1]

What was the reasoning for removing the .js file extension though ? i cant see any reason why you would want to do that. Not many other packages do this?

[gabrieljablonski]

It was done in #984, and I'm not sure if there was a specific reason. @danielbarion or @GerkinDev can probably shed some light on this.

[danielbarion]

As far as I remember, the community suggested using specific extensions for each file type.

@rosea1 please let us know your thoughts about this.

[GerkinDev]

Using .js is ambiguous about if the parser should be in ESM or CJS mode, and caused many problems with the increasing adoption of ESM among tooling & the community. But I don't get what is wrong in your messages without the exact error

[danielbarion]

I'm waiting for your point of view about the topic @rosea1

[gabrieljablonski]

Closing this since no response from OP.

Feel free to reopen with more info so we can discuss it.