Unable to find module with ID even with PLATFORM.moduleName()

[allencoded]

I'm submitting a bug report

• Library Version: 2.0.0-rc.2

• Node Version: 6.2.0

• Webpack webpack 2.2.1

I currently have updated our project to the latest webpack-plugin. It seems I am unable to get aurelia.use.plugin() and aurelia.use.feature() working. If I understood right I need to use PLATFORM.

  import { PLATFORM } from 'aurelia-pal';
...
....
  aurelia.use.feature(PLATFORM.moduleName('aurelia-date-time-format'));
  aurelia.use.feature(PLATFORM.moduleName('aurelia-drop'));
  aurelia.use.plugin(PLATFORM.moduleName('aurelia-animator-css'));
  aurelia.use.plugin(PLATFORM.moduleName('aurelia-dialog'), config => {
    config.useDefaults();
    config.settings.lock = false;
    config.settings.startingZIndex = 1100;
  });
  aurelia.use.plugin(PLATFORM.moduleName('aurelia-froala-editor'));
  aurelia.use.plugin(PLATFORM.moduleName(mod-'aurelia'));
  aurelia.use.plugin(PLATFORM.moduleName('mod-aurelia-bulk-import'));
  aurelia.use.plugin(PLATFORM.moduleName('aurelia-notification'), config => {
    config.configure({
      translate: false,
      notifications: {
        success: 'humane-flatty-success',
        error: 'humane-flatty-error',
        info: 'humane-flatty-info',
      },
    });
  });

When I do that thought it tells me it is unable to find the plugins/features. Example of error message:

app.bc52989….bundle.js:70693 Uncaught (in promise) Error: Unable to find module with ID: aurelia-dialog/ai-dialog

I am not quite sure if I am missing something. I did see something like so:

new ModuleDependenciesPlugin({
      "aurelia-date-time-format": [ "./index", "./date-time-format", ],
      "aurelia-drop": [ "./drop", "./index" ],
    }),

so I also tried that like you see above. Webpack builds fine no errors and finds those deps but aurelia still can't find them.

[jods4]

OK, I can spot 2 problems here.

1) aurelia-dialog/ai-dialog is because your version of aurelia-dialog doesn't declare its internal dependencies to Webpack. You can work around it with ModuleDependenciesPlugin but the most recent release aurelia-dialog@1.0.0-rc.1.0.2 does that. 🎉 So if you upgrade that error should go away without doing anything at all.

2) This is going to bite you next:

aurelia.use.feature(PLATFORM.moduleName('aurelia-date-time-format'));
aurelia.use.feature(PLATFORM.moduleName('aurelia-drop'));

The feature API is not playing nice with Webpack. Make sure you have aureila-framework@1.1.0 or later and use this instead:

aurelia.use.feature(PLATFORM.moduleName('aurelia-date-time-format/index'));
aurelia.use.feature(PLATFORM.moduleName('aurelia-drop/index'));

[allencoded]

So the example was of one plugin not working. But it seems like none of them do. Would I need to use ModuleDependenciesPlugin for all of these?

[jods4]

Possibly, yes.

The Webpack approach is new and not all frameworks have updated accordingly. Eventually, the idea is that what you did should "just work": reference the library from code and ✨

In the meantime, you have to declare libraries dependencies if they don't do it. ModuleDependenciesPlugin is what enables you to do it easily.

If you're lucky, maybe another user of the same library has already done it and you can just copy-paste.

It's usually not hard to add those missing moduleName inside the libs and opening PR can help speed up the process!

[MarcScheib]

First, sorry for "reopening" this one, but think I have a similar problem (error message: Error: Unable to find module with ID: ...). Anyway, I can't fix it with all the solutions from above.

However, I have a different setup: I am writing a plugin for Aurelia based on Typescript (comparable to the validations plugin). In the base directory (where src is), I have a sample directory which is based on the Typescript Webpack skeleton. Now, I want to include the plugin from the outer directory src in the sample app.

I already tried different things in webpack.config.js:

• add ../src to resolve.modules
• add an additional entry point for the plugin
• add the ModuleDependenciesPlugin

All of those ended with the same error message. I am registering / exporting everyhting with PLATFORM. Can you give me any hint on what I am doing wrong?

[jods4]

More details would help. If you added the folder to resolve.modules and used the correct moduleName it should work.

What did you pass to moduleName, from where, where is the target file, what's your webpack config?

[MarcScheib]

The directory structure is as follows:

- src
-- plugin.js
-- element.js
- sample
-- webpack.config.js
-- index.html
-- src
--- ...

The sample app should use the plugin.js. My webpack.config.js looks as follow:

const path = require('path');

const {AureliaPlugin} = require('aurelia-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

const srcDir = path.resolve(__dirname, 'src');
const nodeModulesDir = path.resolve(__dirname, 'node_modules');
const pluginSrcDir = path.resolve(__dirname, '../src');

module.exports = {
  resolve: {
    extensions: ['.ts', '.js'],
    modules: [srcDir, nodeModulesDir, pluginSrcDir]
  },
  entry: {
    app: ['aurelia-bootstrapper']
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    contentBase: './dist'
  },
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: 'html-loader'
      },
      {
        test: /\.tsx?$/,
        use: 'awesome-typescript-loader',
        exclude: nodeModulesDir
      }
    ]
  },
  plugins: [
    new AureliaPlugin(),
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      template: 'index.html'
    })
  ]
};

I am registering the element.js (a custom element) with frameworkConfig.globalResources(PLATFORM.moduleName('./element')) and I am including the whole plugin in the sample app with aurelia.use.plugin(PLATFORM.moduleName('plugin'));.

Any more information needed? If you are interested, I can provide you a repository link if you want to check it yourself and you can't find any mistake above.

[krynium]

Exactly same problem here. Anyone up to the solutions yet.

[krynium]

I found a solution that worked. aurelia.use.feature(PLATFORM.moduleName("app/behaviors/index")); Watch out the index. It is required. and for the configuration which is index.ts or js

`import { PLATFORM, FrameworkConfiguration}from "aurelia-framework";

export function configure(config:FrameworkConfiguration) //config, aurelia lies within config object
{ 
    config.aurelia.use.globalResources(PLATFORM.moduleName("./placeholder-behavior"));

}

[MarcScheib]

Edit: Btw. I think config.aurelia.use is the same as config.

I get a webpack error as soon as I add anything to aurelia.use.plugin(PLATFORM.moduleName('plugin')) saying the module is not found:

ERROR in ./src/main.ts
Module not found: Error: Can't resolve 'plugin/element' in 'C:\xyz\sample\src'
 @ ./src/main.ts
 @ ./node_modules/aurelia-webpack-plugin/dist/aurelia-entry.js
 @ multi aurelia-webpack-plugin/dist/aurelia-entry aurelia-polyfills aurelia-loader-webpack (webpack)-dev-server/client?http://localhost:8080 aurelia-bootstrapper

[MarcScheib]

Any further ideas? I created a small repo which shows the problem: https://github.com/MarcScheib/aurelia-plugin-sample

[jods4]

@MarcScheib your use case is documented here: https://github.com/aurelia/webpack-plugin/wiki/Debugging-missing-modules#using-webpack-alias-config

[MarcScheib]

EDIT: Just tried to rename aurelia-plugin-sample.ts to index.ts. Now, it is working. How comes it is really needed to be called index?

@jods4 Thank you for that link, didn't know this repo maintains the wiki. Perhaps you can mention it in the README.md Unfortunately, it is not working. I added this:

    alias: {
      'aurelia-plugin-sample': path.resolve('../src'),
      'aurelia-plugin-sample$': path.resolve('../src/aurelia-plugin-sample.ts'),
    }

Now, I get the following during bundling already:

ERROR in ./src/main.ts
Module not found: Error: Can't resolve 'aurelia-plugin-sample' in 'C:\....\aurelia-plugin-sample\sample\src'
 @ ./src/main.ts
 @ ./node_modules/aurelia-webpack-plugin/dist/aurelia-entry.js
 @ multi aurelia-webpack-plugin/dist/aurelia-entry aurelia-polyfills aurelia-loader-webpack aurelia-bootstrapper

[jods4]

I have looked at your repo and for me it seems to build alright?

  resolve: {
    extensions: ['.ts', '.js'],
    modules: [srcDir, nodeModulesDir],
    alias: {
      'aurelia-plugin-sample': path.resolve('../src'),
      'aurelia-plugin-sample$': path.resolve('../src/index.ts'),
    }
  },

The reason behind all that is that Aurelia .plugin() expects a folder/package name, not a file. Using .plugin('aurelia-plugin-sample') when aurelia-plugin-sample is a file is not going to work when Aurelia tries to load any resource relative to that.

This is Aurelia's history... that design predates Webpack and there's nothing I can do to fix it in the Webpack plugin.

[MarcScheib]

@jods4 yes, I edited my post above afterwards I found out it works with index.ts. Thank you for the explanation.

[mreiche]

The solution provided here: https://github.com/aurelia/webpack-plugin/wiki/Debugging-missing-modules#using-webpack-alias-config doesn't work for me and I don't understand why.

I created an webpack alias for my component:

resolve: {
        extensions: ['.js'],
        modules: [srcDir, 'node_modules'],
        /**
         * Webpack is unable to find services modules
         * @see https://github.com/aurelia/webpack-plugin/wiki/Debugging-missing-modules#using-webpack-alias-config
         */
        alias: {
            'i18NextFeature': path.resolve(srcDir,'../plugins/i18n'),
            'i18NextFeature$': path.resolve(srcDir,'../plugins/i18n/index.js'),
        }
    },

I had to move "plugins" outside of "src". This seems to be important, because otherwise, the alias will be ignored and the real package name is used (plugins/i18n).

Output of webpack.js --display-modules | grep i18Next

[i18NextFeature/index] ./plugins/i18n/index.js + 1 modules 26.1 KiB {0} [built]

Aurelia setup:

aurelia.use
        .standardConfiguration()
        .developmentLogging()
        /**
         * i18NextFeature -> Webpack alias
         */
        .feature(PLATFORM.moduleName('i18NextFeature'))

Runtime exception:

webpack-internal:///./node_modules/bluebird/js/browser/bluebird.js?f684:4931 Error: Unable to find module with ID: i18NextFeature/index
    at WebpackLoader.eval (webpack-internal:///./node_modules/aurelia-loader-webpack/dist/native-modules/aurelia-loader-webpack.js:204:35)

I'm using

• aurelia-loader-webpack@2.2.1
• aurelia-webpack-plugin@3.0.0

[bigopon]

@mreiche What is your webpack version?

[jods4]

@mreiche When using .feature() be sure to include /index when using Webpack. This caveat is pointed out in the note here: https://github.com/aurelia/webpack-plugin/wiki/Managing-dependencies#platformmodulename