Error: Cannot access 'CustomElement' before initialization

[bsrdjan]

The standard ES or TS app fails to start.

Steps to reproduce on Darwin 11.4 with node 14.17.0 or 16.3.0. Probably with other node versions too.

$ npx makes aurelia
makes v2.1.5 https://makes.js.org
[makes] Using remote skeleton github:aurelia/new
[makes] Fetching tarball https://codeload.github.com/aurelia/new/tar.gz/master

         #
      ######   xxx
     ########  xxxx   ####         _                  _ _         ____
   x   ########    ########       / \  _   _ _ __ ___| (_) __ _  |___ \
     x  ######  #############    / _ \| | | | '__/ _ \ | |/ _` |   __) |
  xxxxx  ##  ###############    / ___ \ |_| | | |  __/ | | (_| |  / __/
   xxxxx  ###############      /_/   \_\__,_|_|  \___|_|_|\__,_| |_____|
    x ###############  xxx
    ##############  #   xx
 ##############  ######          https://aurelia.io
  ########## x  ########         https://github.com/aurelia
    #####  xxxx   ########       https://twitter.com/aureliaeffect
     #   x  x      ######
                     #

✔ Please name this new project: › test
✔ Would you like to use the default setup or customize your choices? › Default ESNext Aurelia 2 App
[makes] Project test has been created.
✔ Do you want to install npm dependencies now? › Yes, use npm
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated babel-eslint@10.1.0: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142

added 1211 packages, and audited 1212 packages in 23s

76 packages are looking for funding
  run `npm fund` for details

6 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Next time, you can try to create similar project in silent mode:
 npx makes aurelia new-project-name -s jest 

Get Started
cd test
npm start

$ cd test                                                                                               
$ npm start 

> test@0.1.0 start
> webpack serve

ℹ ｢wds｣: Project is running at http://localhost:9000/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/D037732SAPDevelop/src/test
ℹ ｢wds｣: 404s will fallback to /index.html
ℹ ｢wdm｣: wait until bundle finished: /
✖ ｢wdm｣: asset entry.bundle.js 3.99 MiB [emitted] (name: entry)
asset index.html 1.29 KiB [emitted]
orphan modules 41.2 KiB [orphan] 10 modules
runtime modules 1.25 KiB 6 modules
modules by path ./node_modules/@aurelia/ 1.06 MiB 127 modules
modules by path ./node_modules/webpack-dev-server/ 21.2 KiB
  modules by path ./node_modules/webpack-dev-server/client/ 20.9 KiB 10 modules
  modules by path ./node_modules/webpack-dev-server/node_modules/ 296 bytes 2 modules
modules by path ./src/ 1.55 KiB 5 modules
modules by path ./node_modules/html-entities/lib/*.js 61 KiB 5 modules
modules by path ./node_modules/webpack/hot/ 1.58 KiB 3 modules
modules by path ./node_modules/url/ 37.4 KiB 3 modules
modules by path ./node_modules/querystring/*.js 4.51 KiB
  ./node_modules/querystring/index.js 127 bytes [built] [code generated]
  ./node_modules/querystring/decode.js 2.34 KiB [built] [code generated]
  ./node_modules/querystring/encode.js 2.04 KiB [built] [code generated]
7 modules

ERROR in   Error: Cannot access 'CustomElement' before initialization

  - custom-element.js:25 eval
    [.]/[@aurelia]/runtime-html/dist/esm/resources/custom-element.js:25:9

  - au-slot.js:70 eval
    [.]/[@aurelia]/runtime-html/dist/esm/resources/custom-elements/au-slot.js:70:124

  - index.html:320 Object../node_modules/@aurelia/runtime-html/dist/esm/resources/custom-elements/au-slot.js
    /Users/D037732SAPDevelop/src/test/index.html:320:1

  - index.html:684 __webpack_require__
    /Users/D037732SAPDevelop/src/test/index.html:684:41

  - renderer.js:62 eval
    [.]/[@aurelia]/runtime-html/dist/esm/renderer.js:62:95

  - index.html:290 Object../node_modules/@aurelia/runtime-html/dist/esm/renderer.js
    /Users/D037732SAPDevelop/src/test/index.html:290:1

  - index.html:684 __webpack_require__
    /Users/D037732SAPDevelop/src/test/index.html:684:41

  - render-context.js:9 eval
    [.]/[@aurelia]/runtime-html/dist/esm/templating/render-context.js:9:70

  - index.html:360 Object../node_modules/@aurelia/runtime-html/dist/esm/templating/render-context.js
    /Users/D037732SAPDevelop/src/test/index.html:360:1

  - index.html:684 __webpack_require__
    /Users/D037732SAPDevelop/src/test/index.html:684:41

webpack 5.41.0 compiled with 1 error in 3732 ms
ℹ ｢wdm｣: Failed to compile.

[AStoker]

I'm assuming you haven't modified the project at all after initial creation?

[bsrdjan]

No modifications. All steps shown in console log, no actions in between.

[3cp]

Could not reproduce, but I am running webpack 5.41.1. That might fixed the issue, literally same time as your issue :-) https://github.com/webpack/webpack/releases/tag/v5.41.1

[bsrdjan]

Same issue with 5.41.1

[AStoker]

For kicks and giggles, could you try using Yarn? I'm wondering if you have a cached version of some node module saved with NPM that's causing the issue... Could also try clearing your npm cache, that would also test that out.

[bsrdjan]

I use nvm and tried with fresh new installed node versions and with npm cache clean. Just tried yarn and it did not help either. dumber works.

[bsrdjan]

Thanks, this works:

Do you want to install npm dependencies now? › Yes, use yarn

The issue happens if I answer "no" and install packages later. Can be closed as far I am concerned.

[3cp]

Are you using a npm repository proxy such as nexus?

The auto install happens in a process might have no access of your env variable.

[bsrdjan]

No proxies at all. It is "plain" Macbook with corporate setup, but found out following.

The issue occurs when running npx makes in src folder: /Users/SAPDevelop12345/src

When I move the app not working in that folder, to any other folder, it works fine.

npx makes in any other folder works fine too.

Not sure if it is a bug, not necessarily of aurelia, or some strange setting of my Macbook. "src" is not found in env but IT might have done something else.

Moving project files from src to dev "solved" it for me.

[3cp]

Probably webpack resolved wrong location for some npm packages since the parent folder also have node_modules.

[3cp]

If your parent folder installed same aurelia 2 alpha version, the wrong resolution wouldn't cause any trouble. In your case, I am guessing webpack resolved some aurelia 2 core modules to the parent folder which has an older version of alpha?

[bigopon]

I just got hit by this too, and apparently it's a circular dependency issue that recently been introduced. Should be fixed in the next dev version. Thanks @3cp @bsrdjan