OK, I created a new project locally and slowly applied my settings. It turns out that it has to do with the sass processing. The project I setup was the stock V2 skeleton without sass processing, so when I started copying my webpack settings over it started to bomb when I enabled the option below. Specifically the options line. When I comment that out, the template is rendered without an issue (but the styles are not applied), but when it is enabled then I get the error stating that classname only has a getter.
{
test: /[/\\]src[/\\].+\.html$/i,
use: {
loader: '@aurelia/webpack-loader',
options: { useCSSModule: true }
},
exclude: /node_modules/
}
at this point my full webpack.config.js file in my new svg only project is pasted below. I guess this is an issue with Webpack more than aurelia (not sure where the lines are drawn for this). Any direction on how to mitigate this would be appreciated.
/* eslint-disable @typescript-eslint/no-var-requires */
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');
const Dotenv = require('dotenv-webpack');
const cssLoader = {
loader: 'css-loader',
options: {
modules: true,
// https://github.com/webpack-contrib/css-loader#importloaders
importLoaders: 2
}
};
const sassLoader = {
loader: 'sass-loader',
options: {
sassOptions: {
includePaths: ['node_modules']
}
}
};
const postcssLoader = {
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: ['autoprefixer']
}
}
};
module.exports = function(env, { analyze }) {
const production = env.production || process.env.NODE_ENV === 'production';
return {
target: 'web',
mode: production ? 'production' : 'development',
devtool: production ? undefined : 'eval-cheap-source-map',
entry: {
entry: './src/main.ts'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: production ? '[name].[contenthash].bundle.js' : '[name].bundle.js'
},
resolve: {
extensions: ['.ts', '.js'],
modules: [path.resolve(__dirname, 'src'), path.resolve(__dirname, 'dev-app'), 'node_modules']
},
devServer: {
historyApiFallback: true,
open: !process.env.CI,
port: 8000
},
module: {
rules: [
{ test: /\.(png|svg|jpg|jpeg|gif)$/i, type: 'asset' },
{ test: /\.(woff|woff2|ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/i, type: 'asset' },
{ test: /\.css$/i, use: [ 'style-loader', cssLoader, postcssLoader ] },
{ test: /\.scss$/i, use: [ 'style-loader', cssLoader, postcssLoader, sassLoader ] },
{ test: /\.ts$/i, use: ['ts-loader', '@aurelia/webpack-loader'], exclude: /node_modules/ },
{
test: /[/\\]src[/\\].+\.html$/i,
use: {
loader: '@aurelia/webpack-loader',
options: { useCSSModule: true }
},
exclude: /node_modules/
}
]
},
plugins: [
new HtmlWebpackPlugin({ template: 'index.html' }),
new Dotenv({
path: `./.env${production ? '' : '.' + process.env.NODE_ENV}`,
}),
analyze && new BundleAnalyzerPlugin()
].filter(p => p)
}
}
Thanks again,
–Paul
Edit - I am sorry, I started creating a custom project and see that CssModule is not related to sass but rather an alternative to ShadowDom.