Webpack bundling issue - Githubissues

tiagogm commented 8 years ago

Hi, I've been trying to use this plugin but I can't seem to get past the same error.

I've seen this error mentioned in other issues, but they all involved jspm, so i'm not quite sure how to fix it with the webpack skeleton.

I'm following the readm, and configuring the plugin the so:

app.js

import config from 'configs/authConfig';

bootstrap(function(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-auth', (baseConfig)=>{
      baseConfig.configure(config);
    })
    ;

  aurelia.start().then(() => aurelia.setRoot('roots/login', document.body));
});

I don't do anything else, (since I get the error just by trying to include the plugin). This is the error I get:

Unhandled rejection Error: Cannot find module './aurelia-auth/authFilter'.
    at eval (webpack:///./src_^\.\/.*$?:115:41)
    at webpackContextResolve (webpack:///./src_^\.\/.*$?:115:89)
    at webpackContext (webpack:///./src_^\.\/.*$?:112:29)
    at eval (webpack:///./~/aurelia-loader-webpack/dist/commonjs/aurelia-loader-webpack.js?:94:49)
    at http://localhost:3000/bundle.js:125:24
    at Function.requireEnsure [as e] (http://localhost:3000/bundle.js:586:29)
    at Function.ensure [as e] (http://localhost:3000/bundle.js:123:33)
    at eval (webpack:///./~/aurelia-loader-webpack/dist/commonjs/aurelia-loader-webpack.js?:93:31)
    at WebpackLoader._import (webpack:///./~/aurelia-loader-webpack/dist/commonjs/aurelia-loader-webpack.js?:88:12)
    at eval (webpack:///./~/aurelia-loader-webpack/dist/commonjs/aurelia-loader-webpack.js?:144:16)

It's looking for the module inside aurelia-auth, but I think the path is wrong? Ideas, please?

Thanks

RWOverdijk commented 8 years ago

@TGMorais We've fixed this is our fork by importing the authFilter in index It's a simple fix to apply.

Update: I've created a quick PR for this repository. Just needs to be merged and built.

paulvanbladel commented 8 years ago

@TGMorais which version of aurelia-auth are you using on npm?

paulvanbladel commented 8 years ago

make sure you install via npm when using webpack: npm install aurelia-auth --save I tested this 2 minutes ago with a fresh installation and it works. Check afterwards package.json and it should contain: "aurelia-auth": "^2.0.1",

tiagogm commented 8 years ago

@RWOverdijk great, thanks! I will take a look at your fork!

@paulvanbladel I'm using "aurelia-auth": "^2.0.1"

Yes it does, I ran npm install aurelia-auth --save, exactly as is was on the readme.

That's odd that it works for you.. are you importing anything else that I'm not on the file that adds the plugin?

Maybe you can put your code somewhere I can pull and try so I can see if I can spot anything different :/

I have however worked around the issue with a little help from someone in gitter, In webpack config I did this:

new AureliaWebpackPlugin({
      includeSubModules: [
        { moduleId: "aurelia-auth" }
      ]
    }),

And now it seems work fine. I'm not super familiar with aurelia yet, so I don't really know why it solves it.

paulvanbladel commented 8 years ago

@TGMorais indeed very strange. Webpack is also pretty new for me. My webpack.config does not containt that IncludeSubModules section. In case you want to compare with my version: https://github.com/paulvanbladel/aurelia-identityserver-aspnetcore

tiagogm commented 8 years ago

@paulvanbladel I pulled your repo and it does indeed work.

Then, I pull a fresh skeleton from the aurelia skeleton repo and just installed aurelia-auth and the problem occurs though.

The only difference I could see is the aurelia-wepack-plugin, aurelia-loader-wepack and aurelia-bootstraper-webpack modules that are different versions. On your repo these are on 0.1.1 and the current skeletons are using 1.0.0. Which according to the changelog are for babel 6 compatibility.

That is the only reason I see for this to happen.

On a related note I also tried @RWOverdijk 's fork and got a similar issue.

Either I'm missing something very obvious or the changes to support babel 6 broke are the cause for this issues...

paulvanbladel commented 8 years ago

Can you please try the very latest version of aurelia-auth ? 2.1.0

tiagogm commented 8 years ago

Which one ? I'm simply pulling from npm using npm install aurelia-auth, I assume the is the latest one no?

martijnboland commented 8 years ago

A little clarification:

includeSubModules is a new option for the aurelia-webpack-plugin to enable loading of extra files in a plugin/module package (apart from the 'main' js file).

For example, just after adding aurelia-auth from npm with 'npm install aurelia-auth --save', aurelia can only resolve './aurelia-auth' but not './aurelia-auth/auth-filter'. With the includeSubModules option you basically tell the webpack plugin to also include all files in the same folder and subfolders as the 'main' entry of the package (in the case of aurelia-auth, this is dist/commonjs/aurelia-auth.js).

The reason this worked without the option is because in the previous versions of the webpack plugin, we simply included everything from packages that had 'aurelia-' in their name (by convention, hardcoded in the plugin). This however proved to be a little bit problematic with packages which names didn't start with 'aurelia-' and packages like aurelia-kendoui-bridge where you probably don't want to include everything in your app bundle.

So, if aurelia needs to load other files from a plugin than the 'main' file, which is the case with aurelia-auth, the includeSubModules option is required.

  plugins: [
    new AureliaWebpackPlugin({
      includeSubModules: [
        { moduleId: 'aurelia-auth' }
      ]
    })
  ],

mbroadst commented 8 years ago

@martijnboland thanks for the clarification here, can you shed some light on why e.g. templating-resources works out of the box? As you can see here it's doing the same thing aurelia-auth (specifically in the case of the SanitizeHTMLValueConverter)

martijnboland commented 8 years ago

@mbroadst 'aurelia-templating-resources' and 'aurelia-templating-router' work because these are already included by the webpack plugin out of the box. https://github.com/aurelia/webpack-plugin/blob/master/index.js#L37-L40

paulvanbladel commented 8 years ago

@martijnboland : Kudos for all your brilliant work on webpack. Love it. I just have one, maybe aesthetic, concern about the way we configure now the inclusion of extra material. In a sense this should be the responsibility of the 'producer' (i.e. the plugin), rather than the 'consumer' (the app using the plugin). The current approach makes things less black box, as a user of the plugin I need to know now that extra files needs to be loaded (in other words i need to read the plugin manual) and I have to adapt webpack config. I'm not hindered by too much low level knowledge about webpack and the aurelia plugin model, but it would be great if the plugin itself could handle this. Thanks again Martijn for all your great work and for helping us here with aurelia-auth !

martijnboland commented 8 years ago

@paulvanbladel completely agree with your concern. I've really struggled with this, but to this point, I can't think of anything better (or less invasive). Webpack is just fundamentally incompatible with Aurelia's loader abstraction and the webpack plugin is basically one huge hack to work around this incompatibility.

jpsala commented 8 years ago

@paulvanbladel, thanks a lot for your work, I'm trying aurelia with webpack and I love it.

Webpack is just fundamentally incompatible with Aurelia's loader abstraction and the webpack plugin is basically one huge hack to work around this

Do you think there will be changes, I mean deep changes somewhere to support webpack?

paulvanbladel commented 8 years ago

@jpsala thanks but the real heavy lifting is the work of maestro @martijnboland ☺

jpsala commented 8 years ago

he, yep, my error, thanks @martijnboland! (and thanks @paulvanbladel for let me know)

rmja commented 8 years ago

includeSubModules does not exist in the most resent version of AureliaWebpackPlugin. The filter should instead be included in package.json as:

"aurelia": {
    "build": {
      "resources": [
        "aurelia-auth/auth-filter"
      ]
    }
  }

kingsleyh commented 7 years ago

Hi - I'm also struggling to get aurelia-auth to work with webpack.

I did npm install aurelia-auth --save then put the snippet posted above by @rmja into package.json

and in my main.ts:

// config for aurelia-auth
import config from './auth-config';

export async function configure(aurelia: Aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-auth', (baseConfig) => {
        baseConfig.configure(config);
   });

But in my app.ts import {FetchConfig} from 'aurelia-auth' is not found when I run npm run build

I get this: Property 'fetchConfig' does not exist on type 'App'.

Any help greatly appreciated. Did I miss something important?

daveyjay commented 7 years ago

I have been unable to get this to run - have tried the various suggestions in the previous posts. I am getting this error with auth-filter when trying to run:

1.bundle.js:81 Uncaught (in promise) Error: Cannot find module './aurelia-auth/auth-filter'.(…)(anonymous function) @ 1.bundle.js:81webpackContextResolve @ 1.bundle.js:81webpackContext @ 1.bundle.js:78(anonymous function) @ bundle.js:378requireEnsure @ bundle.js:64Promise.then._this2.modulesBeingLoaded.(anonymous function) @ bundle.js:377_import @ bundle.js:363loadModule @ bundle.js:421loadAllModules @ bundle.js:408importViewResources @ 1.bundle.js:10209(anonymous function) @ 1.bundle.js:19044 If anyone has been successful in running this sample can you tell us what worked for you?

Thanks in advance

vanbilt commented 7 years ago

I also get this error. I got different ones initially but kept commenting out lines of code to get it to run. This one has me stuck. This is a closed issue though - I don't think anyone is following the closed tickets. Hope you get this figured out. This looks like it's exactly what I need to solve a problem I'm having - but since I can't run the sites I guess I'll just have to keep looking.

MrChriZ commented 7 years ago

Same problem here

RWOverdijk commented 7 years ago

@vanbilt, @MrChriZ, @daveyjay, @kingsleyh In our authentication plugin we do the same thing @rmja suggested. Click here for the code.

It should be a simple fix. https://github.com/paulvanbladel/aurelia-auth/blob/master/package.json#L121

MrChriZ commented 7 years ago

Thanks @RWOverdijk I can't seem to get that fix to work with the 'aurelia-identityserver-aspnetcore' sample I've created a seperate issue here: https://github.com/paulvanbladel/aurelia-identityserver-aspnetcore/issues/3

I tried changing the main package.json, and the package.json in the aurelia-auth module under the node_modules folder but to no avail.

RWOverdijk commented 7 years ago

Hm, well that's odd. Is it bundled as concat? Or not? I have to admit I can't remember what we did to solve this... It has been a while ago since we did. Perhaps you can diff it with our plugin to see if you can find the solution we applied.

MrChriZ commented 7 years ago

I've got @rmja's solution to work in the end. (I was editing the wrong package.json) More details on the issue for the identity server issue I created

IvanSeselja commented 7 years ago

I had the same problem, the only thing that worked for me was loading both plugins (aurelia-authentication and aurelia-authentication/authFilterValueConverter) as ModuleDependenciesPlugin. selection_001

Ryanman commented 6 years ago

To build on @IvanSeselja 's answer, in your webpack.config.js:

Import Module Dependencies along with the Aurelia Webpack plugin: const { AureliaPlugin, ModuleDependenciesPlugin } = require('aurelia-webpack-plugin');

Add a new ModuleDependenciesPlugin to the list of your plugins:

plugins: [
        new webpack.DefinePlugin({ IS_DEV_BUILD: JSON.stringify(isDevBuild) }),
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./wwwroot/dist/vendor-manifest.json')
        }),
        new AureliaPlugin({ aureliaApp: 'boot' }),
        new ModuleDependenciesPlugin({
            'aurelia-auth': ['./auth-filter']
        }),
    ]

paulvanbladel / aurelia-auth

Webpack bundling issue #113