Antd 4.0+ support

[cadabrum]

I've installed plugin:

"antd": "^4.0.0-rc.0",
"babel-plugin-import": "^1.13.0",

and added this part to babelrc plugin section:

    [
      "import",
      {
        "libraryName": "antd",
        "style": true // or 'css'
      }
    ]

The bundle size is increased by 1mb.

[afc163]

  {
    "libraryName": "antd",
+   "libraryDirectory": "es",
    "style": true
  },

[chemicalkosek]

Adding "libraryDirectory": "es" gives me the following error:

[ error ] /home/maciek/Dokumenty/websites/bookingapp/frontend/node_modules/antd/es/notification/index.js:3
import * as React from 'react';
       ^

SyntaxError: Unexpected token *
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.antd/es/notification (/home/maciek/Dokumenty/websites/bookingapp/frontend/.next/server/static/development/pages/_app.js:10975:18)
    at __webpack_require__ (/home/maciek/Dokumenty/websites/bookingapp/frontend/.next/server/static/development/pages/_app.js:23:31)
    at Module../lib/withData.js (/home/maciek/Dokumenty/websites/bookingapp/frontend/.next/server/static/development/pages/_app.js:8200:78)
    at __webpack_require__ (/home/maciek/Dokumenty/websites/bookingapp/frontend/.next/server/static/development/pages/_app.js:23:31)
    at Module../pages/_app.js (/home/maciek/Dokumenty/websites/bookingapp/frontend/.next/server/static/development/pages/_app.js:10614:71)
    at __webpack_require__ (/home/maciek/Dokumenty/websites/bookingapp/frontend/.next/server/static/development/pages/_app.js:23:31)
    at Object.0 (/home/maciek/Dokumenty/websites/bookingapp/frontend/.next/server/static/development/pages/_app.js:10754:18)
    at __webpack_require__ (/home/maciek/Dokumenty/websites/bookingapp/frontend/.next/server/static/development/pages/_app.js:23:31)
    at /home/maciek/Dokumenty/websites/bookingapp/frontend/.next/server/static/development/pages/_app.js:91:18

I'm using Next.Js if it matters

[dgreene1]

@afc163 if the solution is to add the library pass the config (as mentioned in #402 (comment)) I think we should add that to the readme. If you agree, please reopen this ticket and I will PR the readme to include the additional explanation.

But in order to write that explanation, I would need to understand why the es directory is more helpful than the lib directory?

[vjpr]

@dgreene1 The es directory uses import. The lib dir is transpiled to es2015 (no import).

CRA seems to transpile the imports. (This seems odd so I am going to dig into the CRA's webpack config to see how this is actually happening.)

However, Jest does not and will throw an error like this.:

/node_modules/antd/es/row/style/index.js:1
    import '../../style/index.less'; // style dependencies
    ^^^^^^
SyntaxError: Cannot use import statement outside a module

...which would require us to configure babel-jest to include this dir in transpilation.

[dgreene1]

which would require us to configure babel-jest to include this dir in transpilation.

@vjpr can you describe the babel-best configuration part more so future readers can understand how to get around this error?

[vjpr]

@dgreene1 Working on the fix now - will report back when I figure it out. Looks like this is the solution:

https://jestjs.io/docs/en/configuration.html#transformignorepatterns-arraystring

Sometimes it happens (especially in React Native or TypeScript projects) that 3rd party modules are published as untranspiled. Since all files inside node_modules are not transformed by default, Jest will not understand the code in these modules, resulting in syntax errors. To overcome this, you may use transformIgnorePatterns to allow transpiling such modules. You'll find a good example of this use case in React Native Guide.

[vjpr]

• Use moduleNameMapper for css and less.
• Don't use antd/es imports when using Jest - its too difficult to transpile the antd code. Use the babel-plugin-import but disable it for Jest runs.

@chemicalkosek's issue was that they are using next and the es modules are not being transpiled by the webpack config.

[miguelc1221]

@vjpr disabling babel-plugin-import in tests seemed to fix it for me. I was using craco-antd which comes with babel-plugin-import and craco-less configured but no way to disabled babel-plugin-import. So i uninstalled craco-antd and installed craco-less and babel-plugin-import and disabled the plugin for tests.