How to learn webstorm to recognize dynamic import of Node.js modules
Hi,
I import module like this:
import buildConfig from '@zicket/configuration'
file @zicket/configuration/index.js contains code:
Object.defineProperty(exports, '__esModule', {
value: true
})
if (process.env.NODE_ENV === 'production') {
Object.assign(exports, require('./dist'))
} else {
Object.assign(exports, require('./src'))
}
so if it's production environment, load module from 'dist' folder and load module from 'src' folder for local environment
Code works properly, but WebStorm can't recognize imported module, autocomplete and highlighting don't work
Is there way to explain to WebStorm that it should find module in 'src' folder, but without changing of file structure (it's pretty big project, and a lot of modules are working that way).
I've tried to mark 'dist' folder as excluded and 'src' folder as source root, but it didn't resolve my problem.
Thanks.
Please sign in to leave a comment.
Please can you elaborate on your project structure? What is @zicket/configuration - a module in project node_modules folder, or a folder in your project, or some alias to actual path in your project defined somewhere (in webpack config, etc.)?
Hi Elena,
it's module in node_modules folder, project structure:
package 1 (ticketing-crons on screenshot)
- /src/util/config.js (I do import here)
- /dist/util/config.js (same file, but compiled by babel)
- /node_modules (contains other modules, including package 2 )
package 2 (@zicket/configuration)
- /node_modules/@zicket/configuration/index.js
Object.defineProperty(exports, '__esModule', {
value: true
})
if (process.env.NODE_ENV === 'production') {
Object.assign(exports, require('./dist'))
} else {
Object.assign(exports, require('./src'))
}
- /node_modules/@zicket/configuration/src/index.js (here I do export of method buildConfig)
- /node_modules/@zicket/configuration/dist/index.js (same file, but translated by babel)
WebStorm can't recognize method buildConfig in the file /src/util/config.js
I've attached screenshot with file structure, hope it will help
Note (I'm not sure if it's important for WebStorm, but I'm trying to make everything clear):
In fact both packages are on the same folder level:
project_root/packages/configuration (@zicket/configuration)
project_root/packages/ticketing-crons
But package 'configuration' is used inside package 'ticketing-crons', we use lerna for this. Lerna copies whole package 'configuration' to node_modules folder of package 'ticketing-crons'. As result we got structure that I've described above.
You can try adding
to node_modules/@zicket/configuration/package.json - WebStorm will use src/index.js when resolving @zicket/configuration import
That works. Thank you!