我们正在更新 webpack 以使用版本 4(当前使用 3.8.1),但我们遇到了这个错误:
Unable to find module with ID: my-app
这是引导文件:
bootstrap(async (aurelia: Aurelia) => {
aurelia.use
.standardConfiguration()
.plugin(PLATFORM.moduleName('aurelia-dialog'), config => {
config.useDefaults();
config.settings.startingZIndex = 2000;
})
.plugin(PLATFORM.moduleName('aurelia-validation'), config => {
config.customValidator(AjvValidator);
});
if (debugMode) {
aurelia.use.developmentLogging();
}
await aurelia.start();
await aurelia.setRoot(PLATFORM.moduleName('my-app'), document.getElementById('root'));
});
目录结构为
src -|
|- ...directories (views, repositories, etc)
|- bootstrap.ts
|- my-app.html
|- my-app.ts
如果我尝试将my-app
设置为目录(包含index.ts
和index.html
文件),则错误会有所变化:
Unable to find module with ID: my-app.html
我尝试使用getViewStrategy
指向index.html
但没有奏效。
如果在引导代码中,我更改为 PLATFORM.moduleName('my-app/index')
,则错误变为:
Unable to find module with ID: my-app/index
在这种情况下,正确的设置是什么?
附加信息:
- 我们正在使用 aurelia-webpack-plugin@3.0.0(NPM 上的最新版本)
- 这是启动命令:
webpack-dev-server --config webpack.dev.config.js
,构建命令中也会发生错误
这是基本的 webpack 配置:
module.exports = (options) => ({
context: path.resolve(__dirname, 'src'),
mode: options.mode,
entry: [
'regenerator-runtime/runtime',
'reflect-metadata',
'babel-polyfill',
'event-source-polyfill',
`./scss/main-${options.product}.scss`,
`./bootstrap-${options.product}.ts`
],
output: Object.assign({
sourceMapFilename: '[file].map'
}, options.output),
module: {
rules: [
{
enforce: 'pre',
test: /.tsx?$/,
loader: 'source-map-loader'
},
{
test: /.scss$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: () => {
return [
require('autoprefixer')({
browsers: ['> 5%', 'last 2 versions']
})
];
}
}
},
'sass-loader'
]
},
{
test: /.tsx?$/,
use: ['babel-loader', 'ts-loader']
},
{
test: /.html$/,
use: options.product === PRODUCTS.styleguide.name ? ['raw-loader', 'highlightjs-loader'] : ['raw-loader']
},
{
test: /.(svg|png|ico)$/,
exclude: /node_modules/,
use: [
{
loader: 'file-loader',
options: {
hash: 'sha512',
digest: 'hex',
name: options.imageNamePattern
}
},
{
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true,
optipng: {
optimizationLevel: 7
},
gifsicle: {
interlaced: false
},
mozjpeg: {
bypassOnDebug: true
}
}
}
]
},
{
test: /.(woff|woff2)$/,
loader: 'url-loader?limit=100000'
}
]
},
plugins: options.plugins.concat([
new AureliaPlugin({aureliaApp: undefined}/* {aureliaApp: undefined, includeAll: 'src'} */),
// To strip all locales except “en”
new MomentLocalesPlugin(),
new webpack.IgnorePlugin(/regenerator|nodent|js-beautify/, /ajv/),
new webpack.ProvidePlugin({
// make fetch available
fetch: 'exports-loader?self.fetch!whatwg-fetch'
}),
// Always expose NODE_ENV to webpack, in order to use `process.env.NODE_ENV`
// inside your code for any environment checks; UglifyJS will automatically
// drop any unreachable code.
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV)
}
})
]),
resolve: {
alias: {
ajv: path.join(__dirname, 'node_modules', 'ajv', 'dist', 'ajv.bundle.js'),
pikaday: path.join(__dirname, 'node_modules', 'pikaday', 'pikaday.js'),
'moment-timezone': path.join(
__dirname,
'node_modules',
'moment-timezone',
'builds',
'moment-timezone-with-data.js'
),
'raven-js': path.join(
__dirname,
'node_modules',
'raven-js',
'dist',
'raven.js'
)
},
extensions: ['.ts', '.js', '.scss', '.html'],
modules: [srcDir, 'node_modules']
},
devtool: options.devtool,
target: 'web', // Make web variables accessible to webpack, e.g. window
performance: options.performance || {},
optimization: {
namedModules: true,
splitChunks: {
name: 'vendor',
minChunks: 2
}
}
})
感觉就像您正在以 webpack 无法解析 my-app 的方式别名/配置 root/baseUrl?你能环顾四周看看是否有这样的配置吗?
我遇到了同样的问题。对我来说,这是因为我在本地安装了插件,使用 npm install/path。发布插件后,我能够正常使用它,如文档中所述。