Transpilation errors when I try to use DataTable

[tfuda]

I'm trying to use the DataTable component within my React/Babel/Webpack project. I'm using Webpack 4 and Babel 7. I've modified my Webpack loaders configuration to include the node_modules/@salesforce/design-system-react package in my build process, and I've updated my .babelrc file as follows:

{
	"presets": [
		"@babel/preset-env",
		"@babel/preset-react"
	],
	"plugins": [
		"@babel/plugin-proposal-object-rest-spread",
		"@babel/plugin-proposal-export-default-from",
		"@babel/plugin-proposal-export-namespace-from",
		[
			"@babel/plugin-proposal-class-properties",
			{
				"loose": true
			}
		]
	]
}

This is in accordance with the recommendation made here for transpiling using Babel 7+: #1621 (comment).

My Webpack loader configuration looks like this:

var path = require('path');
function excludeNodeModulesExcept (modules)
{
	var pathSep = path.sep;
	if (pathSep === '\\') // must be quoted for use in a regexp:
		pathSep = '\\\\';
	var moduleRegExps = modules.map (function (modName) { return new RegExp("node_modules" + pathSep + modName);});
	
	return function (modulePath) {
		if (/node_modules/.test(modulePath)) {
			for (var i = 0; i < moduleRegExps.length; i ++)
				if (moduleRegExps[i].test(modulePath)) return false;
			return true;
		}
		return false;
	};
}

module.exports = [
	{
		test: /\.(js|jsx)$/,
		exclude: excludeNodeModulesExcept(["@salesforce/design-system-react"]),
		use: ["babel-loader", "eslint-loader"]
	},
	{
		test: /\.css$/,
		use: ["style-loader", "css-loader"],
	},
	{
		test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
		use: ["file-loader"]
	},
	{
		test: /\.(woff|woff2|ttf|svg|gif|jpg|png)$/,
		use: [
			{
				loader: "url-loader",
				options: {
					limit: 20000
				}
			}
		]
	},
];

I'm not excluding the node_modules@salesforce/design-system-react directory from the build. When I try to build my app that includes DataTable, I get the following compilation errors in data-table/cell.jsx and data-table/index.jsx:

ERROR in ./node_modules/@salesforce/design-system-react/components/data-table/cell.jsx 22:2
Module parse failed: Unexpected token (22:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|               : props.children;
|       const contents = (
>               <div
|                       className={classNames({
|                               'slds-truncate': props.fixedLayout,
 @ ./src/components/exchange/exchange-summary.jsx 40:0-87 129:29-42
 @ ./src/components/exchange/exchange.jsx
 @ ./src/index.jsx

ERROR in ./node_modules/@salesforce/design-system-react/components/data-table/index.jsx 70:20
Module parse failed: Unexpected token (70:20)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|       // ### Display Name
|       // Always use the canonical component name as the React display name.
>       static displayName = DATA_TABLE;
|
|       // ### Prop Types
 @ ./src/components/exchange/exchange-summary.jsx 39:0-78 103:61-70
 @ ./src/components/exchange/exchange.jsx
 @ ./src/index.jsx
i ｢wdm｣: Failed to compile.

Any thoughts on what I might be missing here.

[welcome]

Thanks for opening your first issue! 👋
If you have found this library helpful, please star it. A maintainer will try to respond within 7 days. If you haven’t heard anything by then, please bump this thread.

[tfuda]

Never mind... I was importing the from the wrong place. I was importing from:

import` DataTable from "@salesforce/design-system-react/components/data-table";

Need to import the compiled modules from:

import` DataTable from "@salesforce/design-system-react/module/components/data-table";