Description
I'm seeing some unusual behavior when add the design-system-react to my build. When it is not present, this builds successfully as expected:
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Test from './Test';
ReactDOM.render(<Test/>, document.getElementById('app'));
When I add
path.join(__dirname, 'node_modules/@salesforce/design-system-react') to my webpack config and "@salesforce/babel-preset-design-system-react" to my babelrc file, the build fails with the error in the subject.
Oddly, if I remove the import of the Test component and use
ReactDOM.render(<p>Hi from index</p>, document.getElementById('app')); in my index file, the compile is successful.
Here are the relevant files:
webpack.config.js
const path = require('path');
const webpack = require('webpack'); // doesn't seem to be used
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, '/dist'),
filename: 'bundle.js',
publicPath: '/'
},
resolve: {
extensions: [
'.js',
'.jsx'
]
},
module: {
rules: [
{
test:/\.(jsx?)$/,
exclude: /node_modules/,
include: [
path.join(__dirname, 'src'),
path.join(__dirname, 'node_modules/@salesforce/design-system-react')
],
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract(
'style-loader',
'css-loader?url=false&outputStyle=expanded&sourceMap=true&sourceMapContents=true'
)
},
{
test: /\.(svg|gif|jpe?g|png)$/,
loader: 'url-loader?limit=10000'
},
{
test: /\.(eot|woff|woff2|ttf)$/,
loader: 'url-loader?limit=30&name=assets/fonts/webfonts/[name].[ext]'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new ExtractTextPlugin('[name].css')
]
}
.babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react", "@salesforce/babel-preset-design-system-react"]
}
src/Test.js
import React from 'react';
class Test extends React.Component {
render() {
return(
<p>Hi from test</p>
);
}
}
export default Test;
I'm fairly new to babel and webpack so hope it's not something obvious I'm missing.
I've looked through the existing open and closed issues, but can't find anything similar. Hoping someone can help as I'd really like to use this library with a current project.
Thanks.