Question

TLDR: Приложение Aurelia , связанное с webpack , не может загрузиться в браузер - консоль показывает ошибку: can't find module with id: main.Я думаю, это означает, что он не может найти точку входа.Не хватает вещей, чтобы попробовать.

Я работаю над приложением Aurelia .
Мы используем webpack для связывания нашего внешнего кода.
Все это прекрасно работало до последних дней.(недавно мы добавили aurelia-dialog , который работал нормально, но мы должны были сделать некоторые обновления npm, чтобы заставить его работать и т. д.)
Было несколько зависимостей npmпроблемы, которые нужно было решить, но я получил их в конце концов ...
Один особенно раздражает тот факт, что gulp раньше включался в наш package.json как "gulp": "github:gulpjs/gulp#4.0, но я думаю, что gitветвь была удалена, так что между этим и какими-либо другими проблемами npm все они должны были быть обновлены до "gulp": "4.0", что является холодным - кроме этого мы затем вынуждены были пойти и запустить ужасную длинную последовательность разрешений зависимостей npm.
Теперь, однако, я застрял в точке, где нет ошибок ни в пакетах npm, ни в процессе компиляции webpack, ни в ошибках tslint. Однако , приложение не работает, и даже в других ветках, которые не были затронуты, также возникают проблемы.

Ошибка:

Ошибка: невозможно найти модуль с идентификатором: main

в WebpackLoader.(https://localhost:44399/dist/app.bundle.js?v=18.11.05&v=QnXnhS1zNjvTNWq1CN7QzBCr2ti1BVIVEjGB_ewbuj0:9435:35)

на шаге (https://localhost:44399/dist/app.bundle.js?v=18.11.05&v=QnXnhS1zNjvTNWq1CN7QzBCr2ti1BVIVEjGB_ewbuj0:9296:23)

Если я правильно понимаю (я не разработчик, который настроил это приложение, и его больше нет рядом)"main", на который ссылается ошибка, происходит из атрибута aurelia-app="main" в элементе <body> в wwwroot/dist/index.html:

(см. внизу структуру директории)

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>

значение "main", я полагаю, должно ссылаться на src/main.ts:

(я пытался изменить его на: main.ts, src/main.ts, src/main, ../../src/main.ts и т. Д. - ни одно из них не сработало и даже не изменило сообщение об ошибке, что заставляет меня чувствовать, что это не подходящее место для поиска.)

main.ts

// 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'))});
}

, который, я вполне уверен, в этом нет ничего плохого - потому что он работал нормально в конце прошлой недели и с тех пор не изменился.

Одна примечательная вещь - это то, что мы изменили ModuleDependenciesPlugin раздел в нашем webpack.config.js . Мы добавили запись: "aurelia-dialog": ['./aurelia-dialog', './ux-dialog-header', './ux-dialog-body', -dialog-footer', './attach-focus'], которая была необходима для получения пользовательского компазагрузка из aurelia-диалога загрузки (см. ниже).Это изменение не сломало приложение изначально.Около недели он работал нормально, я бы сказал?

webpack.config.js

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())
  ]
});

package.json

{
  "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.json

  "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"
  }
}

Мы с коллегой потратили последние пару дней на это, пытаясь выяснить его - поэтому любая помощь приветствуется.

Я попытался сбросить всеизменения (в том числе возвращаясь до того, как был добавлен диалог aurelia), попытались изменить значение атрибута aurelia-app.Очистить и восстановить несколько раз.Перезапустил вычисленное.Повторно клонировал репозиторий ....

Структура каталогов:

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)

bigopon · Answer 1 · 13 февраля 2019

EDIT:

После сеанса отладки проблема с module with ID: main not found была просто решена путем изменения веб-пакета AureliaPlugin в его простейшую форму:

plugins: [
  new AureliaPlugin()
]

Поскольку встроенный код находится вформат, который может легко понять Webpack, без необходимости какой-либо конфигурации.

Кроме того, было бы легче отладить.если функция configure в main обернута в try catch или catch(ex =>) обещания, то есть вы можете увидеть любые возникающие проблемы вместо тихого сбоя и экрана постоянной загрузки.

С последней версией диалогового окна вам больше не нужно вручную включать ModuleDependenciesPlugin для диалогового окна, поскольку он использует API динамического импорта, что естественно понимается Webpack.Поэтому я бы предложил вернуться к исходному и удалить эту конфигурацию.

new ModuleDependenciesPlugin({
    'aurelia-testing': ['./compile-spy', './view-spy'],
    // "aurelia-dialog": ['./aurelia-dialog', './ux-dialog-header', './ux-dialog-body', './ux-dialog-footer', './attach-focus']
})

Webpack: невозможно найти модуль с идентификатором: main - (приложение Aurelia)

index.html

main.ts

webpack.config.js

package.json

aurelia.json

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Webpack: невозможно найти модуль с идентификатором: main - (приложение Aurelia)

index.html

main.ts

webpack.config.js

package.json

aurelia.json

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Похожие темы