Giter Site home page Giter Site logo

ant-design-examples's People

Contributors

kiner-tang avatar madccc avatar miracles1919 avatar zombiej avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

ant-design-examples's Issues

antd 5.6.2中失效

将antd的版本升级到最新还是会展示出原始样式

2023-06-25.20.48.46.mov

"with-nextjs-inline-style" doesn't work when upgrade Next.js to 14.1

If upgrade Next.js to version 14.1
the "with-nextjs-inline-style" example crashed with:

 ⨯ /usr/source/test/antd/ant-design-examples/examples/with-nextjs-inline-style/node_modules/@ant-design/icons/es/components/Context.js:1
import { createContext } from 'react';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1178:20)
    at Module._compile (node:internal/modules/cjs/loader:1220:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at Module.require (node:internal/modules/cjs/loader:1143:19)
    at mod.require (/usr/source/test/antd/ant-design-examples/examples/with-nextjs-inline-style/node_modules/next/dist/server/require-hook.js:65:28)
    at require (node:internal/modules/cjs/helpers:119:18)
    at @ant-design/icons/es/components/Context (/usr/source/test/antd/ant-design-examples/examples/with-nextjs-inline-style/.next/server/pages/_app.js:87:18)
    at __webpack_require__ (/usr/source/test/antd/ant-design-examples/examples/with-nextjs-inline-style/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./node_modules/antd/es/config-provider/index.js:16:97)
    at ./node_modules/antd/es/config-provider/index.js (/usr/source/test/antd/ant-design-examples/examples/with-nextjs-inline-style/.next/server/vendor-chunks/antd.js:460:1)
    at __webpack_require__ (/usr/source/test/antd/ant-design-examples/examples/with-nextjs-inline-style/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///__barrel_optimize__?names=ConfigProvider!=!./node_modules/antd/es/index.js:5:74)

It all works with Next.js version 13.5.6

how to fetch data on server if add `use client` when use next.js app router

正如标题所问,当我使用 app router 时,我如果要使用类似Layout.Footer的子组件,就需要在页面添加use client,但是这时我该如何在服务端获取数据并完成 ssr ?

直接await fetch的话,在老版本 Next.js 上会造成客户端也产生请求并无限重发,在新版本 Next.js 上会报错:vercel/next.js#42180


As the title asks, when I use app router, I need to add use client to the page if I want to use a subcomponent like Layout.Footer, but then how do I get the data on the server side and complete the ssr?

Just await fetch will result in an infinite client request on older versions of Next.js and an error on newer versions of Next.js: vercel/next.js#42180

nextjs14 官方 demo,执行 build 后再 start,组件颜色缺失(全部是黑色)

在业务项目中发现问题,然后循着线索找到了这个官方 demo 仓库,发现官方仓库在我的环境下也有问题。

将官方仓库 clone 后,执行:

git clone https://github.com/ant-design/ant-design-examples
cd ant-design-examples/examples/with-nextjs-app-router-inline-style
pnpm i
pnpm dev  # dev 一切正常
pnpm build
pnpm start  # 所有组件黑色,见截图

image

组件样式重复打包问题

1、使用 Next.js 的 Pages Router
2、按需抽取

在两个不同的page同时引用了 button 组件 打包后发现 button 样式 被打包了两份

希望将公共的代码分离出来,避免重复打包

image

with-nextjs-app-router-inline-style: a <style> tag is rendered outside the <html> tag

On with-nextjs-app-router-inline-style example, next build produces index.html which contains two <style id="antd">...</style> tags, and one of the tags is located outside of <html>...</html>. Here is the whole output: https://gist.github.com/nekketsuuu/055300c118072ae16121490ce500f801

W3C's Markup Validation Service https://validator.w3.org/#validate_by_input shows a fatal error for this HTML.

スクリーンショット 2023-08-13 12 27 10

I suppose this may be a problem around StyledComponentsRegistry, but I don't know any details at the moment.

I used yarn v3 to install packages, and run yarn build && yarn start to examine index.html. My yarn.lock is here: https://gist.github.com/nekketsuuu/055300c118072ae16121490ce500f801.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.