Uncaught ReferenceError: Cannot access 'Iw' before initialization

[MYWpro]

Hello, when I used Cornerstone3d in vite and deployed it on the server, the page was blank and an error was reported. Why is this? I have no problem running locally.

[biu8bo]

I am using Vite and have had no problems in the development environment. However, after compiling and bundling the code, I encountered the same error in the same location as you did. When I switched to Webpack, the problem seemed to disappear. Moreover, this issue only occurs in 3D.

[biu8bo]

TMD I suspect both of them have issues - there may be some problems with the framework, and also some issues with Vite's bundling process.

[MYWpro]

I am using Vite and have had no problems in the development environment. However, after compiling and bundling the code, I encountered the same error in the same location as you did. When I switched to Webpack, the problem seemed to disappear. Moreover, this issue only occurs in 3D.

@2738644273 If using Webpack, can it run normally after deployment?

[biu8bo]

I am using Vite and have had no problems in the development environment. However, after compiling and bundling the code, I encountered the same error in the same location as you did. When I switched to Webpack, the problem seemed to disappear. Moreover, this issue only occurs in 3D.

@2738644273 If using Webpack, can it run normally after deployment?

yes ,you can try

[shunia]

If you're using vitejs, you have to import core and tools as seperated imports:

import * as Tools from '@cornerstonejs/tools';

to:

import { init as ToolInit, ToolGroupManager, addTool, PanTool, ZoomTool, WindowLevelTool } from '@cornerstonejs/tools';

It's kinda of a race condition when bundling.

[MYWpro]

If you're using vitejs, you have to import core and tools as seperated imports:

import * as Tools from '@cornerstonejs/tools';

to:

import { init as ToolInit, ToolGroupManager, addTool, PanTool, ZoomTool, WindowLevelTool } from '@cornerstonejs/tools';

It's kinda of a race condition when bundling.

I tried your method, but it still doesn't seem to work @shunia

[shunia]

@MYWpro try reduce your code base to minimize the impact from any other codes and iterate over to see where the problem exists.

[abustany]

I believe this is caused by circular dependencies, rollup doesn't support them when bundling. See #742 for more details, there's no proper fix I know of at this stage.

[abustany]

I needed a workaround before circular dependencies (hopefully) get fixed in the 2.0 release. Here's the stuff that I tried without success:

• make Rollup bundle the CJS build of cornerstone3D instead of the ESM (hoping its CJS handling would handle circular dependencies better)
• toy with various options of Rollup's CJS plugin

what worked for me in the end was to tell Rollup to build the UMD build of cornerstone3D/tools (core somehow bundles fine) for production builds. Here's the relevant vite.config.ts snippet:

  resolve: {
    alias: [
      ...(process.env.NODE_ENV === "production"
        ? [
            {
              // Rollup can't bundle @cornerstonejs/tools because of circular dependencies.
              //
              // See https://github.com/cornerstonejs/cornerstone3D/issues/742
              find: "@cornerstonejs/tools",
              replacement: "./node_modules/@cornerstonejs/tools/dist/umd/index.js",
            },
          ]
        : []),
    ]
  }

I suppose this is not optimal for tree shaking, but at this stage I'd rather add a few KBs to my bundle and get something working :shrug:

[JeffreyWW]

the same error with the code:

import {annotation, drawing, utilities} from '@cornerstonejs/tools'; const { drawHandles: drawHandlesSvg, } = drawing;

const {getAnnotations} = annotation.state;

const {triggerAnnotationRenderForViewportIds} = utilities; const {getCanvasEllipseCorners} = utilities.math.ellipse;

I fix it when I change it to:

import {annotation, drawing, utilities} from '@cornerstonejs/tools';

const drawHandlesSvg = drawing.drawHandles const getAnnotations = annotation.state.getAnnotations;

const triggerAnnotationRenderForViewportIds = utilities.triggerAnnotationRenderForViewportIds; const getCanvasEllipseCorners = utilities.math.ellipse.getCanvasEllipseCorners;

so if you are using Vite,don't use the {} to get the variable from the framework