Next.js: with-ant-design Example is failing under React 16

[vzelenko]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Following the README.md instructions on cloning and running the app should result in a running app, compiled correctly.

Current Behavior

Running npm i && npm run dev:

1. Fails to build the app. Reason is, package.json specifies older react version but latest next.js
2. After upgrading react to 16, runtime error occurs due to missing "Transform Decorators Legacy" babel plugin.
3. After runningnpm install babel-plugin-transform-decorators-legacy the app loads without errors.

Steps to Reproduce (for bugs)

1. Clone the repo in a clean environment.
2. Run npm i && npm run dev
3. Update React dependencies, and repeat (2)
4. Open the browser to http://localhost:3000/

Context

Attempting to learn how to integrate ant design into next.js app.

Your Environment

| Tech | Version |
|---------|---------|
| next | 4.1.3 |
| node | 7.3.0 |
| OS | MacOS Sierra 10.12.6 |
| browser | Google Chrome |
| react | ^16.0.0 |
| react-dom | ^16.0.0 |

Suggested fix:

In package.json, use the following dependencies:

"dependencies": {
    "antd": "^2.10.2",
    "babel-plugin-import": "^1.1.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "next": "latest",
    "react": "^16.0.0",
    "react-dom": "^16.0.0"
  }

or, alternatively, fix next version. Note that with the above package.json, I see the following errors running npm list command:

npm ERR! peer dep missing: react@^0.14.0 || ^15.0.0-0, required by [email protected] npm ERR! peer dep missing: react@^0.14.0 || ^15.0.1, required by [email protected] npm ERR! peer dep missing: react-dom@^0.14.0 || ^15.0.0-0, required by [email protected] npm ERR! peer dep missing: react-dom@^0.14.0 || ^15.0.1, required by [email protected] npm ERR! peer dep missing: jquery@>=1.8.0, required by [email protected]

[alikhani]

Try upgrading antd?

[blabassi]

Just giving my two cents, antd v2.9.x is using react v15 however there's a version 3 in development (current version is: 3.0.0-alpha.19) which is using react v16. So beside upgrading to this version or downgrading to Next.js v3, I don't see another way to solve those errors.

[pruhstal]

I'm using next@4 and [email protected] with no issues.

[blabassi]

@pruhstal I'm not saying it's not working with next@4 and [email protected], I was just point at the error messages while installing the packages

[pruhstal]

@vzelenko:

Maybe try changing your babelrc to remove "transform-decorators-legacy"

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": false
      }
    ]
  ]
}

[vzelenko]

@pruhstal - your suggestion works (I like not having legacy deps), but not to fix the issue. The libraries that fail on deps are part of 'antd' package. Which means we would have to wait until they upgrade, as advised by @blabassi, or downgrade next.js & react to compatible version of react 15x.

[drnachio]

Version 3 of antd is released but it seems to be failing anyway.