Update old aurelia project

The thing I absolutely like about nodejs and its packet is that you can screw up the whole project just by updating something.

Did anyone successfully updated aurelia components for an old project and get it successfully built?
Please share your experience!

By the way, my setup: Babel + Webpack

1 Like

Be careful of what you rant, you may attract an unexpectedly large crowd. Now for your actual issue, it’d be easier to help if you could share some error to start. I’m pretty sure folks here have a lot of experience fixing this. Someone recently also shared they got back to a project after 2 or 3 years and the only thing that broke was webpack :smiley:

1 Like

Indeed. It’s not imposible, though depending on usage of not-so-public methods of the packages. We have updated most of our project in the beginning of this year. So please share your problems, willing to help! :slight_smile:

1 Like

Sorry for late reply.
Guys, thank you for your answers :grinning:

yeah, indeed npm became better for the past 5 years, but for the package stability prospective, there is still a lot to be desired :wink:

@bigopon, it is probably a webpack issue, do you have the link on that tread?

Without further ado, here is the yarn outdated output:

yarn outdated v1.22.0
info Color legend :
 "<red>"    : Major Update backward-incompatible updates
 "<yellow>" : Minor Update backward-compatible features
 "<green>"  : Patch Update backward-compatible bug fixes
Package                   Current Wanted  Latest    Package Type    URL
@umpirsky/country-list    1.0.0   exotic  exotic    dependencies    https://github.com/umpirsky/country-list
admin-lte                 2.4.18  2.4.18  3.0.4     dependencies    https://adminlte.io
array-move                1.0.0   1.0.0   2.2.1     dependencies    https://github.com/sindresorhus/array-move#readme
aurelia-bootstrapper      2.3.2   2.3.3   2.3.3     dependencies    http://aurelia.io
aurelia-cli               0.33.1  0.33.1  1.3.0     devDependencies http://aurelia.io
aurelia-dialog            1.1.0   1.1.0   2.0.0     dependencies    http://aurelia.io
aurelia-i18n              2.3.2   2.3.2   3.1.0     dependencies    http://aurelia.io
aurelia-polyfills         1.3.3   1.3.4   1.3.4     dependencies    http://aurelia.io
aurelia-router            1.6.3   1.7.1   1.7.1     dependencies    http://aurelia.io
aurelia-templating-router 1.3.3   1.4.0   1.4.0     dependencies    http://aurelia.io
aurelia-validation        1.3.3   1.6.0   2.0.0-rc1 dependencies    http://aurelia.io
aurelia-webpack-plugin    3.0.0   3.0.0   4.0.0     devDependencies http://aurelia.io
babel-eslint              7.2.3   7.2.3   10.1.0    devDependencies https://github.com/babel/babel-eslint
babel-loader              7.1.5   7.1.5   8.1.0     devDependencies https://github.com/babel/babel-loader
babel-plugin-istanbul     4.1.6   4.1.6   6.0.0     devDependencies https://github.com/istanbuljs/babel-plugin-istanbul#readme
balloon-css               0.5.2   0.5.2   1.0.4     dependencies    http://kazzkiq.github.io/balloon.css/
copy-webpack-plugin       4.6.0   4.6.0   5.1.1     devDependencies https://github.com/webpack-contrib/copy-webpack-plugin
css-loader                0.28.11 0.28.11 3.5.1     devDependencies https://github.com/webpack-contrib/css-loader
del                       3.0.0   3.0.0   5.1.0     devDependencies https://github.com/sindresorhus/del#readme
element-closest           2.0.2   2.0.2   3.0.2     dependencies    https://github.com/jonathantneal/closest#readme
elfinder                  2.1.55  exotic  exotic    dependencies    ssh://git@github.com:Studio-42/elFinder.git#2.1.55
ema-jsrpc                 0.3.0   exotic  exotic    dependencies    git+ssh://git@gitlab.com:indiwine/ema-engine-2-js-api.git
es7-object-polyfill       0.0.7   0.0.7   1.0.1     devDependencies https://github.com/xpl/es7-object-polyfill
eslint                    3.19.0  3.19.0  6.8.0     devDependencies https://eslint.org
file-loader               1.1.11  1.1.11  6.0.0     devDependencies https://github.com/webpack-contrib/file-loader
filesize                  3.6.1   3.6.1   6.1.0     dependencies    https://filesizejs.com
gulp                      4.0.0   exotic  exotic    devDependencies github:gulpjs/gulp#4.0
gulp-rename               1.4.0   1.4.0   2.0.0     devDependencies https://github.com/hparra/gulp-rename
html-loader               0.5.5   0.5.5   1.1.0     devDependencies https://github.com/webpack-contrib/html-loader
html-webpack-plugin       3.2.0   3.2.0   4.0.4     devDependencies https://github.com/jantimon/html-webpack-plugin
i18next-xhr-backend       1.5.1   1.5.1   3.2.2     dependencies    https://github.com/i18next/i18next-xhr-backend
ismobilejs                0.5.2   0.5.2   1.0.3     dependencies    https://github.com/kaimallea/isMobile
node-sass                 4.11.0  4.13.1  4.13.1    devDependencies https://github.com/sass/node-sass
nps                       5.9.3   5.9.12  5.9.12    devDependencies https://github.com/kentcdodds/nps#readme
opn                       5.4.0   5.5.0   6.0.0     devDependencies https://github.com/sindresorhus/open#readme
sass-loader               6.0.7   6.0.7   8.0.2     devDependencies https://github.com/webpack-contrib/sass-loader
style-loader              0.20.3  0.20.3  1.1.3     devDependencies https://github.com/webpack-contrib/style-loader
through2                  2.0.5   2.0.5   3.0.1     devDependencies https://github.com/rvagg/through2#readme
uglify-js                 3.4.9   3.8.1   3.8.1     devDependencies https://github.com/mishoo/UglifyJS2#readme
url-loader                1.1.2   1.1.2   4.1.0     devDependencies https://github.com/webpack-contrib/url-loader
webpack                   4.29.4  4.42.1  4.42.1    devDependencies https://github.com/webpack/webpack
webpack-bundle-analyzer   3.0.4   3.6.1   3.6.1     devDependencies https://github.com/webpack-contrib/webpack-bundle-analyzer
webpack-cli               2.1.5   2.1.5   3.3.11    devDependencies https://github.com/webpack/webpack-cli#readme
webpack-dev-server        3.1.14  3.10.3  3.10.3    devDependencies https://github.com/webpack/webpack-dev-server#readme

Lets start from a small. I will apply only minor updates to aurelia only packages:

 (*) aurelia-bootstrapper       ^2.2.0                                                     2.3.2   ❯  2.3.3   http://aurelia.io
 (*) aurelia-polyfills          ^1.3.0                                                     1.3.3   ❯  1.3.4   http://aurelia.io
 (*) aurelia-router             ^1.6.3                                                     1.6.3   ❯  1.7.1   http://aurelia.io
 (*) aurelia-templating-router  ^1.3.3                                                     1.3.3   ❯  1.4.0   http://aurelia.io
 (*) aurelia-validation         ^1.2.2                                                     1.3.3   ❯  1.6.0   http://aurelia.io

And here is the affected packages:

info Direct dependencies
β”œβ”€ aurelia-bootstrapper@2.3.3
β”œβ”€ aurelia-polyfills@1.3.4
β”œβ”€ aurelia-router@1.7.1
β”œβ”€ aurelia-templating-router@1.4.0
└─ aurelia-validation@1.6.0
info All dependencies
β”œβ”€ aurelia-binding@2.5.2
β”œβ”€ aurelia-bootstrapper@2.3.3
β”œβ”€ aurelia-dependency-injection@1.5.2
β”œβ”€ aurelia-history-browser@1.4.0
β”œβ”€ aurelia-history@1.2.1
β”œβ”€ aurelia-loader-default@1.2.1
β”œβ”€ aurelia-logging-console@1.1.1
β”œβ”€ aurelia-logging@1.5.2
β”œβ”€ aurelia-pal-browser@1.8.1
β”œβ”€ aurelia-pal@1.8.2
β”œβ”€ aurelia-polyfills@1.3.4
β”œβ”€ aurelia-route-recognizer@1.3.2
β”œβ”€ aurelia-router@1.7.1
β”œβ”€ aurelia-task-queue@1.3.3
β”œβ”€ aurelia-templating-binding@1.5.3
β”œβ”€ aurelia-templating-router@1.4.0
β”œβ”€ aurelia-templating@1.10.3
└─ aurelia-validation@1.6.0

After this au build will run without any issues, but in browser there is an error while apllication startup:

Any ideas?

1 Like

This means a module is referenced too early, before platform initialization module has a chance to run. When platform has not been initialized, it typically results in some error like DOM.something is not a function.

What you can do is to check your webpack configuration to ensure the entry point is aurelia-bootstrapper.

If you are not using bootstrapping via aurelia-bootstrapper, then maybe share your main.ts

I am using aurelia-bootstrapper.
Its on the place:

1 Like

Maybe share yuor main.ts?

Sure:

import environment from './environment';
import { PLATFORM } from 'aurelia-pal';

import * as Bluebird from 'bluebird';
import { LogManager } from 'aurelia-framework';
import { Container } from 'aurelia-dependency-injection';
import { AuthService } from './auth/auth-service';

import 'fonts/stylesheet.css';
import './preloader.css';
import 'bootstrap/dist/css/bootstrap.css';
import 'font-awesome/css/font-awesome.css';
import 'ionicons/dist/css/ionicons.css';
import 'admin-lte/dist/css/AdminLTE.css';
import 'admin-lte/dist/css/skins/_all-skins.css';
import 'datatables.net-bs/css/dataTables.bootstrap.css';
import 'animate.css/animate.css';
import 'animation.scss';
import 'misc.scss';
import 'balloon-css/balloon.min.css';
import { ApplicationSettings, Products } from './ema/settings';
import 'tiny-mce';


LogManager.setLevel(LogManager.logLevel.debug);

// remove out if you don't want a Promise polyfill (remove also from webpack.config.js)
Bluebird.config({warnings: {wForgottenReturn: false}});

export async function configure(aurelia) {
  const modulesImports = await import(/* webpackChunkName: "init-libs" */ 'main-init');


  if (environment.debug) {
    window.EMA = modulesImports.EMA;
  }

  aurelia.use
    .standardConfiguration()
    .plugin(PLATFORM.moduleName('aurelia-dialog'), (config) => {
      config.useDefaults();
      config.settings.startingZIndex = 1033;
      config.settings.keyboard = false;
      config.cssText += 'ux-dialog-container{display: flex;}ux-dialog-container>div{display: flex;flex: 1 1 auto;justify-content: center;align-items: center;}';
    })
    .plugin(PLATFORM.moduleName('aurelia-i18n'), modulesImports.i18nInit)
    .plugin(PLATFORM.moduleName('aurelia-validation'))
    .feature(PLATFORM.moduleName('resources/index'));

  // Uncomment the line below to enable animation.
  aurelia.use.plugin(PLATFORM.moduleName('aurelia-animator-css'));
  // if the css animator is enabled, add swap-order="after" to all router-view elements

  // Anyone wanting to use HTMLImports to load views, will need to install the following plugin.
  // aurelia.use.plugin(PLATFORM.moduleName('aurelia-html-import-template-loader'));

  if (environment.debug) {
    aurelia.use.developmentLogging();
  } else {
    // LogManager.setLevel(LogManager.logLevel.debug);
  }


  modulesImports.EMA.debug = environment.debug;
  modulesImports.EMA.baseUrl = 'api.php';
  modulesImports.EMA.Auth.UseCaptcha = true;
  modulesImports.EMA.sessionChecker = false;

  if (environment.testing) {
    aurelia.use.plugin(PLATFORM.moduleName('aurelia-testing'));
  }

  const tier0Init = Promise.all([
    modulesImports.ApplicationSettings.init()
  ]);

  const tier1Init = new Promise((resolve) => {
    tier0Init.then(() => {
      Promise.all([
        modulesImports.countryListInit(),
        modulesImports.momentInit(),
        modulesImports.gtagInit()
      ]).then(resolve);
    });
  });

  Promise.all([tier0Init, tier1Init]).then(() => {
    aurelia.start().then(async () => {
      let container = Container.instance;
      modulesImports.metainfoInit();
      modulesImports.aboutModalInit();
      /**
       * @type {AuthService}
       */
      let auth = container.get(AuthService);
      let isLoggedIn = await auth.isLoggedIn();

      if (isLoggedIn) {
        aurelia.setRoot(PLATFORM.moduleName('app', 'backbone'));
      } else {
        if (ApplicationSettings.getProductType() === Products.LINCS && window.location.search !== '?login') {
          aurelia.setRoot(PLATFORM.moduleName('forefront/forefront-app', 'forefront'));
        } else {
          aurelia.setRoot(PLATFORM.moduleName('auth/login', 'backbone'));
        }
      }
    });
  });
}

1 Like

That’s weird. Can you try add this to the top

import { initialize } from 'aurelia-pal-browser';

initialize();

of main.ts?

Yeah, it probably should be refactored to get rid of all those css imports :grinning:

Unfortunately, got the same error.

As I can see from trace, the last call frommain.js was aurelia.start().
So I’ve imported DOM into main.js

import { PLATFORM, DOM } from 'aurelia-pal';

And add a console.log(DOM); just before aurelia.start().


As you can see, all the functions is there.

After I removed manual initialization - got the same output.

I’ve modified the original node_modules/aurelia-loader-webpack/dist/native-modules/aurelia-loader-webpack.js:

Surprisingly, the output of that calls was just an empty object.

1 Like

oh I see. Probably you got some duplicated modules/dependencies. Maybe run npm dedupe or delete node_modules and package-lock.json and do npm i

Little remark/question: have you added a breakpoint on the aurelia.start() line as well? The [i] at the end of the console.log(DOM) means that the content of the variable is evaluated at the moment you watch the details. This still means that the variable can be empty when the console.log is performed.

1 Like

Well, https://yarnpkg.com/en/docs/cli/dedupe/ :grinning:

I’ve removed node_modules and yarn.lock, and install everything again.
Here is the output of au build:

Starting 'clearDist'...
Finished 'clearDist'
Starting 'configureEnvironment'...
Finished 'configureEnvironment'
Starting 'buildWebpack'...
(node:12768) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
Uncaught promise rejection:
Error: Cyclic dependency
    at visit (D:\Work\TRIMS-app\node_modules\toposort\index.js:35:13)
    at visit (D:\Work\TRIMS-app\node_modules\toposort\index.js:53:9)
    at Function.toposort [as array] (D:\Work\TRIMS-app\node_modules\toposort\index.js:22:22)
    at Object.module.exports.dependency (D:\Work\TRIMS-app\node_modules\html-webpack-plugin\lib\chunksorter.js:50:35)
    at HtmlWebpackPlugin.sortChunks (D:\Work\TRIMS-app\node_modules\html-webpack-plugin\index.js:364:35)
    at D:\Work\TRIMS-app\node_modules\html-webpack-plugin\index.js:113:21
    at _next2 (eval at create (D:\Work\TRIMS-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:18:1)
    at _err2 (eval at create (D:\Work\TRIMS-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:32:1)
    at callback (D:\Work\TRIMS-app\node_modules\copy-webpack-plugin\dist\index.js:77:17)
    at D:\Work\TRIMS-app\node_modules\copy-webpack-plugin\dist\index.js:118:24
1 Like

:sweat: can you try degrade toposort version? https://github.com/marcelklehr/toposort/issues/20#issuecomment-333541640

yarn add toposort@1.0.4

Yeap, its a valid output.

@bigopon Still working on that.

Well, no meter what, I am getting another error:
Its quite similar to the previous one

Uncaught promise rejection:
TypeError: Converting circular structure to JSON
    at JSON.stringify (<anonymous>)
    at visit (D:\Work\TRIMS-app\node_modules\toposort\index.js:29:50)
    at visit (D:\Work\TRIMS-app\node_modules\toposort\index.js:47:9)
    at Function.toposort [as array] (D:\Work\TRIMS-app\node_modules\toposort\index.js:22:22)
    at Object.module.exports.dependency (D:\Work\TRIMS-app\node_modules\html-webpack-plugin\lib\chunksorter.js:50:35)
    at HtmlWebpackPlugin.sortChunks (D:\Work\TRIMS-app\node_modules\html-webpack-plugin\index.js:364:35)
    at D:\Work\TRIMS-app\node_modules\html-webpack-plugin\index.js:113:21
    at _next2 (eval at create (D:\Work\TRIMS-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:18:1)
    at _err2 (eval at create (D:\Work\TRIMS-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:32:1)
    at callback (D:\Work\TRIMS-app\node_modules\copy-webpack-plugin\dist\index.js:77:17)
    at D:\Work\TRIMS-app\node_modules\copy-webpack-plugin\dist\index.js:118:24

Here is my webpack config:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackExcludeAssetsPlugin = require('html-webpack-exclude-assets-plugin');
const project = require('./aurelia_project/aurelia.json');
const {AureliaPlugin, ModuleDependenciesPlugin} = require('aurelia-webpack-plugin');
const {ProvidePlugin} = require('webpack');
const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');
const webpack = require('webpack');
const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');


// config helpers:
const ensureArray = (config) => config && (Array.isArray(config) ? config : [config]) || [];
const when = (condition, config, negativeConfig) =>
  condition ? ensureArray(config) : ensureArray(negativeConfig);

// primary config:
const title = 'Loading...';
const outDir = path.resolve(__dirname, project.platform.output);
const srcDir = path.resolve(__dirname, 'src');
const nodeModulesDir = path.resolve(__dirname, 'node_modules');
const baseUrl = '/';


module.exports = ({production, server, extractCss, coverage, analyze, versionInfo} = {}) => {
  const cssRules = [
    {loader: 'css-loader', options: {minimize: production}}
  ];


  const tinyMceStyles = new ExtractTextPlugin({
    filename: 'styles/tiny-mce.css',
    allChunks: true
  });

  const regularStyles = new ExtractTextPlugin({
    filename: production ? 'styles/[name].[hash].css' : 'styles/[id].css',
    allChunks: true
  });

  return ({
    resolve: {
      extensions: ['.js'],
      modules: [srcDir, 'node_modules'],
      alias: {
        'jquery': path.resolve(__dirname, 'node_modules/jquery')
      }
    },
    entry: {
      app: ['aurelia-bootstrapper'],
      vendor: [
        // 'bluebird',
        'element-closest',
        'es7-object-polyfill',
        'ismobilejs',
        'babel-polyfill'
      ]
    },
    mode: production ? 'production' : 'development',
    output: {
      path: outDir,
      publicPath: baseUrl,
      filename: production ? 'js/[name].[chunkhash].bundle.js' : 'js/[name].[hash].bundle.js',
      sourceMapFilename: production ? 'js/[name].[chunkhash].bundle.map' : 'js/[name].[hash].bundle.map',
      chunkFilename: production ? 'js/[name].[chunkhash].chunk.js' : 'js/[name].[hash].chunk.js'
    },
    performance: {hints: false},
    devServer: {
      contentBase: outDir,
      // serve index.html for all 404 (required for push-state)
      historyApiFallback: true
    },
    optimization: {
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            output: {
              comments: false
            }
          }
        })
      ]
    },
    devtool: production ? 'nosources-source-map' : 'cheap-module-eval-source-map',
    module: {
      rules: [
        {
          test: /\.css$/i,
          issuer: path.resolve(__dirname, 'src/tiny-mce.js'),
          use: tinyMceStyles.extract({
            fallback: 'style-loader',
            use: 'css-loader'
          })
        },
        {
          test: /\.scss$/,
          issuer: path.resolve(__dirname, 'src/tiny-mce.js'),
          use: tinyMceStyles.extract({
            fallback: 'style-loader',
            use: ['css-loader', 'sass-loader']
          })
        },
        // CSS required in JS/TS files should use the style-loader that auto-injects it into the website
        // only when the issuer is a .js/.ts file, so the loaders are not applied inside html templates
        {
          test: /\.css$/i,
          issuer: [{not: [{test: /\.html$/i}, path.resolve(__dirname, 'src/tiny-mce.js')]}],
          use: extractCss ? regularStyles.extract({
            fallback: 'style-loader',
            use: cssRules
          }) : ['style-loader', ...cssRules]
        },
        {
          test: /\.css$/i,
          issuer: [{test: /\.html$/i}],
          // CSS required in templates cannot be extracted safely
          // because Aurelia would try to require it again in runtime
          use: cssRules
        },
        {
          test: /\.scss$/,
          use: ['style-loader', 'css-loader', 'sass-loader'],
          // use: regularStyles.extract({
          //   fallback: 'style-loader',
          //   use: ['css-loader', 'sass-loader']
          // }),
          // issuer: /\.[tj]s$/i
          issuer: {
            include: [{test: /\.[tj]s$/i}],
            not: [path.resolve(__dirname, 'src/tiny-mce.js')]
          }
        },
        {
          test: /\.scss$/,
          use: ['css-loader', 'sass-loader'],
          issuer: /\.html?$/i
        },
        {
          test: /\.html$/i,
          loader: 'html-loader',
          options: {
            minimize: true,
            attrs: [
              'a:href',
              'img:src'
            ]
          }
        },
        {
          test: /\.js$/i, loader: 'babel-loader', exclude: nodeModulesDir,
          options: coverage ? {sourceMap: 'inline', plugins: ['istanbul']} : {}
        },
        // { test: /\.json$/i, loader: 'json-loader' },
        // use Bluebird as the global Promise implementation:
        {test: /[\/\\]node_modules[\/\\]bluebird[\/\\].+\.js$/, loader: 'expose-loader?Promise'},
        // embed small images and fonts as Data Urls and larger ones as files:
        {
          test: /\.(png|gif|jpg|cur)$/i,
          loader: 'url-loader',
          options: {limit: 8192, outputPath: 'images'}
        },
        {
          test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/i,
          loader: 'url-loader',
          options: {limit: 10000, mimetype: 'application/font-woff2', outputPath: 'fonts'}
        },
        {
          test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/i,
          loader: 'url-loader',
          options: {limit: 10000, mimetype: 'application/font-woff', outputPath: 'fonts'}
        },
        // load these fonts normally, as files:
        {
          test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/i,
          loader: 'file-loader',
          options: {outputPath: 'fonts'}
        },
        {
          test: /\.worker\.js$/,
          use: [
            { loader: 'worker-loader' },
            { loader: 'babel-loader' }
          ]
        }
      ]
    },
    plugins: [
      new AureliaPlugin(),
      new ProvidePlugin({
        'Promise': 'bluebird'
      }),
      new ProvidePlugin({
        'jQuery': 'jquery',
        '$': 'jquery',
        'moment': 'moment',
        'isMobile': 'ismobilejs'
      }),
      new DuplicatePackageCheckerPlugin(),
      new webpack.IgnorePlugin(/jqvmap\/node_modules\/jquery\/dist\/jquery/),
      new webpack.IgnorePlugin(/^codemirror$/),
      new webpack.DefinePlugin({
        __VERSION__: JSON.stringify(versionInfo)
      }),
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
      new ModuleDependenciesPlugin({
        'aurelia-testing': ['./compile-spy', './view-spy']
      }),
      new CopyWebpackPlugin([
        {from: 'src/locales/', to: 'locales/'}
      ]),
      new CopyWebpackPlugin([
        {
          from: '**/*.json', to: 'locales/modules/country-list',
          context: 'node_modules/@umpirsky/country-list/data/'
        },
        {
          from: '*.svg', to: 'country-flags',
          context: 'node_modules/svg-country-flags/svg'
        },
        {
          from: '**/*.*', to: 'styles/tinymce-skins/',
          context: 'node_modules/tinymce/skins'
        },
        {
          from: '*(css|img|js|sounds)/**/*.*', to: 'file_manager',
          context: 'node_modules/elfinder'
        },
        {
          from: 'main.default.js', to: 'file_manager',
          context: 'node_modules/elfinder'
        },
        {
          from: 'elfinder-mce.html', to: 'file_manager',
          context: 'elfinder'
        },
        {
          from: '**/*.*', to: 'file_manager/themes/Material',
          context: 'node_modules/elfinder-material-theme/Material'
        },
        {
          from: '.trash/.gitignore', to: 'uploads/.trash',
          context: 'elfinder_storage',
          toType: 'dir'
        },
        {
          from: '.gitignore', to: 'uploads',
          context: 'elfinder_storage',
          toType: 'dir'
        }
      ], {debug: false}),
      new HtmlWebpackPlugin({
        template: 'index.ejs',
        minify: production ? {
          removeComments: true,
          collapseWhitespace: true
        } : undefined,
        metadata: {
          // available in index.ejs //
          title, server, baseUrl
        },
        excludeAssets: [/tiny-mce\.css/]
      }),
      new HtmlWebpackExcludeAssetsPlugin(),
      tinyMceStyles,
      new CopyWebpackPlugin([
        {from: 'static/*', flatten: true},
        {from: 'static/.htaccess', to: '.htaccess', toType: 'file'}]),
      ...when(extractCss, regularStyles),
      ...when(analyze, new BundleAnalyzerPlugin())
    ]
  });
};

BTW: I’ve rolled back original lock file. toposort version there is 1.0.7

1 Like

Without knowing much details, I would suggest try a different possible easier approach.

  1. npm i -g aurelia-cli to get latest aurelia-cli.
  2. au new to create a new project, select options to match your existing app.
  3. migrate sources over to the new project.

Make the app run first, then update webpack.config.js bit by bit if you have some custom config.

BTW, latest skeleton does not use Bluebird anymore (it causes few hiccups and performance issue), it now uses promise-polyfill. You need to uncomment a line in webpack.config to support IE11.

2 Likes

@huochunpeng thank you for your input.

Though, your solution may work, but it kind of defeats the purpose - updating the project.

See

There is a lot to configure there.

I am just wondering, is there anyone with the experience in updating the project.

1 Like

If we go back to your original error, the easiest way is to do the equivalent of

npm ls aurelia-pal

to see which dependency is using duplicate aurelia-pal. and then in your webpack config, alias aurelia-pal to a single version:

resolve: {
  alias: {
    'aurelia-pal': path.resolve(__dirname, 'node_modules/aurelia-pal')
  }
}

maybe that’ll help