SVG output with Aurelia V2

Help Requests
1

When I am attempting to output a simple SVG graphic I am having trouble utilizing the class attributes on the objects inside the SVG. It seems that Aurelia is binding the class attribute - for instance setting to “au” and then trying to set the classname that I originally had, however, SVG does not allow you to make changes to the class attribute. I am getting the following error:

Uncaught (in promise) TypeError: Cannot set property className of # which has only a getter

Does anyone know a way around this? I would like to take advantage of the SVG objects to diagram out a workflow and I would like to also leverage css to style the objects and reduce repeating visual characteristics.

Note - I am trying to do this in V2 but I assume this may also be an issue in V1 though I have not attempted in the V1 framework.

Thanks in advance
–Paul

1 Like
2

How does the template of the svg look like? Can you also provide a small repro? Maybe create it from here https://gist.dumber.app

3

Go figure, it all seems to work on gist. Perhaps my local version of Aurelia is older. I will attempt to create another repro locally - If not I will look at my current project deeper to see if I can determine what the difference is. I will make sure I post back with my final results. Thanks for your prompt response.

–Paul

2 Likes
4

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.

1 Like
5

OK, I was able to get it working, so this is indeed not an Aurelia issue (happy about that). When I removed the option for CSS Module then it started working in full. I am a little confused on when I would need that versus not needing it so I need to get oriented on that. If you have any links to useful details on the usage of CSS Module that would be fantastic.

–Paul

1 Like