0

I have a somewhat large complex LWC with source in a nested directory structure. In general this works as expected. I can deploy this component itself without any problem.

However, when I try to deploy a component which imports that component, I get an inexplicable failure to import files which are very much there:

Compilation Failure src/data/var/dataPriv.js:0,0 : LWC1011: Failed to resolve import "../Data.js" from "src/data/var/dataPriv.js". 
Please add "src/data/Data.js" file to the component folder.

However, src/data/Data.js is indeed present in the source tree. It's also shown in the output from deploying the first component:

libJquery/src/data/Data.js LightningComponentBundle  velo/main/default/lwc/libJquery/src/data/Data.js

My first guess was that the LWC compiler or module resolution did not like filenames starting with an upper-case letter, but even after I renamed the file to data.js and adjusted the imports, the problem persisted.

I am well aware of import syntax. This component has dozens of files and hundreds of import statements that all work fine but this one. Relevant portions of the actual code involved, where libQuery.js is the top-level JS file for the component:

libjQuery.js

import jQuery from './src/jQuery';

src/jQuery.js

...
import './data.js';
...

src/data.js

import dataPriv from './data/var/dataPriv.js';
import dataUser from './data/var/dataUser.js';

src/data/var/dataPriv.js

import Data from '../Data.js'; <=== ERROR REPORTED HERE

src/data/var/dataUser.js

import Data from '../Data.js';

src/data/Data.js

(no import statements)

Let me repeat that this error does not occur when deploying this component itself. If the component has missing files or invalid import statements, that is reported at the time of deploying the component. No such errors are reported when deploying the component. The error is reported when trying to deploy a different component which imports this one, using the import "c/libJquery"; syntax.

It may or may not be relevant that if I rename and/or delete irrelevant files, the file reported as failing to import changes.

Any clues or ideas about how to go about tracking down this error?

PS. Yes, this is an attempt to bring jQuery directly into the LWC world, as an alternative to using loadScript to bring it in, which according to my understanding will no longer work when the Secure Static Resources policy goes into force next year. The purpose of this question is not to elicit opinions on why or why not I might need jQuery in LWCs.

Improve this question
3
  • I feel you might be having incorrect syntax or using an incorrect way for import. Have you checked this? It's a similar problem. If this doesn't help, then I suggest you provide some code snippets (you may remove the logic inside the JS methods or confidential info).
    – arut
    Commented Oct 27, 2020 at 17:29
  • It appears that this problem is caused by the presence of multiple files with the same filename (in different subdirectories). Although I have not gone through the relevant source code in detail, it seems that this is a bug in the way that the module resolver manages its lists of known files. In any case, renaming the files so be unique across the entire tree succeeded in solving the problem. I use WSL, and for what it's worth, it seems that the filename matching logic used by the module resolver considers filenames in a case insensitive fashion, which if true is quite wrong.
    – kamezaburo
    Commented Oct 30, 2020 at 1:42
  • In further tests, it appears that the problem may occur not only when they are two or more files at different places in the file hierarchy with the same name, but also when a file shares its name (without the .js extension) with a directory name.
    – kamezaburo
    Commented Nov 2, 2020 at 23:24

0

Reset to default

You must log in to answer this question.

Browse other questions tagged .