Aurelia: A typeError 'Cannot read property 'options' of undefined' in babel-target.js:92:20

[veikkoeeva]

Hi!

I don't know if this is the right place and this the right way to ask for help, but...

I tried to set up this plugin and have errors that seem to have to do something with the Babel version I'm using, but I'm unable to sort it out nor ascertain myself it's not something in my setup. The errors look like as follows

ERROR in TypeError: Cannot read property 'options' of undefined

• babel-target.js:92 Function.getTargetFromModule
  [MultioutputWebpack]/[webpack-babel-multi-target-plugin]/dist/src/babel-target.js:92:20

• babel-target.js:112 Function.getTargetFromEntrypoint
  [MultioutputWebpack]/[webpack-babel-multi-target-plugin]/dist/src/babel-target.js:112:28

• babel-target.js:129 Function.findTarget
  [MultioutputWebpack]/[webpack-babel-multi-target-plugin]/dist/src/babel-target.js:129:32

• targeted.chunk.js:7 TargetedChunk.get target [as target]
  [MultioutputWebpack]/[webpack-babel-multi-target-plugin]/dist/src/targeted.chunk.js:7:55

The project is located at https://github.com/veikkoeeva/MultioutputWebpack and should build with au build (and run with au run).

Maybe, if nothing else, this serves as a food for thoughts for the next version or help someone else too.

[veikkoeeva]

Cross-referencing #14, might be related. Will investigate.

[veikkoeeva]

It appears the problem was solved by adding doNotTarget: [ /node_modules/, nodeModulesDir ], to exclude Node modules from transpilation. I have another problem now, but it appears being something entirely different. I'll close this.

[DanielSchaffer]

@veikkoeeva You most likely shouldn't be excluding node_modules like that. This plugin is intended to load in the highest possible ES level from node_modules packages, and transpile them if necessary. The reason for this is that the main entry point for most packages generally includes pre-transpiled code and polyfills that you'd want excluded from a modern bundle. I'll take a look and see if there's anything obvious.

[veikkoeeva]

@DanielSchaffer Ah, I see. I just updated the Webpack configuration. After excluding those I see errors that tell basically

TypeError: entry.test is not a function
at doNotTarget.doNotTarget.find.entry (C:\projektit\testit\Aurelia\AureliaTest1\node_modules\webpack-babel-multi-target-plugin\dist\src\targeting.plugin.js:258:70)

(that path is the project directory). I do not know then if this problem is caused by excluding the Node directories.

[DanielSchaffer]

Okay. I haven't tested this plugin with Aurelia yet ... but there's also some pretty intricate chunking config in there, so I'm not sure which piece is the problem. I'm going to start by just adding a clean CLI-generated app as an example and go from there.

[veikkoeeva]

@DanielSchaffer OK. :) I noticed I had

 { 'test': /\.tsx?$/,
        use: [
        BabelMultiTargetPlugin.loader(),
        {
          loader: 'ts-loader',
          options: { transpileOnly: true, experimentalWatchApi: true }            
        }],
        **'exclude': [/node_modules/, nodeModulesDir],** 
      },  

Note the part with asterisks. The 'exclude' had superfluous hyphens. After removing them and having
doNotTarget: [ ], exclude: [ ], makes the process go through as much as html-webpack-plugin to produce the result. The previous steps with multi-webpack ended up in ERROR in TypeError: Cannot read property 'options' of undefined though, so no luck yet. I continue debugging here for a while (it's past ten o'clock in the evening) and see if I come up with something. I'm basically permuting options and studying docs as I don't know how to really debug the process (might search for tips later, though).

[DanielSchaffer]

@veikkoeeva I was able to reproduce the error with a clean CLI app, which means that Aurelia is doing something that my plugin hasn't accounted for yet. Given the error, I'm hoping the fix will be relatively straightforward - errors in that part of the code usually just mean that I haven't told it to look for something in the right place yet. Unfortunately, this means that there likely isn't anything you can do with the options to get it working for you immediately. However, I will take a quick look into debugging and see if there's an easy fix right now.

[veikkoeeva]

@DanielSchaffer That is much appreciated. If it's something that requires Aurelia specific questions, I might be able to help or the very least either forward the questions and/or point channels (https://twitter.com/eisenbergeffect et al. seem to be very responsive). The problems might be related to aurelia-webpack-plugin[wiki].

Now that you have noted that, I'm tempted to look at https://github.com/aurelia/webpack-plugin/wiki/AureliaPlugin-options. Aurelia has vNext pending too, which might remove some issues related to this plugin.

[DanielSchaffer]

Okay - try using v2.3.0-alpha.1. You'll need to git rid of any exclusions for node_modules in the plugin config.

[veikkoeeva]

I updated the repo, ran au build and it went through. The step au build produced

ERROR in (webpack)-dev-server/client?babel-target=es6
Module not found: TypeError: Cannot read property 'descriptionFileRoot' of undefined
@ (webpack)-dev-server/client?babel-target=es6 102:17-67
@ multi aurelia-webpack-plugin/runtime/empty-entry?babel-target=es6 aurelia-webpack-plugin/runtime/pal-loader-entry?babel-target=es6 webpack-dev-server/client?babel-target=es6 aurelia-webpack-plugin/runtime/empty-entry?babel-target=es6 aurelia-webpack-plugin/runtime/pal-loader-entry?babel-target=es6 aurelia-bootstrapper?babel-target=es6

ERROR in (webpack)-dev-server/client?babel-target=es5
Module not found: TypeError: Cannot read property 'descriptionFileRoot' of undefined
@ (webpack)-dev-server/client?babel-target=es5 102:17-67
@ multi aurelia-webpack-plugin/runtime/empty-entry?babel-target=es5 aurelia-webpack-plugin/runtime/pal-loader-entry?babel-target=es5 webpack-dev-server/client?babel-target=es5 aurelia-webpack-plugin/runtime/empty-entry?babel-target=es5 aurelia-webpack-plugin/runtime/pal-loader-entry?babel-target=es5 aurelia-bootstrapper?babel-target=es5.

Browser also shows

which seem to indicate towards Aurelia Webpack loader.

[veikkoeeva]

I wonder if this could be solved with fiddling about the URL... Somehow seems too easy (but I don't know the inner workings)... :P

[DanielSchaffer]

Shoot. I’d say try using “modern” and “legacy” as the target keys instead of “es6” and “es5” as a shot in the dark. If that still doesn’t work, I’ll have to take a deeper look into what’s going on later. Unfortunately, I’m out of time for today!

[DanielSchaffer]

Oh, so - that error looks like there’s something that’s somehow letting it target the webpack dev server includes, which I don’t think should be happening. Not sure if that’s a regression or something about the config that Aurelia generates. Try adding /webpack-dev-server/ to the doNotTarget array

[veikkoeeva]

Don't sweat too much. You have been very helpful already. Let's see what comes. :)

<edit: Chaging the target keys didn't fix. At least not those alone, fiddling a bit before going to bed...
<edit 2: Having doNotTarget: [ /webpack-dev-server/ ] didn't change the error output either (will be checking more carefully).

[veikkoeeva]

An intermediary note that didn't get this resolved with a bit extra added effort. Reading https://github.com/aurelia/webpack-plugin/wiki/AureliaPlugin-options I'm eying towards the parts on HTML loading and templating and check those next (have to clear up some other things first).

[veikkoeeva]

There is aurelia/webpack-plugin#159, more explanation at aurelia/webpack-plugin#157. Might affect this too, at least might shed light into some inner behavior if that becomes and issue.

[DanielSchaffer]

@veikkoeeva just took another peek at this again, and I'm still seeing that aurelia-pal-browser error. I'm wondering if perhaps it's missing because the module ID gets changed by webpack-babel-multi-target-plugin? It might end up being aurelia-pal-browser?babelTarget=modern/aurelia-pal-browser?babelTarget=legacy. I might have to chat with the authors and figure out what it's doing - it could be that there isn't a good way to have both of these plugins work together.

[DanielSchaffer]

@veikkoeeva one other thing to try - try setting the normalizeModuleIds property to true (https://github.com/DanielSchaffer/webpack-babel-multi-target-plugin#options-reference) - if my previous comment is accurate, that could help the issue.

[veikkoeeva]

@DanielSchaffer I take a look! I'm currently at https://www.worldwaterweek.org/ so takes a bit time of bake (I probably need to referesh myself with sleep too afterwards). Thanks for coming back with a fresh idea.

[kmaraz]

Hi, I have the same problem in my Angular (custom webpack configuration) app.

[kmaraz]

Here is complete error from my index.html:
`Html Webpack Plugin:

  TypeError: Cannot read property 'options' of undefined
  
  - babel-target.js:92 Function.getTargetFromModule
    [slido-admin]/[webpack-babel-multi-target-plugin]/dist/src/babel-target.js:92:20
  
  - babel-target.js:112 Function.getTargetFromEntrypoint
    [slido-admin]/[webpack-babel-multi-target-plugin]/dist/src/babel-target.js:112:28
  
  - babel-target.js:129 Function.findTarget
    [slido-admin]/[webpack-babel-multi-target-plugin]/dist/src/babel-target.js:129:32
  
  - targeted.chunk.js:7 TargetedChunk.get target [as target]
    [slido-admin]/[webpack-babel-multi-target-plugin]/dist/src/targeted.chunk.js:7:55
  
  - babel.multi.target.html.updater.js:34 
    [slido-admin]/[webpack-babel-multi-target-plugin]/dist/src/babel.multi.target.html.updater.js:34:79
  
  - Array.map
  
  - babel.multi.target.html.updater.js:34 
    [slido-admin]/[webpack-babel-multi-target-plugin]/dist/src/babel.multi.target.html.updater.js:34:44
  
  - Array.forEach
  
  - babel.multi.target.html.updater.js:25 BabelMultiTargetHtmlUpdater.updateScriptTags
    [slido-admin]/[webpack-babel-multi-target-plugin]/dist/src/babel.multi.target.html.updater.js:25:14
  
  - babel.multi.target.html.updater.js:104 BabelMultiTargetHtmlUpdater.
    [slido-admin]/[webpack-babel-multi-target-plugin]/dist/src/babel.multi.target.html.updater.js:104:26
  
  - Generator.next
  
  - babel.multi.target.html.updater.js:7 
    [slido-admin]/[webpack-babel-multi-target-plugin]/dist/src/babel.multi.target.html.updater.js:7:71
  
  - new Promise
  
  - babel.multi.target.html.updater.js:3 __awaiter
    [slido-admin]/[webpack-babel-multi-target-plugin]/dist/src/babel.multi.target.html.updater.js:3:12
  
  - babel.multi.target.html.updater.js:94 
    [slido-admin]/[webpack-babel-multi-target-plugin]/dist/src/babel.multi.target.html.updater.js:94:148
  
  
  - new Promise
  
  
  - Hook.js:154 AsyncSeriesWaterfallHook.lazyCompileHook
    [slido-admin]/[html-webpack-plugin]/[tapable]/lib/Hook.js:154:20
  
  - index.js:673 promisedApplyPluginsAsyncWaterfall
    [slido-admin]/[html-webpack-plugin]/index.js:673:47
  
  - index.js:187 
    [slido-admin]/[html-webpack-plugin]/index.js:187:18
  

`