search

DanielSchaffer / webpack-babel-multi-target-plugin

A Webpack plugin that works with Babel to allow differential loading - production deployment of ES2015 builds targeted to modern browsers, with an ES5 fallback for legacy browsers.
153 stars 14 forks source link

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

Open veikkoeeva opened 5 years ago

veikkoeeva commented 5 years ago

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 commented 5 years ago

Cross-referencing https://github.com/DanielSchaffer/webpack-babel-multi-target-plugin/issues/14, might be related. Will investigate.

veikkoeeva commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

@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 commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

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 problemwithaurelia which seem to indicate towards Aurelia Webpack loader.

veikkoeeva commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

DanielSchaffer commented 5 years ago

@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 commented 5 years ago

@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 commented 5 years ago

@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 commented 4 years ago

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

kmaraz commented 4 years ago

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
`