Can't import ES6 react module

0
votes

Repro

https://github.com/jim-king-2000/nextbugrepro

Detail

I create a very simple react component.

const My = () => (<div>ABC</div>);
export default My;

It is in a standalone library project(https://github.com/jim-king-2000/react-module).

Now I use the component in another project.

// index.js
import { My } from 'react-module';


// package.json
"dependencies": {
  ...
  "react-module": "git+https://github.com/jim-king-2000/react-module.git"
}

Then, node.js complains:

error  in ./node_modules/react-module/components/My.js

Module parse failed: Unexpected token (1:18)
You may need an appropriate loader to handle this file type.


const My = () => (<div>ABC</div>);
export default My;
./node_modules/react-module/index.js 1:0-32 1:0-32
@ ./pages/index.js
@ multi ./pages/index.js

Question

How to build a ES6 react npm library?

2
node.jsreactjsnpmecmascript-6
This is a Webpack message. Where is the Webpack config? – madflow
I use next.js, which uses webpack implicitly. – Jim Jin
remove the curly braces from the import statement – Nipek
I didn't use My.js directly. There is an index.js which reexports "My" like this "export * from './components/My';". So, the curly braces are OK. You could check the repro out to take a look. – Jim Jin

2 Answers

1
votes

You need to setup babel compile, in order to compile jsx, which seems to be missing in your package.json

0
votes

After the investigation for several hours, I find that the library has to be transpiled to ES5. I hope we could use ES6 npm modules in the future.