search

shaack / cm-chessboard

A JavaScript chessboard without dependencies. Rendered in SVG, coded in ES6. Views FEN, handles move input, animated, responsive, expandable
MIT License
209 stars 63 forks source link

Import error in Nuxt.js / Nuxt support? #94

Closed hyperstown closed 1 year ago

hyperstown commented 1 year ago

Hi, I'm trying to import cm-chessboard in Nuxt 2 project. However whatever I try results an error. 

import { Chessboard } from "cm-chessboard/src/cm-chessboard/Chessboard.js"

require() of ES Module /home/felix/dev/ChessTest/frontend/node_modules/cm-chessboard/src/cm-chessboard/Chessboard.js from /home/felix/dev/ChessTest/frontend/node_modules/vue-server-renderer/build.dev.js not supported. Instead change the require of Chessboard.js in /home/felix/dev/ChessTest/frontend/node_modules/vue-server-renderer/build.dev.js to a dynamic import() which is available in all CommonJS modules. 

import { Chessboard } from "cm-chessboard"

Cannot find module 'cm-chessboard' from '/home/felix/dev/ChessTest/frontend'

I found some threads that suggest to add "type": "module" to package.json but it's already there.

Chess.js has no such issue. 

import { Chess } from "chess.js";

Both installed using npm

I could use CDN but that's something I would rather avoid. I could also load it as a script imported in <head> but that way I would have to keep whole script in my repo which I also would rather avoid.

hyperstown commented 1 year ago

Works by adding this to nuxt.config.js

build: {
    transpile: [
      'cm-chessboard',
    ],
  }

Then it can be imported like this:

import { Chessboard } from "cm-chessboard";

And styles like that:

import "cm-chessboard/assets/styles/cm-chessboard.css";