Formik: Getting SyntaxError: Unexpected identifier

[deeksha-agarwal]

🐛 Bug report

Current Behavior

When I am building on my server, I am getting this error

/var/www/lite-2/valkyrie/node_modules/lodash-es/clone.js:1
(function (exports, require, module, __filename, __dirname) { import baseClone from './_baseClone.js';
                                                                     ^^^^^^^^^

SyntaxError: Unexpected identifier
    at new Script (vm.js:80:7)
    at createScript (vm.js:274:10)
    at Object.runInThisContext (vm.js:326:10)
    at Module._compile (internal/modules/cjs/loader.js:664:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
/var/www/lite-2/valkyrie/node_modules/lodash-es/clone.js:1
(function (exports, require, module, __filename, __dirname) { import baseClone from './_baseClone.js';

Upon looking I found that formik is the only npm module, that is using lodash-es behind the scene.

Expected behavior

The build should go seamless.

Reproducible example

Suggested solution(s)

By using lodash instead of lodash-es

Additional context

Your environment

| Software | Version(s) |
| ---------------- | ---------- |
| Formik | 1.5.8
| React | 16.8.1
| TypeScript | na
| Browser | na
| npm/Yarn | 6.4.1/1.17.3
| Operating System | Ubuntu 14.04.5 LTS

[Shaun2D2]

@deeksha-agarwal just curious why this issue was closed. Do you know why Formik is using lodash-es at all? It seems like we should be able to get away with just using lodash... I'm running into a situation where i'm importing both lodash (for my project) and then another copy of lodash-es so I get double the size.

would be happy to dive in and see if I can submit a PR to remove it and just use core lodash.

cc: @jaredpalmer

[nikitaindik]

+1. We also have lodash and lodash-es in our bundle because Formik pulls in both of them.

[Shaun2D2]

@nikitaindik I did some digging on this and I see where it got added in. I believe this was to allow for individual imports of the lodash functions instead of the entire package. I think since this is no longer needed and can be pulled in from the main lodash package.

see commit: https://github.com/jaredpalmer/formik/commit/3588f4ae641b4a794d6e7d071ab81a2b86efc537

I searched the entire project and found no references to 'lodash-es' at all so curious why it is even getting bundled into the package, maybe a typescript thing. Typically Webpack (which I am familiar with) would have avoided bundling this up at all since it is not being used. I'll submit a PR and see if we can get this fixed.

[nikitaindik]

@Shaun2D2 Thanks for looking into it! I am also curious why lodash-es gets included. Please share your findings once you understand what's going on.

[Shaun2D2]

@nikitaindik after doing some research on this, it appears Formik uses a TypeScript development tool called tsdx. This appears to reference lodash in their docs.

It looks like this tool requires the inclusion of lodash-es. This is supposed to be to avoiding bloating the bundle but I'm not sure this is actually getting accomplished based off our bundle analyzer results as both lodash and lodash-es were getting included into the Formik bundle.

Maybe I'm missing something here, @jaredpalmer may have some thoughts on this? Seem to specific to tsdx and not Formik so probably can't fix this here.