# Update old aurelia project

**URL:** <https://discourse.aurelia.io/t/update-old-aurelia-project/3379>\
**Category:** Help Requests\
**Created:** [April 8, 2020, 9:35am UTC](https://discourse.aurelia.io/t/update-old-aurelia-project/3379 "2020-04-08T09:35:23Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![indiwine](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/indiwine/32/1042_2.png) [@indiwine](https://discourse.aurelia.io/u/indiwine)\
**Post date:** [April 8, 2020, 9:35am UTC](https://discourse.aurelia.io/t/update-old-aurelia-project/3379/1 "2020-04-08T09:35:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [April 8, 2020, 11:11am UTC](https://discourse.aurelia.io/t/update-old-aurelia-project/3379/2 "2020-04-08T11:11:38Z")

</div>

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 😃

---

<div class="post-metadata">

**Author:** ![mroeling](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/mroeling/32/781_2.png) [@mroeling](https://discourse.aurelia.io/u/mroeling)\
**Post date:** [April 8, 2020, 5:37pm UTC](https://discourse.aurelia.io/t/update-old-aurelia-project/3379/3 "2020-04-08T17:37:30Z")

</div>

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! 🙂

---

<div class="post-metadata">

**Author:** ![indiwine](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/indiwine/32/1042_2.png) [@indiwine](https://discourse.aurelia.io/u/indiwine)\
**Post date:** [April 9, 2020, 9:13am UTC](https://discourse.aurelia.io/t/update-old-aurelia-project/3379/4 "2020-04-09T09:13:58Z")

</div>

Sorry for late reply.  
Guys, thank you for your answers 😀

> [@bigopon](#):
>
> Be careful of what you rant, you may attract an unexpectedly large crowd.

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

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

Without further ado, here is the `yarn outdated` output:

```auto
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:

```auto
 (*) 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:

```auto
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:

 ![image](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/0/09a51c12f9457a9daade4e709a06d58b1c80490d.png)

Any ideas?

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [April 9, 2020, 9:47am UTC](https://discourse.aurelia.io/t/update-old-aurelia-project/3379/5 "2020-04-09T09:47:45Z")

</div>

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`

---

<div class="post-metadata">

**Author:** ![indiwine](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/indiwine/32/1042_2.png) [@indiwine](https://discourse.aurelia.io/u/indiwine)\
**Post date:** [April 9, 2020, 9:55am UTC](https://discourse.aurelia.io/t/update-old-aurelia-project/3379/6 "2020-04-09T09:55:40Z")

</div>

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

 ![image](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/d/da0ec6fba691f2a198172fdcad3f493cff128fa7.png)

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [April 9, 2020, 9:57am UTC](https://discourse.aurelia.io/t/update-old-aurelia-project/3379/7 "2020-04-09T09:57:37Z")

</div>

Maybe share yuor `main.ts`?

---

<div class="post-metadata">

**Author:** ![indiwine](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/indiwine/32/1042_2.png) [@indiwine](https://discourse.aurelia.io/u/indiwine)\
**Post date:** [April 9, 2020, 10:03am UTC](https://discourse.aurelia.io/t/update-old-aurelia-project/3379/8 "2020-04-09T10:03:26Z")

</div>

Sure:

```javascript
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'));
        }
      }
    });
  });
}

```

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [April 9, 2020, 10:10am UTC](https://discourse.aurelia.io/t/update-old-aurelia-project/3379/9 "2020-04-09T10:10:29Z")

</div>

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

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

initialize();

```

of `main.ts`?

---

<div class="post-metadata">

**Author:** ![indiwine](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/indiwine/32/1042_2.png) [@indiwine](https://discourse.aurelia.io/u/indiwine)\
**Post date:** [April 9, 2020, 10:44am UTC](https://discourse.aurelia.io/t/update-old-aurelia-project/3379/10 "2020-04-09T10:44:52Z")

</div>

> [@bigopon](#):
>
> That’s weird.

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

> [@bigopon](#):
>
> add this to the top

Unfortunately, got the same error.

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

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

```

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

 ![image](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/e/e42d633e8f473f4aae2331e937162e206bbb612a.png)  
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`:

 ![image](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/9/9bb92e35eaf3f8620f0768b802095ed46cd9c84b.png)

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

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [April 9, 2020, 10:46am UTC](https://discourse.aurelia.io/t/update-old-aurelia-project/3379/11 "2020-04-09T10:46:52Z")

</div>

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`

---

<div class="post-metadata">

**Author:** ![mroeling](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/mroeling/32/781_2.png) [@mroeling](https://discourse.aurelia.io/u/mroeling)\
**Post date:** [April 9, 2020, 10:57am UTC](https://discourse.aurelia.io/t/update-old-aurelia-project/3379/12 "2020-04-09T10:57:20Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![indiwine](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/indiwine/32/1042_2.png) [@indiwine](https://discourse.aurelia.io/u/indiwine)\
**Post date:** [April 9, 2020, 10:59am UTC](https://discourse.aurelia.io/t/update-old-aurelia-project/3379/13 "2020-04-09T10:59:29Z")

</div>

Well, [https://yarnpkg.com/en/docs/cli/dedupe/](https://yarnpkg.com/en/docs/cli/dedupe/) 😀

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

```nohighlight
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

```

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [April 9, 2020, 11:05am UTC](https://discourse.aurelia.io/t/update-old-aurelia-project/3379/14 "2020-04-09T11:05:26Z")

</div>

😓 can you try degrade toposort version? [https://github.com/marcelklehr/toposort/issues/20#issuecomment-333541640](https://github.com/marcelklehr/toposort/issues/20#issuecomment-333541640)

```auto
yarn add toposort@1.0.4

```

---

<div class="post-metadata">

**Author:** ![indiwine](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/indiwine/32/1042_2.png) [@indiwine](https://discourse.aurelia.io/u/indiwine)\
**Post date:** [April 9, 2020, 11:45am UTC](https://discourse.aurelia.io/t/update-old-aurelia-project/3379/15 "2020-04-09T11:45:25Z")

</div>

Yeap, its a valid output.

@bigopon Still working on that.

---

<div class="post-metadata">

**Author:** ![indiwine](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/indiwine/32/1042_2.png) [@indiwine](https://discourse.aurelia.io/u/indiwine)\
**Post date:** [April 9, 2020, 12:15pm UTC](https://discourse.aurelia.io/t/update-old-aurelia-project/3379/16 "2020-04-09T12:15:33Z")

</div>

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

```nohighlight
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:

```javascript
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())
    ]
  });
};

```

---

<div class="post-metadata">

**Author:** ![indiwine](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/indiwine/32/1042_2.png) [@indiwine](https://discourse.aurelia.io/u/indiwine)\
**Post date:** [April 9, 2020, 12:20pm UTC](https://discourse.aurelia.io/t/update-old-aurelia-project/3379/17 "2020-04-09T12:20:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [April 9, 2020, 12:46pm UTC](https://discourse.aurelia.io/t/update-old-aurelia-project/3379/18 "2020-04-09T12:46:35Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![indiwine](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/indiwine/32/1042_2.png) [@indiwine](https://discourse.aurelia.io/u/indiwine)\
**Post date:** [April 9, 2020, 3:14pm UTC](https://discourse.aurelia.io/t/update-old-aurelia-project/3379/19 "2020-04-09T15:14:35Z")

</div>

@huochunpeng thank you for your input.

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

> [@huochunpeng](#):
>
> update webpack.config.js bit by bit if you have some custom config.

See

> [@indiwine](#):
>
> Here is my webpack config:

There is a lot to configure there.

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

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [April 9, 2020, 10:02pm UTC](https://discourse.aurelia.io/t/update-old-aurelia-project/3379/20 "2020-04-09T22:02:19Z")

</div>

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

```auto
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:

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

```

maybe that’ll help

[Next page](https://discourse.aurelia.io/t/update-old-aurelia-project/3379.md?page=2)