Nested Module Imports are not resolved in LWC (but work on-platform)

lukethacoder commented 1 year ago

Description

Steps to Reproduce

Folder Structure

.
└── modules/c/
    ├── app/
    │   ├── app.html
    │   ├── app.js
    │   └── app.js-meta.xml
    └── chartUtils/
        ├── controllers/
        │   ├── example_controller.js
        │   └── index.js
        ├── chartUtils.js
        └── chartUtils.js-meta.xml

chartUtils/chartUtils.js

export * from './controllers'

chartUtils/controllers/index.js

export { default as ExampleController } from './example_controller'

chartUtils/controllers/example_controller.js

export default class ExampleController2 {
  static id = 'example'
}

app/app.js

import { LightningElement } from 'lwc'
import { ExampleController } from 'c/chartUtils'

export default class App extends LightningElement {
  renderedCallback() {
    console.log('ExampleController ', ExampleController)
  }
}

Have tried a non-default export setup too but it still fails

Expected Results

Page to render without any issues and the module import to be resolved.

Actual Results

Error is thrown when attempting to load the page. Browser remains blank.

Running LWR at: http://localhost:3000 | mode: dev

[info] Watching: C:\PATH_TO_REPO\lwc-nested-import-bug\local\layouts\main.njk
[info] Watching: C:\PATH_TO_REPO\lwc-nested-import-bug\modules\c\app\app.js
[info] Watching: C:\PATH_TO_REPO\lwc-nested-import-bug\modules\c\app\app.html
[info] Watching: C:\PATH_TO_REPO\lwc-nested-import-bug\modules\c\chartUtils\chartUtils.js
Error: Unable to find file "C:\PATH_TO_REPO\lwc-nested-import-bug\modules\c\chartUtils\example_controller"

    at resolveFileExtension (file:///PATH_TO_REPO/lwc-nested-import-bug/node_modules/.pnpm/@lwrjs+shared-utils@0.9.4_@locker+compiler@0.18.14_chokidar@3.5.3_esbuild@0.9.7_rollup@2.45.2/node_modules/@lwrjs/shared-utils/build/es/fs.js:53:15)

    at LwcModuleProvider.createModuleEntry (file:///PATH_TO_REPO/lwc-nested-import-bug/node_modules/.pnpm/@lwrjs+lwc-module-provider@0.9.4_@babel+core@7.21.8_@locker+compiler@0.18.14_chokidar@3.5.3_esbuild@0.9.7_rollup@2.45.2/node_modules/@lwrjs/lwc-module-provider/build/es/index.js:209:24)

    at file:///PATH_TO_REPO/lwc-nested-import-bug/node_modules/.pnpm/@lwrjs+lwc-module-provider@0.9.4_@babel+core@7.21.8_@locker+compiler@0.18.14_chokidar@3.5.3_esbuild@0.9.7_rollup@2.45.2/node_modules/@lwrjs/lwc-module-provider/build/es/index.js:145:25

    at InflightTasks.execute (file:///PATH_TO_REPO/lwc-nested-import-bug/node_modules/.pnpm/@lwrjs+shared-utils@0.9.4_@locker+compiler@0.18.14_chokidar@3.5.3_esbuild@0.9.7_rollup@2.45.2/node_modules/@lwrjs/shared-utils/build/es/tasks.js:83:23)

    at LwcModuleProvider.getModuleEntry (file:///PATH_TO_REPO/lwc-nested-import-bug/node_modules/.pnpm/@lwrjs+lwc-module-provider@0.9.4_@babel+core@7.21.8_@locker+compiler@0.18.14_chokidar@3.5.3_esbuild@0.9.7_rollup@2.45.2/node_modules/@lwrjs/lwc-module-provider/build/es/index.js:144:48)

    at LwrModuleRegistry.delegateGetModuleEntryOnServices (file:///PATH_TO_REPO/lwc-nested-import-bug/node_modules/.pnpm/@lwrjs+module-registry@0.9.4_chokidar@3.5.3_esbuild@0.9.7/node_modules/@lwrjs/module-registry/build/es/index.js:226:43)

    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

    at async resolveRelativeImport (file:///PATH_TO_REPO/lwc-nested-import-bug/node_modules/.pnpm/@lwrjs+module-registry@0.9.4_chokidar@3.5.3_esbuild@0.9.7/node_modules/@lwrjs/module-registry/build/es/module-record.js:20:35)

    at async getModuleRecord (file:///PATH_TO_REPO/lwc-nested-import-bug/node_modules/.pnpm/@lwrjs+module-registry@0.9.4_chokidar@3.5.3_esbuild@0.9.7/node_modules/@lwrjs/module-registry/build/es/module-record.js:75:44)

    at async LwrModuleRegistry.createModuleDefinition (file:///PATH_TO_REPO/lwc-nested-import-bug/node_modules/.pnpm/@lwrjs+module-registry@0.9.4_chokidar@3.5.3_esbuild@0.9.7/node_modules/@lwrjs/module-registry/build/es/index.js:116:30)

[info] Watching: C:\PATH_TO_REPO\lwc-nested-import-bug\modules\c\chartUtils\controllers\index.js

Browsers Affected

non-browser issue?

Version

LWC: 2.45.2
LWR: 0.9.4
Node: 18.15.0

Possible Solution

Looks like some magic hidden behind one of the @lwrjs/* packages?

Additional context/Screenshots Add any other context about the problem here. If applicable, add screenshots to help explain.

nolanlawson commented 1 year ago

Thanks for filing! I've successfully repro'ed. FWIW this also seems to fail with a .js added to the import:

export { default as ExampleController } from './example_controller.js'

kmbauer commented 1 year ago

@lukethacoder Sorry this is currently not supported by the LWR-JS runtime. We can only resolve references relative to the root of the component.

lukethacoder commented 1 year ago

Curious to know what the difference is between the on-platform runtime and the LWR-JS runtime? I would have thought they would be (mostly) aligned?

kmbauer commented 1 year ago

Thank you for looking into this and providing such a clear reproducible scenario.

The goal is to have the off-core runtime to be able to run the same components as on-core as much as possible. However, the off-core runtime is a separate node-based run time and this is one of the gaps that exist between this implementation and the on-core Java runtime.

I will file a bug to track but I cannot say how quickly we would be able to add this behavior.

salesforce / lwc