Generated package imports missing .js file extension

I’m submitting a…

• bug
• feature
• chore

What is the current behavior

Create a new project npx bug-demo create-next-app --ts --use-npm

Add react-financial-charts, and add a chart to the home page

Running the project npm start dev throws the following runtime error:

Error [ERR_MODULE_NOT_FOUND]: Cannot find module ‘.\node_modules@react-financial-charts\annotations\lib\Annotate’ imported from .\node_modules@react-financial-charts\annotations\lib\index.js

What is the expected behavior

Package imports should be built with .js

Please tell us about your environment

• node 16.13.1
• npm 8.2.0

  "name": "bug-demo",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "d3-format": "^3.1.0",
    "d3-time-format": "^4.1.0",
    "next": "12.0.7",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-financial-charts": "^1.3.2"
  },
  "devDependencies": {
    "@types/d3-format": "^3.0.1",
    "@types/d3-time-format": "^4.0.0",
    "@types/node": "16.11.12",
    "@types/react": "17.0.37",
    "eslint": "8.4.1",
    "eslint-config-next": "12.0.7",
    "typescript": "4.5.2"
  }
}

Other information

Personally, I feel like this is a Typescript issue, but they seem adamant that this is by design and the resolution should be to add .js file extensions to all imports: https://github.com/microsoft/TypeScript/issues/40878

[adamhwang]

@eberlitz I have a PR to fix the file extensions, but next still has issues with ESM modules and webpack 5 still had issues with how this is packaged and I was getting a bunch of Cannot read property 'isRequired' of undefined based on the PropTypes. I was finally able to get react-financial-charts to work with next 11 & 12 without any changes to the latest release (1.3.2) using the following next config compose:

const withTM = require('next-transpile-modules')([
    'd3-array',
    'd3-format',
    'd3-time',
    'd3-time-format',
    'react-financial-charts',
    '@react-financial-charts/annotations',
    '@react-financial-charts/axes',
    '@react-financial-charts/coordinates',
    '@react-financial-charts/core',
    '@react-financial-charts/indicators',
    '@react-financial-charts/interactive',
    '@react-financial-charts/scales',
    '@react-financial-charts/series',
    '@react-financial-charts/tooltip',
    '@react-financial-charts/utils',
]);

/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: true,
};

module.exports = withTM(nextConfig);

You can exclude the d3 stuff depending on if you’re using that or not.

[fasmat]

I’m also affected by this issue. I cannot build @react-financial-chart/* packages because of this issue.