igv.js v2.15.x import error

[jianaijun]

Hello everyone,

Using react, importing igv, version 2.13.x works fine, using version 2.15.x import fails.

import igv from "igv";

build failed:

> react-scripts build

Creating an optimized production build...
Failed to compile.

Attempted import error: 'igv' does not contain a default export (imported as 'igv').

[jrobinso]

Thanks for the report. I don't know much about react, but I guess we can say that igv.js v2.15.1 is not compatible with react. I don't understand how react resolves the raw import "igv", there are 2 files in node_modules/igv/dist, igv.esm.js which provides an ES6 default export of igv, and igv.js which provides a CJS export. Do you know how React resolves "igv"?

So for now stick with 2.13.x if you are building a React app. I will update this issue if I find a solution.

[jrobinso]

Apparently the React compiler, or more likely webpack, doesn't understand newer javascript syntax, in particular class field properties, but possibly others. These are widely supported in browsers, so I don't understand the React problem. No solution yet but that's what I'm seeing. Here's a related thread

webpack/webpack#10216

[jrobinso]

I got it to work, you might need to update your React version. igv.js 2.15.X uses a library that uses ES2020 features, in particular class fields and bigint literals. These are supported in all browsers, but not older versions of React. You can see a working example at https://github.com/igvteam/igv.js-react. The package.json used is below.

{
  "name": "igv.js-react",
  "version": "0.2.0",
  "private": true,
  "dependencies": {
    "igv": "2.15.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^5.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

[bradwbradw]

Head's up, you'll need to import like:

import igv from '../node_modules/igv/dist/igv.esm.js';

import igv from 'igv' fails even with react 18. Something is amiss in the package configuration

[jrobinso]

Likely something here. Feel free to suggest a fix.

  "main": "dist/igv.esm.js",
  "browser": "dist/igv.js",
  "module": "dist/igv.esm.js",
  "type": "module",

[jrobinso]

@bradwbradw In what context are you doing this import, "naked" imports are not supported in browsers, is this in the context of a react app?

[bradwbradw]

Yes, in a React app. I copied the working import statement from your example react app repo, which solved the issue. I'm using a bundler so it can access node_modules and compile the app.

…

On Fri, Apr 5, 2024 at 11:54 AM Jim Robinson ***@***.***> wrote: @bradwbradw <https://github.com/bradwbradw> In what context are you doing this import, "naked" imports are not supported in browsers, is this in the context of a react app? — Reply to this email directly, view it on GitHub <#1619 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABD7F5E3B3HTXG2MGIVTKILY33XPZAVCNFSM6AAAAAAWIXD2FWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDANBQGQ2DONJUHE> . You are receiving this because you were mentioned.Message ID: <igvteam/igv .***@***.***>