when creating a custom lib react seem to be unavailable - reactjs

Question

When building I get the following error message:
ERROR in ./node_modules/my-components-lib/src/components/table/Table.js 11:4
Module parse failed: Unexpected token (11:4)
You may need an appropriate loader to handle this file type.
| }) =>
|
> <table>
Table component in node_modules/my-compoenents-lib
import React from 'react';
import PropTypes from 'prop-types';
import {FormattedMessage} from 'react-intl';
const Table = ({ columns, actions, data}) => <table ...> ... // the error is on this line
Usage of table component in src
import Table from "my-components-lib/src/components/table/Table";
...
return (<Table ...>...)
webpack.common.config.js
module.exports = {
entry: [
'./src/index.js'
],
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebPackPlugin({
favicon: './src/assets/favicon.ico',
template: './src/index.html',
filename: './index.html',
envVarsPath: contextPath + constants.envVarsFileName
})
],
output: {
publicPath: '/'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: [/node_modules/],
use: ['babel-loader']
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|jp(e*)g|svg)$/,
use: [{
loader: 'url-loader',
options: {
limit: 8000, // Convert images < 8kb to base64 strings
name() {
// prod -- path will get "/" before images
const url = 'images/[hash]-[name].[ext]';
return prod ? '/' + url : url;
}
}
}]
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
};
webpack.dev.config.js
module.exports = merge(common, {
mode: 'development',
devServer: {
contentBase: './src',
hot: true,
open: true,
historyApiFallback: true
},
devtool: 'inline-source-map'
});

Answer 1

You are importing table component incorrectly. If you are writing directly name of component or folder name without using dots (./), react will try to import this component from node_modules. try to import correctly your component.

Answer 2

I managed to resolve the problem by adding this script:
"scripts": {
"prepare": "rm -rf dist && mkdir dist && babel src/components -d dist/components --copy-files"
},
Looks like it needs to be compiled to JS.