search

ant-design / ant-design-mobile

Essential UI blocks for building mobile web apps.
https://mobile.ant.design
MIT License
11.66k stars 2.4k forks source link

next+antd-mobile #4327

Closed pangyutong closed 3 years ago

pangyutong commented 3 years ago

Version of antd-mobile

5.0.0-beta.23

Operating system and its version

Others

Browser and its version

chrome

Sandbox to reproduce

No response

What happened?

"next": "10.2.0", "next-pwa": "^5.2.23", "webpack": "^4.46.0", "react": "17.0.2", 安装2.x正常，升级5.0.0-beta.23之后import { Swiper } from 'antd-mobile'报错slider.css loader问题，不知道怎么解决

辛苦解答，感谢

Relevant log output

error - ./node_modules/antd-mobile/es/components/slider/slider.css
ModuleParseError: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

Code of Conduct

awmleer commented 3 years ago

参考下这篇文档哈：https://mobile.ant.design/zh/guide/ssr

image

pangyutong commented 3 years ago

已经按照文档书写：

module.exports = withTM(withImages(withPWA(withLess(withCss(

webpack如下: 

webpack: (config, { isServer }) => {
      if (isServer) {
        const antStyles = /antd\/.*?\/style.*?/
        const origExternals = [...config.externals]
        config.externals = [
          (context, request, callback) => {
            if (request.match(antStyles)) return callback()
            if (typeof origExternals[0] === 'function') {
              origExternals[0](context, request, callback)
            } else {
              callback()
            }
          },
          ...(typeof origExternals[0] === 'function' ? [] : origExternals),
        ]

        config.module.rules.unshift({
          test: antStyles,
          use: 'null-loader',
        })
      }
      return config
    },

报错如下：

Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.
See here for more info: https://nextjs.org/docs/messages/built-in-css-disabled

(node:24409) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'startsWith' of undefined
    at handleExternals (/Users/didi/Documents/xy_ui_v2/node_modules/next/dist/build/webpack-config.js:40:23)
    at webpackConfig.externals (/Users/didi/Documents/xy_ui_v2/node_modules/next/dist/build/webpack-config.js:82:149)
    at Array.<anonymous> (/Users/didi/Documents/xy_ui_v2/node_modules/next-transpile-modules/src/next-transpile-modules.js:157:44)
    at config.externals (/Users/didi/Documents/xy_ui_v2/next.config.js:70:31)
    at handleExternals (/Users/didi/Documents/xy_ui_v2/node_modules/next/dist/compiled/webpack/bundle4.js:78887:17)
    at next (/Users/didi/Documents/xy_ui_v2/node_modules/next/dist/compiled/webpack/bundle4.js:78875:9)
    at handleExternals (/Users/didi/Documents/xy_ui_v2/node_modules/next/dist/compiled/webpack/bundle4.js:78880:7)
    at /Users/didi/Documents/xy_ui_v2/node_modules/next/dist/compiled/webpack/bundle4.js:78910:5
    at /Users/didi/Documents/xy_ui_v2/node_modules/next/dist/compiled/webpack/bundle4.js:85665:5
    at AsyncSeriesWaterfallHook.eval [as callAsync] (eval at create (/Users/didi/Documents/xy_ui_v2/node_modules/next/dist/compiled/webpack/bundle4.js:128919:10), <anonymous>:6:1)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:24409) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 4)
(node:24409) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
(node:24409) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'startsWith' of undefined
    at handleExternals (/Users/didi/Documents/xy_ui_v2/node_modules/next/dist/build/webpack-config.js:40:23)
    at webpackConfig.externals (/Users/didi/Documents/xy_ui_v2/node_modules/next/dist/build/webpack-config.js:82:149)
    at Array.<anonymous> (/Users/didi/Documents/xy_ui_v2/node_modules/next-transpile-modules/src/next-transpile-modules.js:157:44)
    at config.externals (/Users/didi/Documents/xy_ui_v2/next.config.js:70:31)
    at handleExternals (/Users/didi/Documents/xy_ui_v2/node_modules/next/dist/compiled/webpack/bundle4.js:78887:17)
    at next (/Users/didi/Documents/xy_ui_v2/node_modules/next/dist/compiled/webpack/bundle4.js:78875:9)
    at handleExternals (/Users/didi/Documents/xy_ui_v2/node_modules/next/dist/compiled/webpack/bundle4.js:78880:7)
    at /Users/didi/Documents/xy_ui_v2/node_modules/next/dist/compiled/webpack/bundle4.js:78910:5
    at /Users/didi/Documents/xy_ui_v2/node_modules/next/dist/compiled/webpack/bundle4.js:85665:5
    at AsyncSeriesWaterfallHook.eval [as callAsync] (eval at create (/Users/didi/Documents/xy_ui_v2/node_modules/next/dist/compiled/webpack/bundle4.js:128919:10), <anonymous>:6:1)
(node:24409) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 5)
(node:24409) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'startsWith' of undefined
    at handleExternals (/Users/didi/Documents/xy_ui_v2/node_modules/next/dist/build/webpack-config.js:40:23)
    at webpackConfig.externals (/Users/didi/Documents/xy_ui_v2/node_modules/next/dist/build/webpack-config.js:82:149)
    at Array.<anonymous> (/Users/didi/Documents/xy_ui_v2/node_modules/next-transpile-modules/src/next-transpile-modules.js:157:44)
    at config.externals (/Users/didi/Documents/xy_ui_v2/next.config.js:70:31)
    at handleExternals (/Users/didi/Documents/xy_ui_v2/node_modules/next/dist/compiled/webpack/bundle4.js:78887:17)
    at next (/Users/didi/Documents/xy_ui_v2/node_modules/next/dist/compiled/webpack/bundle4.js:78875:9)
    at handleExternals (/Users/didi/Documents/xy_ui_v2/node_modules/next/dist/compiled/webpack/bundle4.js:78880:7)
    at /Users/didi/Documents/xy_ui_v2/node_modules/next/dist/compiled/webpack/bundle4.js:78910:5
    at /Users/didi/Documents/xy_ui_v2/node_modules/next/dist/compiled/webpack/bundle4.js:85665:5
    at AsyncSeriesWaterfallHook.eval [as callAsync] (eval at create (/Users/didi/Documents/xy_ui_v2/node_modules/next/dist/compiled/webpack/bundle4.js:128919:10), <anonymous>:6:1)
(node:24409) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 6)
info  - Using external babel configuration from /Users/didi/Documents/xy_ui_v2/.babelrc
awmleer commented 3 years ago

奇怪……

pangyutong commented 3 years ago

我使用v2版本正常能跑，然后尝试了一下迁移https://mobile.ant.design/zh/guide/migration 使用v2 v5并存的方式去使用一些高版本的组件

还是绕回去了 v5 npm install --save-dev next-transpile-modules next-images const withImages = require('next-images')

const withTM = require('next-transpile-modules')([ 'antd-mobile', ]);

报错和上面一样，v2版本是ok的，正常能跑

awmleer commented 3 years ago

@pangyutong 你是 v2 和 v5 共存的？发一下你 package.json？是不是 v5 用的包名不是 antd-mobile，导致上面的配置没有生效？

pangyutong commented 3 years ago

共存和单v5两种方式都试了 都产生成上方报错内容，下面是共存的package.json，v5是antd-mobile， 按照文档配置的。v2有后缀。 { "name": "demo", "version": "0.1.0", "private": true, "scripts": { "dev": "REAL_ENV=development next dev", "start": "next start -p 8080", "build-prod": "cross-env REAL_ENV=prod next build", "build-test": "cross-env REAL_ENV=test next build", "build-stage": "cross-env REAL_ENV=stage next build", "type-check": "tsc --pretty --noEmit", "format": "prettier --write .", "lint": "next lint", "test": "jest", "test-all": "yarn lint && yarn type-check && yarn test", "export": "cross-env NEXT_EXPORT=true next build && cross-env NEXT_EXPORT=true next export" }, "dependencies": { "@babel/plugin-proposal-decorators": "^7.14.5", "@zeit/next-css": "^1.0.1", "@zeit/next-less": "^1.0.1", "antd-mobile": "^5.0.0-beta.23", "antd-mobile-icons": "^0.2.2", "antd-mobile-v2": "^2.3.4", "autoprefixer": "^10.0.4", "axios": "^0.21.1", "babel-plugin-import": "^1.13.3", "babel-plugin-module-resolver": "^4.1.0", "gray-matter": "^4.0.2", "less": "^2.7.3", "less-vars-to-js": "1.3.0", "line-column": "^1.0.2", "next": "10.2.0", "next-pwa": "^5.2.23", "null-loader": "^4.0.1", "postcss": "^8.1.10", "react": "17.0.2", "react-dom": "17.0.2", "react-redux": "^7.2.3", "redux": "^4.0.5", "redux-devtools-extension": "^2.13.9", "redux-thunk": "^2.3.0", "tailwindcss": "^2.0.2", "webpack": "^4.46.0" }, "devDependencies": { "@testing-library/react": "^11.2.5", "@types/jest": "^26.0.20", "@types/node": "^14.14.25", "@types/react": "^17.0.1", "@typescript-eslint/eslint-plugin": "^4.14.2", "@typescript-eslint/parser": "^4.14.2", "babel-jest": "^26.6.3", "cross-env": "^7.0.3", "eslint": "^7.30.0", "eslint-config-next": "11.0.1", "eslint-config-prettier": "^7.2.0", "eslint-plugin-react": "^7.19.0", "husky": "^4.2.3", "identity-obj-proxy": "^3.0.0", "jest": "^26.6.3", "jest-watch-typeahead": "^0.6.1", "lint-staged": "^10.0.10", "lost": "8.2.0", "next-images": "^1.8.2", "next-transpile-modules": "^9.0.0", "postcss-nested": "5.0.5", "prettier": "^2.0.2", "styled-jsx-plugin-postcss": "4.0.1", "typescript": "^4.1.3" } }

pangyutong commented 3 years ago

step1：安装v5 step2：业务导入swiper组件 => 报错为error - ./node_modules/antd-mobile/es/components/slider/slider.css step3：按照文档安装next-transpile-modules next-images ，并且next.config.js书写module.exports = withTM(withImages(withPWA(withLess(withCss(

报错'startsWith' of undefined

zzzgydi commented 3 years ago

你这里的next版本是v10，对应的next-transpile-modules版本应该是v7，你现在用的是v9，具体可以看https://github.com/martpie/next-transpile-modules#compatibility-table

awmleer commented 3 years ago

@zzzgydi 太感谢了，那 issue 我先关闭了 @pangyutong 可以按照这个方案试试看看

ZhelinCheng commented 2 years ago

我出现了这样的提示： next-transpile-modules - DEPRECATED - fallbacking to previous module resolution system for module "antd-mobile", you can now just pass the name of the package to transpile and it will detect its real path without you having to pass a sub-module.

Error: next-transpile-modules - an unexpected error happened when trying to resolve "antd-mobile". Are you sure the name module you are trying to transpile is correct, and it has a "main" or an "exports" field?

Error: Can't resolve 'antd-mobile' in '/var/user'

at getPackageRootDirectory (/opt/node_modules/next-transpile-modules/src/next-transpile-modules.js:173:17)

at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)

at Module.load (internal/modules/cjs/loader.js:1002:32)

at Function.Module._load (internal/modules/cjs/loader.js:901:14)