search

nanxiaobei / antd-img-crop

🗡 An image cropper for Ant Design Upload
MIT License
497 stars 156 forks source link

Nextjs: antd-img-crop do not working #221

Closed datnd99 closed 1 year ago

datnd99 commented 1 year ago

Hi, I try to install antd-img-crop and config this in my NextJs projects following the tutorial: https://github.com/nanxiaobei/antd-img-crop, but it does not work and throws an error: SyntaxError: Cannot use import statement outside a module.

My component use antd-img-crop:

import { UploadOutlined } from '@ant-design/icons';
import { Upload, UploadFile } from 'antd';
import ImgCrop from 'antd-img-crop';
import { RcFile } from 'antd/es/upload';
import dynamic from 'next/dynamic';
import React from 'react';

export interface IImageWithCrop {
  style?: React.CSSProperties;
  onChange: (value: number) => void;
  config: any;
}

const onPreview = async (file: UploadFile) => {
  let src = file.url as string;
  if (!src) {
    src = await new Promise((resolve) => {
      const reader = new FileReader();
      reader.readAsDataURL(file.originFileObj as RcFile);
      reader.onload = () => resolve(reader.result as string);
    });
  }
  const image = new Image();
  image.src = src;
  const imgWindow = window.open(src);
  imgWindow?.document.write(image.outerHTML);
};

const ImageWithCrop: React.FC<IImageWithCrop> = (props) => {
  const { onChange, config } = props;

  return (
    <ImgCrop grid rotate>
      <Upload {...config} onPreview={onPreview} onChange={onChange}>
        <UploadOutlined />
        &nbsp;Upload
      </Upload>
    </ImgCrop>
  );
};

export default dynamic(() => Promise.resolve(ImageWithCrop), { ssr: false });

Error here: 

error - /mnt/data/workplaces/personal/templates/nextjs-app-template/node_modules/antd/es/locale-provider/LocaleReceiver.js:1
import _extends from "@babel/runtime/helpers/esm/extends";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1088:15)
    at Module._compile (node:internal/modules/cjs/loader:1123:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (/mnt/data/workplaces/personal/templates/nextjs-app-template/node_modules/antd-img-crop/dist/antd-img-crop.cjs.js:21:22)
    at Module._compile (node:internal/modules/cjs/loader:1159:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at antd-img-crop (/mnt/data/workplaces/personal/templates/nextjs-app-template/.next/server/pages/admin/dashboard.js:186:18)
    at __webpack_require__ (/mnt/data/workplaces/personal/templates/nextjs-app-template/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./src/components/image-with-crop/ImageWithCrop.tsx:11:71)
    at ./src/components/image-with-crop/ImageWithCrop.tsx (/mnt/data/workplaces/personal/templates/nextjs-app-template/.next/server/pages/admin/dashboard.js:77:1)
    at __webpack_require__ (/mnt/data/workplaces/personal/templates/nextjs-app-template/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./src/pages/admin/dashboard.tsx:16:99)
    at __webpack_require__.a (/mnt/data/workplaces/personal/templates/nextjs-app-template/.next/server/webpack-runtime.js:97:13)
    at eval (webpack-internal:///./src/pages/admin/dashboard.tsx:1:21)
    at ./src/pages/admin/dashboard.tsx (/mnt/data/workplaces/personal/templates/nextjs-app-template/.next/server/pages/admin/dashboard.js:121:1)
    at __webpack_require__ (/mnt/data/workplaces/personal/templates/nextjs-app-template/.next/server/webpack-runtime.js:33:42)
    at __webpack_exec__ (/mnt/data/workplaces/personal/templates/nextjs-app-template/.next/server/pages/admin/dashboard.js:262:39)
    at /mnt/data/workplaces/personal/templates/nextjs-app-template/.next/server/pages/admin/dashboard.js:263:28
    at Object.<anonymous> (/mnt/data/workplaces/personal/templates/nextjs-app-template/.next/server/pages/admin/dashboard.js:266:3)
    at Module._compile (node:internal/modules/cjs/loader:1159:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.requirePage (/mnt/data/workplaces/personal/templates/nextjs-app-template/node_modules/next/dist/server/require.js:88:12)
    at /mnt/data/workplaces/personal/templates/nextjs-app-template/node_modules/next/dist/server/load-components.js:37:73
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Object.loadComponents (/mnt/data/workplaces/personal/templates/nextjs-app-template/node_modules/next/dist/server/load-components.js:37:26)
    at async DevServer.findPageComponents (/mnt/data/workplaces/personal/templates/nextjs-app-template/node_modules/next/dist/server/next-server.js:561:36)
    at async DevServer.renderPageComponent (/mnt/data/workplaces/personal/templates/nextjs-app-template/node_modules/next/dist/server/base-server.js:942:24)
    at async DevServer.renderToResponse (/mnt/data/workplaces/personal/templates/nextjs-app-template/node_modules/next/dist/server/base-server.js:971:32)
    at async DevServer.pipe (/mnt/data/workplaces/personal/templates/nextjs-app-template/node_modules/next/dist/server/base-server.js:407:25)
    at async Object.fn (/mnt/data/workplaces/personal/templates/nextjs-app-template/node_modules/next/dist/server/next-server.js:757:21)
    at async Router.execute (/mnt/data/workplaces/personal/templates/nextjs-app-template/node_modules/next/dist/server/router.js:253:36)
    at async DevServer.run (/mnt/data/workplaces/personal/templates/nextjs-app-template/node_modules/next/dist/server/base-server.js:384:29)
    at async DevServer.run (/mnt/data/workplaces/personal/templates/nextjs-app-template/node_modules/next/dist/server/dev/next-dev-server.js:740:20)
    at async DevServer.handleRequest (/mnt/data/workplaces/personal/templates/nextjs-app-template/node_modules/next/dist/server/base-server.js:322:20) {
  page: '/admin/dashboard'
}

And package.json:

{
  "name": "nextjs-app-template",
  "author": "datnd",
  "description": "this is a temaplte using for next web app",
  "version": "0.1.0",
  "license": "MIT",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_OPTIONS='--inspect' next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "prettier": "prettier --write .",
    "prepare": "husky install",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:ci": "jest --ci"
  },
  "dependencies": {
    "@ant-design/icons": "^4.8.0",
    "@next/font": "13.0.7",
    "@reduxjs/toolkit": "^1.9.1",
    "@types/node": "18.11.17",
    "@types/react": "18.0.26",
    "@types/react-dom": "18.0.9",
    "antd": "^5.0.7",
    "antd-img-crop": "^4.5.2",
    "async-mutex": "^0.4.0",
    "eslint": "8.30.0",
    "next": "13.0.7",
    "next-intl": "^2.10.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-redux": "^8.0.5",
    "sass": "^1.57.0",
    "typescript": "4.9.4",
    "util": "^0.12.5"
  },
  "engines": {
    "node": ">=18.0.0",
    "yarn": ">=1.22.0",
    "npm": "please-use-yarn"
  },
  "devDependencies": {
    "@babel/core": "^7.20.5",
    "@commitlint/cli": "^17.3.0",
    "@commitlint/config-conventional": "^17.3.0",
    "@storybook/addon-actions": "^6.5.15",
    "@storybook/addon-essentials": "^6.5.15",
    "@storybook/addon-interactions": "^6.5.15",
    "@storybook/addon-links": "^6.5.15",
    "@storybook/builder-webpack5": "^6.5.15",
    "@storybook/manager-webpack5": "^6.5.15",
    "@storybook/preset-scss": "^1.0.3",
    "@storybook/react": "^6.5.15",
    "@storybook/testing-library": "^0.0.13",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^14.4.3",
    "babel-jest": "^29.3.1",
    "babel-loader": "^8.3.0",
    "cross-env": "^7.0.3",
    "css-loader": "^6.7.3",
    "eslint-config-next": "^13.0.7",
    "eslint-plugin-jest": "^27.1.7",
    "eslint-plugin-storybook": "^0.6.8",
    "husky": "^8.0.2",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^29.3.1",
    "jest-environment-jsdom": "^29.3.1",
    "prettier": "^2.8.1",
    "sass-loader": "^13.2.0",
    "style-loader": "^3.3.1"
  },
  "resolutions": {
    "webpack": "^5"
  }
}

Please help me, thanks!

datnd99 commented 1 year ago

It worked for me: https://github.com/nanxiaobei/antd-img-crop/issues/212#issuecomment-1325973854