Chessboard doesn't render at all.

[ruilisi]

Chessboard doesn't render at all.

[lyuben-todorov]

Then I saw that the npm package hasn't been updated for 2 years?

[hophacker]

We will fix that.

[hophacker]

Have you installed and applied style-loader in webpack?

[hophacker]

Hi, friend, we have fixed that issue due to changes of css classnames made by chessground. Pls upgrade react-chessground to version 1.1.0. BTW, we have also upgraded all dependency modules to latest versions.

[lyuben-todorov]

Thanks for the update! Styles seem to be doing fine, however the board is still broken. This is what I'm getting from the example after I updated it's dependencies:

I'm also getting the same situation from a CRA project:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Chessground from 'react-chessground';
import 'react-chessground/dist/styles/chessground.css'
function App() {
  return (
    <div className="App">
      <Chessground
        width="38vw"
        height="38vw"
        orientation={'w'}
        turnColor={'w'}
        viewOnly={false}
        fen={"rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"}
        style={{ margin: "auto" }}
        
      />    </div>
  );
}

export default App;

[hophacker]

You haven't included theme.css: `import 'react-chessground/dist/assets/theme.css'

[lyuben-todorov]

I'm still getting the same bug. When I originally encountered this I saw the 'import a theme or board won't work' warning in chessground.css so I copied chessground-theme.css from /assets and imported it as such:

import 'react-chessground/dist/styles/chessground-theme.css'

Still, theme is here but positions are messed up

[hophacker]

Have you upgraded to Version 1.1.0

[hophacker]

Hey, friend, I've just created a demo repo here using create-create-app https://github.com/ruilisi/react-chessground-demo.
Hope this could help you!

[lyuben-todorov]

The demo works. Thanks! I've found the culprit. The bug is symptomatic to removing

import "react-chessground/dist/assets/chessground.css";

So far I was importing from "react-chessground/dist/styles/chessground.css"; instead, which was the path instructed in the readme, so that probably needs to be updated too. Thanks for the help!

[hophacker]

Thanks for noticing that, that was fixed.

[Allirey]

had same problem with all pieces on a8 square, and only helps these imports:
import "react-chessground/dist/assets/chessground.css"
import "react-chessground/dist/styles/chessground.css"

[lyuben-todorov]

Have you imported /dist/assets/theme.css ?

[Allirey]

previously - not, but now makes test with this import and it only changed squares on blue color, trying different combinations and works only mentioned in previous comment