Next.js+Canvas: Module parse failed, Unexpected character ‘�‘

问题描述

二话不说上package.json

{
  "name": "os-figma",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@liveblocks/client": "^1.9.7",
    "@liveblocks/react": "^1.9.7",
    "@liveblocks/react-comments": "^1.9.7",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "fabric": "^5.3.0",
    "lucide-react": "^0.323.0",
    "next": "14.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "tailwind-merge": "^2.2.1",
    "tailwindcss-animate": "^1.0.7",
    "uuid": "^9.0.1"
  },
  "devDependencies": {
    "@types/fabric": "^5.3.6",
    "@types/node": "^20.11.17",
    "@types/react": "^18.2.55",
    "@types/react-dom": "^18.2.19",
    "autoprefixer": "^10.4.17",
    "eslint": "^8.56.0",
    "eslint-config-next": "14.1.0",
    "postcss": "^8.4.35",
    "tailwindcss": "^3.4.1",
    "typescript": "^5.3.3"
  }
}

引用canvas的文件

"use client"
import { fabric } from "fabric";
import LeftSidebar from "@/components/LeftSidebar";
import Live from "@/components/Live";
import Navbar from "@/components/Navbar";
import RightSidebar from "@/components/RightSidebar";
import { useEffect, useRef } from "react";
import { handleCanvasMouseDown, handleResize, initializeFabric } from "@/lib/canvas";

export default function Page() {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const fabricRef = useRef<fabric.Canvas | null>(null);
  const isDrawing = useRef(false);
  const shapeRef = useRef<fabric.Object | null>(null);
  const selectedShapeRef = useRef<string | null>('rectangle');

  useEffect(() => {
    const canvas = initializeFabric({ canvasRef, fabricRef });

    canvas.on("mouse:down", (options) => {
      handleCanvasMouseDown({ options, canvas, isDrawing, shapeRef, selectedShapeRef})
    });

    window.addEventListener("resize ", () => {
      handleResize({ canvas });
    });

  }
  , []);

  return (
    <>
      <main className="h-screen overflow-hidden">
        <Navbar />
        <section className="flex h-full flex-row">
          <LeftSidebar />
          <Live canvasRef={canvasRef} />
          <RightSidebar />
        </section>

      </main>
    </>

  );
}

问题: 

SyntaxError: Unexpected character '�' (1:0)
at Parser.pp$4.raise (/test1/node/ow-dig/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
at Parser.pp$7.getTokenFromCode (/test1/node/ow-dig/node_modules/webpack/node_modules/acorn/dist/acorn.js:2756:10)
at Parser.pp$7.readToken (/test1/node/ow-dig/node_modules/webpack/node_modules/acorn/dist/acorn.js:2477:17)
at Parser.pp$7.nextToken (/test1/node/ow-dig/node_modules/webpack/node_modules/acorn/dist/acorn.js:2468:15)
at Parser.parse (/test1/node/ow-dig/node_modules/webpack/node_modules/acorn/dist/acorn.js:515:10)
at Object.parse (/test1/node/ow-dig/node_modules/webpack/node_modules/acorn/dist/acorn.js:3098:39)
at Parser.parse (/test1/node/ow-dig/node_modules/webpack/lib/Parser.js:902:15)
at DependenciesBlock. (/test1/node/ow-dig/node_modules/webpack/lib/NormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (/test1/node/ow-dig/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
at nextLoader (/test1/node/ow-dig/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
at /test1/node/ow-dig/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
at Storage.finished (/test1/node/ow-dig/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
at /test1/node/ow-dig/node_modules/graceful-fs/graceful-fs.js:78:16
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:439:3)
@ ./~/canvas/lib/bindings.js 3:17-51

解决

next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
    images: {
        remotePatterns: [
            {
            protocol: 'https',
            hostname: 'liveblocks.io'
            }
        ]
    },
    webpack: (
        config,
        { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
      ) => {
        config.externals.push({ canvas: 'commonjs canvas' })
        return config
    },
};

export default nextConfig;

引用: Module parse failed: /canvas/build/Release/canvas.node Unexpected character '�' · Issue #867 · Automattic/node-canvas · GitHub