Tests failing when using component

[razzeee]

Description

Hey there,

I've started to use this component, but our tests start to stall due to this. When I run them locally I get this log.

Node.js v20.10.0
node:internal/modules/esm/utils:180
    throw new ERR_VM_DYNAMIC_IMPORT_CALLBACK_MISSING_FLAG();
          ^

TypeError: A dynamic import callback was invoked without --experimental-vm-modules
    at importModuleDynamicallyCallback (node:internal/modules/esm/utils:180:11)
    at getGlobalUse (/home/me/dev/project/project/node_modules/@kbox-labs/react-echarts/src/use-echarts.ts:22:15)
    at startEcharts (/home/me/dev/project/project/node_modules/@kbox-labs/react-echarts/src/use-echarts.ts:158:35)
    at setContainerRef (/home/me/dev/project/project/node_modules/@kbox-labs/react-echarts/src/use-echarts.ts:149:32)
    at commitAttachRef (/home/me/dev/project/project/node_modules/react-dom/cjs/react-dom.development.js:23689:18)
    at commitLayoutEffectOnFiber (/home/me/dev/project/project/node_modules/react-dom/cjs/react-dom.development.js:23542:9)
    at commitLayoutMountEffects_complete (/home/me/dev/project/project/node_modules/react-dom/cjs/react-dom.development.js:24727:9)
    at commitLayoutEffects_begin (/home/me/dev/project/project/node_modules/react-dom/cjs/react-dom.development.js:24713:7)
    at commitLayoutEffects (/home/me/dev/project/project/node_modules/react-dom/cjs/react-dom.development.js:24651:3)
    at commitRootImpl (/home/me/dev/project/project/node_modules/react-dom/cjs/react-dom.development.js:26862:5)
    at commitRoot (/home/me/dev/project/project/node_modules/react-dom/cjs/react-dom.development.js:26721:5)
    at finishConcurrentRender (/home/me/dev/project/project/node_modules/react-dom/cjs/react-dom.development.js:26020:9)
    at performConcurrentWorkOnRoot (/home/me/dev/project/project/node_modules/react-dom/cjs/react-dom.development.js:25848:7)
    at flushActQueue (/home/me/dev/project/project/node_modules/react/cjs/react.development.js:2667:24)
    at act (/home/me/dev/project/project/node_modules/react/cjs/react.development.js:2582:11)
    at /home/me/dev/project/project/node_modules/@testing-library/react/dist/act-compat.js:47:25
    at renderRoot (/home/me/dev/project/project/node_modules/@testing-library/react/dist/pure.js:180:26)
    at render (/home/me/dev/project/project/node_modules/@testing-library/react/dist/pure.js:271:10)
    at customRender (/home/me/dev/project/project/node_modules/@redwoodjs/testing/dist/web/customRender.js:14:29)
    at /home/me/dev/project/project/web/src/components/OverviewLineChart/OverviewLineChart.test.tsx:71:23
    at Object.<anonymous> (/home/me/dev/project/project/node_modules/expect/build/toThrowMatchers.js:74:11)
    at Object.throwingMatcher [as toThrow] (/home/me/dev/project/project/node_modules/expect/build/index.js:320:21)
    at Object.<anonymous> (/home/me/dev/project/project/web/src/components/OverviewLineChart/OverviewLineChart.test.tsx:72:12)
    at Promise.then.completed (/home/me/dev/project/project/node_modules/jest-circus/build/utils.js:298:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (/home/me/dev/project/project/node_modules/jest-circus/build/utils.js:231:10)
    at _callCircusTest (/home/me/dev/project/project/node_modules/jest-circus/build/run.js:316:40)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at _runTest (/home/me/dev/project/project/node_modules/jest-circus/build/run.js:252:3)
    at _runTestsForDescribeBlock (/home/me/dev/project/project/node_modules/jest-circus/build/run.js:126:9)
    at _runTestsForDescribeBlock (/home/me/dev/project/project/node_modules/jest-circus/build/run.js:121:9)
    at run (/home/me/dev/project/project/node_modules/jest-circus/build/run.js:71:3)
    at runAndTransformResultsToJestFormat (/home/me/dev/project/project/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
    at jestAdapter (/home/me/dev/project/project/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
    at runTestInternal (/home/me/dev/project/project/node_modules/jest-runner/build/runTest.js:367:16)
    at runTest (/home/me/dev/project/project/node_modules/jest-runner/build/runTest.js:444:34)
    at Object.worker (/home/me/dev/project/project/node_modules/jest-runner/build/testWorker.js:106:12) {
  code: 'ERR_VM_DYNAMIC_IMPORT_CALLBACK_MISSING_FLAG'
}

Link to Reproduction

Not aware that stackblitz can do tests

Steps to reproduce

1. Run a jest test on a component including ECharts

JS Framework

TS

Version

1.2.0

Browser

None

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[hugocxl]

@razzeee hi there. We're using dynamic imports to avoid loading the full EChars lib (and allow import customisation via "use" prop).

Your environment must support dynamic imports indeed or the lib won't work.

[razzeee]

I guess https://redwoodjs.com/ doesn't do that with vite then

[hugocxl]

Vite surely supports dynamic imports. I recommend you check Vitest, it's built on top of Vite and keep the same API as Jest.

[razzeee]

Tried it in a different project, seems like next.js (pages folder) also doesn't like it, but this time at page rendering at dev time.

[hugocxl]

Commented on #15