Include package.json "module" field

[voxtex]

Similar to antd, I think it would make sense to include a "module" field in package.json along with a version of the build that uses ES2015 modules instead of only CommonJS. I was going through the code and I'm not quite clear what your actual build/deploy process is, but the fix should be as simple as:

Create another tsconfig (or use command line flags for tsc) to provide the following options (target ES2015 automatically sets module ES2015)

{ "extends": "./tsconfig.json", "compilerOptions": { "outDir": "./es", "target": "ES2015" } }

Update package.json to point to the new directory

{ "files": [ "lib", "es" ], "module": "./es/index.js" }

Now more advanced bundlers, such as webpack 2 and rollup, will use the module files and can properly tree shake dependencies. This is all my understanding of how this works so it may not be 100%.

[jannikbuschke]

I currently reading and experimenting about this topic (so far your suggestions seem to work and I will try to release a new preview version with this soon-ish).

My current understanding is this (I am maybe duplicating what you say, I just state it with my words to get a better understanding and may be corrected by whomever if I am wrong):

Compiling without explicitly stating a "target" (as it is now) transpiles the jsx/typescript code to some older ecma script standard (I think es3 https://www.typescriptlang.org/docs/handbook/compiler-options.html) which uses require() to import code:

With you suggestion newer js code is emitted and for example import { } from"" syntax is used:

Now we will ship this transpiled code twice (/lib folder will have es3 syntax, /es folder will have es2015/es6 syntax).

Specifying "module": "./es/index.js", "main": "./lib/index.js", in package.json will help bundlers to use/include the code they are using in the final app bundle (and not having "duplicates").

[jannikbuschke]

I released preview 6 with above changes.

Would like to get feedback or input on how to see if this really works.

[jannikbuschke]

@voxtex do you know how to check if tree-shaking properly works?

[voxtex]

Thanks for this, I did a bit of testing using webpack-bundle-analyzer. It looks like there is something broken with tree shaking named imports in Webpack 2, at least with create-react-app. I was able to work around it in 2 ways.

1. Import components directly import {FormItem} from "@jbuschke/formik-antd/es/Formitem"

2. Use babel-plugin-import, similar to antd, and configure it to automatically convert imports for you. Using customize-cra it looks like this

fixBabelImports("@jbuschke/formik-antd", { libraryDirectory: "es", camel2DashComponentName: false, transformToDefaultImport: false }),

Even though a workaround is required I think having the ES6 module version of the compiled library will future proof it. In the meantime it may be a good idea to include instructions in the readme because without these optimizations this library will bring in the entire ant design library which comes in at over 100KB gzipped, 250KB gzipped if all icons are included.

Antd has a bug where if one icon is imported ALL icons are imported. They have it on the roadmap to fix in the next major version release.

[herbertpimentel]

As I see this also may be a solution for a problem I am facing with jest. Jest looks to implement they own version of require or something like that, and when I am trying you use formik-antd it breaks in tests like so:

C:\Dev\app-web\node_modules\formik-antd\es\form\style\index.js:1
    import 'antd/lib/form/style';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module
        at compileFunction (<anonymous>)

    > 1 | import 'formik-antd/es/form/style';
        | ^
      2 | import 'formik-antd/es/input/style';
      3 | 
      4 | import React from 'react';

      at Runtime._execModule (node_modules/jest-runtime/build/index.js:1166:56)
      

MyComponent.tsx

import 'formik-antd/es/form/style';
import 'formik-antd/es/input/style';

import React from 'react';
/// ...