External module error: "You may need an appropriate loader to handle this file type."

I'm building a NPM package. It's a React component.

It has automated tests via Jest, and the automated tests work. It uses JSX syntax so I created a .babelrc at the root path with the following content:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

When I try to use it elsewhere (in an application project, by install it then importing it), it fails with the following message:

ERROR in ./node_modules/pop-shared/src/MultiList.js 17:16
Module parse failed: Unexpected token (17:16)
You may need an appropriate loader to handle this file type.
|   };
|
>   onListClicked = () => {
|     this.onCollapseChange(!this.state.collapse);
|   };
@ ./node_modules/pop-shared/src/index.js 1:0-36 4:2-11
@ ./src/scenes/search/index.js
@ ./src/router.js
@ ./src/index.js
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js

The error is about class properties notation.

I don't understand why. I use other modules (by importing them) that use class properties too.

Why this particular module fails? And why does it work when I run automated tests via Jest?

728x90

0 Answers External module error: "You may need an appropriate loader to handle this file type."