"build" command does not transpile output

[githubThrowaway999]

Running into an issue with testing with mocha, where the code in the build folder contains ES6 style imports and causes tests to fail with:

$ mocha --recursive --extension=js,cjs,mjs,jsx -r @babel/register -r jsdom-global/register -r ignore-styles 'src/**/*.test.jsx'

/home/user/my-repo/node_modules/react-esri-leaflet/build/index.js:1
import EsriLeafletLayer from './EsriLeafletLayer';
^^^^^^

SyntaxError: Cannot use import statement outside a module

After cloning react-esri-leaflet and messing around with it, I found that adding --extensions \".tsx\" to transpile:main and using the build generated by that command allows the tests to function.

Is it intended that the code in the build folder contains non-transpiled output?

[slutske22]

No that was not intended, I intended for the build of this plugin to end up in es5. I think you're right, my tsconfig is not targeting .tsx files properly. I will take a look at this when I get a chance. I'd rather add the change to the tsconfig rather than in the npm script. Good catch!

Are you sure the change was to transpile:main? That is an artifact script that's not even being used anymore, as far as I can remember...what version of react-esri-leaflet are you using? I guess that script technically still works, but it does not run the build with any .d.ts files.

Also, if this is just a testing issue (react-esri-leaflet works in your app but not in tests), you can check out how to enable es6 in your mocha tests in the meantime. It may take me some time before being able to get this building properly with es5 and republished.

[githubThrowaway999]

I'm using 1.1.0. You're right in that transpile:main is not being used; I was just trying to see if I could get my tests running at all, and ended up modifying that command and copying the output build folder into my project's node_modules. Will check out your link as well. Thanks for the quick response!

[slutske22]

Ok I fixed it. I changed the tsconfig to use module: 'commonjs', which compiles the source code down to commonjs, which uses require instead of import. It didn't change the function of the library at all, but now it should be more compatible en environments that don't natively support es6 syntax, like mocha. Upgrade your react-esri-leaflet, should be up to 1.2.0 now, and see if that works for you.