Failed to compile

[abritopach]

Hello! I have this error when I try to use ArrowKeyNavigation in my project:

My React Class:

`
import React, { Component } from 'react';
import { ArrowKeyNavigation } from 'boundless-arrow-key-navigation';

class TestPage extends Component {
state = {
items: [ 'lorem', 'ipsum', 'dolor' ],
}

render() {
    return (
        <div>
            <section>
                <h6>Horizontal-only</h6>
                <ArrowKeyNavigation className='demo-loose-list' mode={ArrowKeyNavigation.mode.HORIZONTAL}>
                    {this.state.items.map((item) => <span key={item}>{item}</span>)}
                </ArrowKeyNavigation>
            </section>
        </div>
    );
}

}

export default TestPage;
`

Can you help me?

Thank you.

[sighrobot]

@abritopach can you paste your package.json file?

[abritopach]

My package.json @sighrobot

{ "name": "test", "version": "0.1.0", "private": true, "dependencies": { "boundless-arrow-key-navigation": "^1.1.0", "prop-types": "^15.5.10", "react": "^15.6.1", "react-dom": "^15.6.1", "react-redux": "^5.0.6", "react-router": "^4.2.0", "react-router-dom": "^4.2.2", "react-scripts": "1.0.12", "redux": "^3.7.2", "redux-saga": "^0.15.6" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } }

[sighrobot]

@abritopach I am not entirely sure what the problem is.

I was searching around for answers and found this issue that is quite similar. Are you sure it's not your build process?

If you have this code in a repo somewhere, happy to take a further look.

[abritopach]

@sighrobot I create new test react app.

Steps:

1. create-react-app react-test-boundless.
2. Install boundless/ArrowKeyNavigation: npm i --save boundless-arrow-key-navigation
3. In App.js import ArrowKeyNavigation from 'boundless-arrow-key-navigation'; and add
   <div> <section> <h6>Horizontal-only</h6> <ArrowKeyNavigation className='demo-loose-list' mode={ArrowKeyNavigation.mode.HORIZONTAL}> {this.state.items.map((item) => <span key={item}>{item}</span>)} </ArrowKeyNavigation> </section> </div>

But i get the same error.

I uploaded the project to the following repository: https://github.com/abritopach/react-test-boundless

Can you take a further look?

Thank you very much.

[quantizor]

Ah it's because of the "module" entry point leading to ESM code that requires babel transpilation. Boundless uses some newer JS features like static class properties.

@sighrobot the module entries should either be removed or updated to point at a version of the files with all the babel stuff transpiled except import/export syntax.

[quantizor]

@abritopach in the meantime, you can opt out of using the bleeding edge code with this webpack config in your project:

{
    resolve: {
        mainFields: ["browser",  "main"]
    }
}

[sighrobot]

Thanks @probablyup!

[abritopach]

Oh, it's working :)

I have executed eject in the project: yarn eject

With this command all the build dependencies, configs, and scripts are moved right into project. At this point I can customize webpack.config.dev.js and add the indicated configuration.

Thank you very much @probablyup