Javascript module autocomplete support in Webstorm

Not sure I follow you... You can transpile your modules but include your es2015 modules sources in your npm package distribution to get completion working

Thanks for the reply, Elena. Can you give me an idea of what the package structure would look like for that? Would I have to change the name of the transpiled files so I could have both in the npm package?

like: foo.js and foo.transpiled.js?

Thanks!

You can put them in separate folders - like `src` and `build`; your can also use "esnext" property in your library package.json to specify the non-transpiled entry point of your app - see http://2ality.com/2017/06/pkg-esnext.html

Maybe I'm confused or did not state my question clearly enough.

On your suggestion my npm package now includes the es2015 code in a directory called 'es'. And I have the transpiled commonjs modules in the root of the package. I updated package.js with the line "esnext" : "./es/index.js".

In my project that uses the npm module I have created if I import from the commonjs modules Webstorm does not do propType autocompletion. If I import from the /es/ directory Webstorm will do autocompletion, but Jest fails.

Is this what you are suggesting to do? I though you were implying that I could import and use the commonjs transpiled code, but Webstorm would know to look at the es2015 code for propTypes. This does not seem to be the case.

Just to restate my goals:

• Webstorm propType auto completion from my npm module
• Jest tests to work (they are failing on es2015 syntax if I import from the 'es' directory)

As a (hopefully) temporary workaround I have added react-app-rewired to my project that uses the npm module I have created. Using its config overrides I have told jest to transpile my npm module in the node_modules directory before tests. This works, but I would like to avoid it if possible.

Thanks!

>In my project that uses the npm module I have created if I import from the commonjs modules Webstorm does not do propType autocompletion. If I import from the /es/ directory Webstorm will do autocompletion

well, this is expected... react apps are normally written using ES6 + JSX syntax, the IDE doesn't expect commonjs format here

> but Jest fails

this is strange, as Jest is widely used in React projects, and writing Jest tests in ES6+JSX is a common practice.. what's the problem to transpile your Jest tests like you do with your source modules? You don't even need installing babel - it comes with Jest, and jest uses it when running react specs (https://github.com/facebook/jest#using-babel)

First: Why would it be expected?? React apps use other node modules that are transpiled.

Second: Jest does not transpile node_modules directory.

The short answer is there is no way to achieve my goals.

Anyway, thanks...

 You can import your transpliled node_modules using ES6 syntax - this doesn't cause issues, Jest (and Webstorm) should be fine with it

Jest is not ok with non traspiled node_modules. https://github.com/facebook/create-react-app/issues/2537

ou can import your _transpliled_ node_modules using ES6 syntax, and Jest will be fine with it

Let me try this one last time

If I transpile my module so it can be used by jest Webstorm will no longer do propTypes autocompletion.. that, as I have stated no less than 3 times now, is the problem.

Please note that using create-react-app project, without ejecting, gives you no real access to the jest config. This is why i have used react-app-rewired as the workaround mentioned in my second post.

>If I transpile my module so it can be used by jest Webstorm will no longer do propTypes autocompletion.

Ok. It seems that it's a time to ask you for your library. as normally, if sources are included in distribution, completion should be there