TLDR:与webpack捆绑在一起的Aurelia应用程序无法在浏览器中加载 - 控制台显示错误:can't find module with id: main
。我认为这意味着它无法找到入口点。耗尽的东西尝试。
"gulp": "github:gulpjs/gulp#4.0
,但我想git分支被删除了,所以在它和其他任何npm问题之间,它们都需要更新到"gulp": "4.0"
这是一种寒意 - 除了它然后导致我们去,并且必须开始可怕的npm依赖性解决方案的长列车。错误是:
错误:无法找到ID为:main的模块
在WebpackLoader。 (Qazxswpoi)
如果我理解正确(我不是设置此应用程序的开发人员,并且他已经不在了),则错误中引用的“main”来自https://localhost:44399/dist/app.bundle.js?v=18.11.05&v=QnXnhS1zNjvTNWq1CN7QzBCr2ti1BVIVEjGB_ewbuj0:9296:23中aurelia-app="main"
元素中的<body>
属性:
(参见目录结构的底部)
wwwroot/dist/index.html
价值“主”,我相信应该参考<html>
<head>
<meta charset="utf-8">
<title>Aurelia Navigation Skeleton</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="/">
<!-- imported CSS are concatenated and added automatically -->
</head>
<body aurelia-app="main">
<script type="text/javascript" src="/app.bundle.js"></script><script type="text/javascript" src="/vendor.bundle.js"></script></body>
</html>
:
(我已经尝试将它改为:src/main.ts
,main.ts
,src/main.ts
,src/main
等 - 它们都没有工作甚至改变了错误信息,这让我觉得这不是正确的地方。)
../../src/main.ts
我相当肯定,它没有任何错误 - 因为它在上周末工作正常并且从那以后没有改变。
一个值得注意的事情是我们改变了webpack.config.js中的ModuleDependenciesPlugin部分。我们添加了一个条目:// we want font-awesome to load as soon as possible to show the fa-spinner
import {Aurelia} from 'aurelia-framework'
import environment from './environment';
import {PLATFORM} from 'aurelia-pal';
import * as Bluebird from 'bluebird';
// remove if you don't want a Promise polyfill (remove also from webpack.config.js)
Bluebird.config({ warnings: { wForgottenReturn: false } });
export function configure(aurelia: Aurelia) {
aurelia.use
.standardConfiguration()
.plugin(PLATFORM.moduleName('aurelia-dialog'))
//.feature(PLATFORM.moduleName('resources/index'))
//.plugin(PLATFORM.moduleName('aurelia-ui-virtualization'))
.globalResources(
[
//Converters
PLATFORM.moduleName('converters/decimal-format'),
PLATFORM.moduleName('converters/unit-selection-format'),
PLATFORM.moduleName('converters/sort'),
PLATFORM.moduleName('converters/date-format'),
//Custom Element Registrations
//base-level components (standalone)
//PLATFORM.moduleName('components/custom-elements/table-cell-text-element'),
PLATFORM.moduleName('components/custom-elements/text-div-element'),
PLATFORM.moduleName('components/custom-elements/icon-button-element'),
PLATFORM.moduleName('components/custom-elements/checkbox-div-element'),
PLATFORM.moduleName('components/custom-elements/range-selector-element'),
PLATFORM.moduleName('components/custom-elements/unit-selector-element'),
//mid-level components (groupings/dependent on others)
PLATFORM.moduleName('components/custom-elements/content-header-element'),
PLATFORM.moduleName('components/custom-elements/table-configurable-element'),
PLATFORM.moduleName('components/custom-elements/table-tiered-element'),
PLATFORM.moduleName('components/custom-elements/grid-selector-element'),
//high-level components (groups of mid-level)
PLATFORM.moduleName('components/custom-elements/grid-selector-group-element'),
PLATFORM.moduleName('components/custom-elements/dropdown-select-element'),
PLATFORM.moduleName('components/custom-elements/alert-element'),
//Rate Components
PLATFORM.moduleName('components/custom-elements/base-charge-element'),
PLATFORM.moduleName('components/custom-elements/tiered-rate-element'),
PLATFORM.moduleName('components/custom-elements/tiered-per-unit-charge-element'),
PLATFORM.moduleName('components/custom-elements/rate-component-element'),
PLATFORM.moduleName('components/custom-elements/meter-charge-element')
]);
// Uncomment the line below to enable animation.
// aurelia.use.plugin(PLATFORM.moduleName('aurelia-animator-css'));
// if the css animator is enabled, add swap-order="after" to all router-view elements
// Anyone wanting to use HTMLImports to load views, will need to install the following plugin.
// aurelia.use.plugin(PLATFORM.moduleName('aurelia-html-import-template-loader'));
if (environment.debug) {
aurelia.use.developmentLogging();
}
if (environment.testing) {
aurelia.use.plugin(PLATFORM.moduleName('aurelia-testing'));
}
aurelia.start().then(() => {aurelia.setRoot(PLATFORM.moduleName('app'))});
}
,这是从aurelia-dialog加载自定义组件所必需的(见下文)。此更改最初没有破坏应用程序。我会说,它工作正常一个星期左右?
"aurelia-dialog": ['./aurelia-dialog', './ux-dialog-header', './ux-dialog-body', -dialog-footer', './attach-focus']
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const project = require('./aurelia_project/aurelia.json');
const { AureliaPlugin, ModuleDependenciesPlugin } = require('aurelia-webpack-plugin');
const { ProvidePlugin } = require('webpack');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
// config helpers:
const ensureArray = (config) => config && (Array.isArray(config) ? config : [config]) || [];
const when = (condition, config, negativeConfig) =>
condition ? ensureArray(config) : ensureArray(negativeConfig);
// primary config:
const title = 'Aurelia Navigation Skeleton';
const outDir = path.resolve(__dirname, 'wwwroot/dist');
const srcDir = path.resolve(__dirname, 'src');
const nodeModulesDir = path.resolve(__dirname, 'node_modules');
const baseUrl = '/';
const cssRules = [
{ loader: 'css-loader' },
];
module.exports = ({production, server, extractCss, coverage, analyze} = {}) => ({
resolve: {
extensions: ['.ts', '.js'],
modules: [srcDir, 'node_modules'],
},
entry: {
app: ['aurelia-bootstrapper'],
vendor: ['bluebird'],
},
mode: production ? 'production' : 'development',
output: {
path: outDir,
publicPath: baseUrl,
filename: production ? '[name].[chunkhash].bundle.js' : '[name].bundle.js',
sourceMapFilename: production ? '[name].[chunkhash].bundle.map' : '[name].bundle.map',
chunkFilename: production ? '[name].[chunkhash].chunk.js' : '[name].chunk.js'
},
performance: { hints: false },
devServer: {
contentBase: outDir,
// serve index.html for all 404 (required for push-state)
historyApiFallback: true
},
devtool: 'source-map',
module: {
rules: [
// CSS required in JS/TS files should use the style-loader that auto-injects it into the website
// only when the issuer is a .js/.ts file, so the loaders are not applied inside html templates
{
test: /\.css$/i,
issuer: [{ not: [{ test: /\.html$/i }] }],
use: extractCss ? ExtractTextPlugin.extract({
fallback: 'style-loader',
use: cssRules
}) : ['style-loader', ...cssRules],
},
{
test: /\.css$/i,
issuer: [{ test: /\.html$/i }],
// CSS required in templates cannot be extracted safely
// because Aurelia would try to require it again in runtime
use: cssRules
},
{test: /\.js\.map$/, loader: 'ignore-loader' },
{test: /\.ts\.orig$/, loader: 'ignore-loader' },
{test: /\.html\.orig$/, loader: 'ignore-loader' },
{test: /\.tst$/, loader: 'ignore-loader' },
{ test: /\.html$/i, loader: 'html-loader' },
{ test: /\.tsx?$/, loader: "ts-loader" },
//{ test: /\.json$/i, loader: 'json-loader' },
// use Bluebird as the global Promise implementation:
{ test: /[\/\\]node_modules[\/\\]bluebird[\/\\].+\.js$/, loader: 'expose-loader?Promise' },
// embed small images and fonts as Data Urls and larger ones as files:
{ test: /\.(png|gif|jpg|cur)$/i, loader: 'url-loader', options: { limit: 8192 } },
{ test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff2' } },
{ test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff' } },
// load these fonts normally, as files:
{ test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'file-loader' },
...when(coverage, {
test: /\.[jt]s$/i, loader: 'istanbul-instrumenter-loader',
include: srcDir, exclude: [/\.{spec,test}\.[jt]s$/i],
enforce: 'post', options: { esModules: true },
})
]
},
plugins: [
//new AureliaWebpackPlugin({
// includeSubModules: [{
// moduleId: 'aurelia-dialog'
// },
// ],
// contextMap: {
// 'aurelia-dialog': 'node_modules/aurelia-dialog/dist/commonjs/aurelia-dialog.js'
// }
//}),
new AureliaPlugin({includeAll: "src"}),
new ProvidePlugin({
'Promise': 'bluebird'
}),
new ModuleDependenciesPlugin({
'aurelia-testing': ['./compile-spy', './view-spy'],
"aurelia-dialog": ['./aurelia-dialog', './ux-dialog-header', './ux-dialog-body',
'./ux-dialog-footer', './attach-focus']
}),
new HtmlWebpackPlugin({
template: 'index.ejs',
minify: production ? {
removeComments: true,
collapseWhitespace: true
} : undefined,
metadata: {
// available in index.ejs //
title, server, baseUrl
}
}),
...when(extractCss, new ExtractTextPlugin({
filename: production ? '[contenthash].css' : '[id].css',
allChunks: true
})),
...when(production, new CopyWebpackPlugin([
{ from: 'static/favicon.ico', to: 'favicon.ico' }])),
...when(analyze, new BundleAnalyzerPlugin())
]
});
{
"name": "webui",
"description": "An Aurelia client application.",
"version": "0.1.0",
"repository": {
"type": "???",
"url": "???"
},
"license": "MIT",
"dependencies": {
"@types/plotly.js": "^1.38.3",
"aurelia-animator-css": "^1.0.4",
"aurelia-bootstrapper": "^2.2.0",
"aurelia-dialog": "^1.1.0",
"aurelia-polyfills": "^1.3.0",
"bluebird": "^3.5.1",
"core-decorators": "^0.2.0",
"lit-html": "^1.0.0"
},
"peerDependencies": {},
"devDependencies": {
"@types/bootstrap": "^4.1.2",
"@types/jest": "^22.2.0",
"@types/lodash": "^4.14.105",
"@types/node": "^9.6.23",
"@types/pikaday": "^1.6.3",
"@types/webpack": "^4.1.1",
"ajv": "^6.0.0",
"aspnet-webpack": "^2.0.3",
"aurelia-cli": "^0.35.1",
"aurelia-loader-nodejs": "^1.0.1",
"aurelia-pal-nodejs": "^1.0.0-beta.3.2.0",
"aurelia-protractor-plugin": "^1.0.6",
"aurelia-testing": "^1.0.0-beta.4.0.0",
"aurelia-tools": "^2.0.0",
"aurelia-webpack-plugin": "^3.0.0-rc.1",
"clean-webpack-plugin": "^0.1.19",
"copy-webpack-plugin": "^4.5.1",
"core-js": "^2.5.7",
"css-loader": "^0.28.11",
"cypress": "^3.1.0",
"d3": "^5.1.0",
"del": "^3.0.0",
"dropzone": "^5.4.0",
"expose-loader": "^0.7.5",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.11",
"gulp": "4.0",
"gulp-rename": "^1.2.2",
"gulp-util": "^3.0.8",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.0.6",
"ignore-loader": "^0.1.2",
"intro.js": "^2.9.3",
"istanbul-instrumenter-loader": "^3.0.0",
"iterall": "^1.2.2",
"jest": "^22.4.2",
"jest-cli": "^23.0.0-alpha.0",
"jquery": "^3.3.1",
"jquery-sparkline": "^2.4.0",
"json-loader": "^0.5.7",
"minimatch": "^3.0.4",
"nouislider": "^11.1.0",
"nps": "^5.8.2",
"nps-utils": "^1.5.0",
"numeral": "^2.0.6",
"opn": "^5.3.0",
"pikaday": "^1.7.0",
"plotly.js": "^1.44.2",
"protractor": "^5.3.0",
"style-loader": "^0.20.3",
"through2": "^2.0.3",
"tinymce": "^4.7.11",
"ts-jest": "^22.4.1",
"ts-loader": "^4.0.1",
"ts-node": "^5.0.1",
"typescript": "^2.7.2",
"uglify-js": "^3.3.15",
"url-loader": "^1.0.1",
"vinyl-fs": "^3.0.2",
"wait-on": "^2.1.0",
"webpack": "^4.29.3",
"webpack-bundle-analyzer": "latest",
"webpack-cli": "^3.1.1",
"webpack-dev-server": "^3.1.14",
"webpack-hot-middleware": "^2.21.2",
"wnumb": "^1.1.0",
"wormhole.js": "^0.10.1"
},
"jest": {
"modulePaths": [
"<rootDir>/src",
"<rootDir>/node_modules"
],
"moduleFileExtensions": [
"js",
"json",
"ts"
],
"transform": {
"^.+\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
},
"testRegex": "\\.spec\\.(ts|js)x?$",
"setupFiles": [
"<rootDir>/test/jest-pretest.ts"
],
"testEnvironment": "node",
"collectCoverage": true,
"collectCoverageFrom": [
"src/**/*.{js,ts}",
"!**/*.spec.{js,ts}",
"!**/node_modules/**",
"!**/test/**"
],
"coverageDirectory": "<rootDir>/test/coverage-jest",
"coverageReporters": [
"json",
"lcov",
"text",
"html"
]
},
"engines": {
"node": ">= 6.0.0"
},
"scripts": {
"build": "webpack",
"start": "nps",
"test": "nps test",
"webpack-watch": "webpack --watch --info-verbosity verbose",
"webpack-display-errors": "webpack --display-error-details",
"compile": "tsc -w",
"compile-tests": "tsc -p cypress -w"
},
"main": "dist/app.bundle.js",
"-vs-binding": {
"ProjectOpened": [
"compile-tests",
"compile",
"webpack-watch"
]
}
}
我的同事和我都花了几天时间试图让它弄明白 - 所以任何帮助都表示赞赏。
我已经尝试重置所有更改(包括在添加aurelia-dialog之前返回),尝试更改aurelia-app属性的值。清理并重建了几次。重新启动计算机。重新克隆了存储库....
目录结构是
"name": "WebUIFinal",
"type": "project:application",
"bundler": {
"id": "webpack",
"displayName": "Webpack"
},
"build": {
"options": {
"server": "dev",
"extractCss": "prod",
"coverage": false
}
},
"platform": {
"id": "aspnetcore",
"displayName": "ASP.NET Core",
"port": 8080,
"hmr": false,
"open": false,
"output": "wwwroot/dist"
},
"loader": {
"id": "none",
"displayName": "None"
},
"transpiler": {
"id": "typescript",
"displayName": "TypeScript",
"fileExtension": ".ts"
},
"markupProcessor": {
"id": "minimum",
"displayName": "Minimal Minification",
"fileExtension": ".html"
},
"cssProcessor": {
"id": "none",
"displayName": "None",
"fileExtension": ".css"
},
"editor": {
"id": "none",
"displayName": "None"
},
"unitTestRunner": [
{
"id": "jest",
"displayName": "Jest"
}
],
"integrationTestRunner": {
"id": "protractor",
"displayName": "Protractor"
},
"paths": {
"root": "src",
"resources": "resources",
"elements": "resources/elements",
"attributes": "resources/attributes",
"valueConverters": "resources/value-converters",
"bindingBehaviors": "resources/binding-behaviors"
},
"testFramework": {
"id": "jasmine",
"displayName": "Jasmine"
}
}
编辑:
在调试会话之后,通过将Webpack AureliaPlugin更改为最简单的形式,可以解决WebUIFinal/
├── wwwroot/
│ └── dist/
│ ├── index.html
│ ├── 0.chunk.js
│ ├── ...
│ ├── vendor.bundle.js
│ └── app.bundle.js
├── aurelia-project/
│ └── aurelia.json
├── src/
│ ├── app.ts
│ └── main.ts
├── package.json
└── webpack.config.js
(plus a bunch of other stuff, of course -- this is just what I deemed relevant)
的问题:
module with ID: main not found
由于构建的代码采用Webpack可以轻松理解的格式,因此无需任何配置。
此外,它更容易调试。如果main中的plugins: [
new AureliaPlugin()
]
函数包含在try catch或者承诺的configure
中,那么你可以看到任何问题,而不是静默失败和永远加载的屏幕。
使用最新版本的对话框,您不必再手动包含catch(ex =>)
用于对话框,因为它使用动态导入API,Webpack自然可以理解。所以我建议回到原来的那个,并删除该配置。
ModuleDependenciesPlugin