Webpack 4 to 5 issue

Help Requests
1

I am finally attempting to upgrade my projects. I use yarn workspaces which may be part of my issue. My 2 projects build with no errors, but when launching them I get the following error. The only changes were related to webpack. Any suggestions would be greatly appreciated

Error: Template markup must be wrapped in a <template> element e.g. <template> <!-- markup here --> </template>
    at Object.createTemplateFromMarkup (aurelia-pal-browser.js:480:1)
    at InlineViewStrategy.loadViewFactory (aurelia-templating.js:3616:26)
    at HtmlBehaviorResource.load (aurelia-templating.js:3043:1)
    at aurelia-framework.js:119:66
    at Array.map (<anonymous>)
    at loadBehaviors (aurelia-framework.js:119:1)
    at aurelia-framework.js:208:57
    at next (aurelia-framework.js:24:1)

Here is my webpack config

import { AureliaPlugin } from 'aurelia-webpack-plugin';
import * as HtmlWebpackPlugin from 'html-webpack-plugin';
import * as CopyWebpackPlugin from 'copy-webpack-plugin';
import { resolve } from 'path';
import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
const DashboardPlugin = require('webpack-dashboard/plugin');
const mode = process.argv.includes('--production') ? 'production' : 'development';
const analyze = process.argv.includes('--analyze');
const ensureArray = (config) => (config && (Array.isArray(config) ? config : [config])) || [];
const when = (condition, config, negativeConfig) => (condition ? ensureArray(config) : ensureArray(negativeConfig));

export = (): object => {
    return {
        mode: mode,
        resolve: {
            extensions: ['.ts', '.js'],
            modules: ['src', 'node_modules', '../../node_modules'].map((p) => resolve(__dirname, '..', p)),
            symlinks: false
        },
        entry: { app: './src/main' },
        output: {
            filename: '[name].js'
        },
        watch: mode === 'development',
        devtool: mode === 'development' ? 'source-map' : 'source-map',
        devServer: {         
            port: 8081,
            historyApiFallback: true
        },
        optimization: {
            moduleIds: 'named',
            concatenateModules: false
        },
        module: {
            rules: [
                {
                    test: /\.scss$/,
                    use: ['style-loader', 'css-loader', 'sass-loader'],
                    issuer: /\.[tj]s$/i
                },
                {
                    test: /\.scss$/,
                    use: ['css-loader', 'sass-loader'],
                    issuer: /\.html?$/i
                },
                {
                    test: /\.css$/i,
                    issuer: { not: [ /\.html$/i ] },
                    use: ['css-loader']
                },
                {
                    test: /\.css$/,
                    use: ['css-loader'],
                    issuer: /\.html?$/i
                },
                {
                    test: /\.[tj]s$/i,
                    loader: 'ts-loader',
                    exclude: [/node_modules/, /\.spec\.[tj]s$/]
                },
                {
                    test: /\.html$/i,
                    use: [
                        {
                            loader: 'html-loader',
                            options: {
                                minimize: true
                            }
                        }
                    ]
                },
                {
                    test: /\.(png|jpg|svg|ttf|eot|woff2|woff)$/,
                    loader: 'url-loader'
                }
            ]
        },
        plugins: [
            new AureliaPlugin({ aureliaApp: undefined }),
            new HtmlWebpackPlugin({
                template: 'src/index.ejs',
                metadata: { dev: mode !== 'production', baseUrl: "/"  }
            }),
            ...when(analyze, new BundleAnalyzerPlugin(), null),
            new DashboardPlugin(),
            new CopyWebpackPlugin({
                patterns: [{ from: './static', to: './' }]
            })
            //new CopyWebpackPlugin([{ from: './static', to: './', ignore: ['.*'] }])
        ]
    };
};
2

If looks like you have a page/component that doesn’t have it’s HTML wrapped with a <template> tag. Does the error indicated in any way which file is the problem?

3

I understand what the error reads, but I can assure you that it’s a lie. I can’t share the project, but it’s been in production for a long time now running fine. The stack trace I posted is all I get :confused:

4

First, if you have not, try a clean npm install (without lock and node_modules).

It looks like you don’t have too much customisation in webpack config.

Try to use aurelia-cli to generate a clean webpack app, and bring the latest webpack config to your project.
Check the package.json difference especially around those loaders (html-loader might be different version).

1 Like
5

I’m sorry I didn’t respond sooner. I did start with a clean project when I started this task. I need to take some time to walk my real project package.json again to see if something is causing a version conflict.