Chessboard doesn't render at all.

[lyuben-todorov]

Using a default, unejected, CRA project, I'm unable to get this to render. To reproduce simply get a CRA project and copy/paste the code under installation. My App.js:

import Chessground from 'react-chessground'
import 'react-chessground/dist/styles/chessground.css'
import React from 'react';

export default class App extends React.Component {
  render () {
    return <Chessground />
  }
}

my index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

This is how the page looks like:

[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