aurelia / loader-webpack Goto Github PK
View Code? Open in Web Editor NEWAn implementation of Aurelia's loader interface to enable webpack.
License: MIT License
An implementation of Aurelia's loader interface to enable webpack.
License: MIT License
I'm submitting a bug report
Typings are specified in package.json but they aren't there in the NPM package.
I'm submitting a bug report
Please tell us about your environment:
Operating System:
Windows 10
Node Version:
9.7.1
Browser:
all (tested on Chrome 64 | Firefox 58)
Language:
TypeScript 2.2.2
Current behavior:
Hot module replacement of TypeScript source code doesn't work with Aurelia modules that have been split to a separate file using PLATFORM.modulesName(...)
overload with chunk parameter, e.g. PLATFORM.moduleName(/* module */ '../counter/counter', /* chunk */ 'counter')
. Removing the second argument ('counter'
) allows HMR to work normally.
To reproduce:
Create a new aurelia application using Microsoft's SpaTemplates: dotnet new aurelia
. You may need to install the templates first using dotnet new -i "Microsoft.AspNetCore.SpaTemplates::*"
. After the project is created, npm install
dependencies.
Make one change in app.ts
, modify line 20 to: moduleId: PLATFORM.moduleName('../counter/counter', 'counter'),
, i.e. add the chunk name argument.
Run the application with HMR. Load counter page and click on the increment button to see it add 1 to counter. Now change code in counter.ts
from this.currentCount += 1;
to this.currentCount += 10;
and save changes. HMR kicks in and does something, but falls short on actually updating the application. Click on the increment button and see that it is still adding only 1, not 10.
Changes in TypeScript source code should be reflected in the running application through HMR. Change to the increment code should affect the result from clicking on the increment button.
I wan't to develop modules using code splitting and with HMR enabled.
module.hot.accept(asyncModuleId, () => {});
module.hot.accept(asyncModuleId, () => this.hmrContext.handleModuleChange(moduleId, module.hot));
I've not contributed to Aurelia, but here's a PR on my fork for the change that appears to fix this issue: jussimattila#1
I'm submitting a bug report
Please tell us about your environment:
Current behavior:
Aurelia currently only prepends special runtime files to the first entry
defined in your Webpack config file.
'aurelia-webpack-plugin/runtime/empty-entry',
'aurelia-webpack-plugin/runtime/pal-loader-entry',
Snippet from node_modules\aurelia-webpack-plugin\dist\AureliaPlugin.js
addEntry(options, modules) {
let webpackEntry = options.entry;
let entries = Array.isArray(modules) ? modules : [modules];
if (typeof webpackEntry == "object" && !Array.isArray(webpackEntry)) {
// There are multiple entries defined in the config
// Unless there was a particular configuration, we modify the first one
// (note that JS enumerates props in the same order they were declared)
// Modifying the first one only plays nice with the common pattern
// `entry: { main, vendor }` some people use.
let ks = this.options.entry || Object.keys(webpackEntry)[0];
if (!Array.isArray(ks)) {
ks = [ks];
}
ks.forEach(k => {
webpackEntry[k] = entries.concat(webpackEntry[k])
});
} else {
options.entry = entries.concat(webpackEntry);
}
}
Before Webpack 4, the fix/workaround above probably made sense. However, since vendoring is not handled in entry
anymore, I think we can remove this without much fuss. I think ultimately it would help Aurelia be more predictable.
Making this change would require a major version bump as it breaks / changes behaviour.
addEntry(options, modules) {
let webpackEntry = options.entry;
let entries = Array.isArray(modules) ? modules : [modules];
if (typeof webpackEntry == "object" && !Array.isArray(webpackEntry)) {
for (let k in webpackEntry) {
if (!webpackEntry.hasOwnProperty(k)) {
continue;
}
let entry = webpackEntry[k];
if (!Array.isArray(entry)) {
entry = [entry];
}
webpackEntry[k] = entries.concat(entry)
}
} else {
options.entry = entries.concat(webpackEntry);
}
}
I'm submitting a bug report
Please tell us about your environment:
Operating System:
Windows 10
Node Version:
16.16.0
NPM Version:
9.3.1
JSPM OR Webpack AND Version
webpack: 4.46.0
webpack-cli: 4.10.0
webpack-dev-server 3.11.3
Browser:
all
Language:
js
Current behavior:
I am in the process of updating webpack from v2 to v4 to alleviate security issues found by a blackduck scan.
when running webpack serve
, I am getting this error:
ERROR in ./node_modules/aurelia-bootstrapper-webpack/node_modules/aurelia-loader-webpack/dist/native-modules/aurelia-loader-webpack.js
Module not found: Error: Can't resolve 'aurelia-loader-context' in 'C:\Users\bxc20\Desktop\VS\aspice\aspice-web-admin\Admin\node_modules\aurelia-bootstrapper-webpack\node_modules\aurelia-loader-webpack\dist\native-modules'
@ ./node_modules/aurelia-bootstrapper-webpack/node_modules/aurelia-loader-webpack/dist/native-modules/aurelia-loader-webpack.js 134:23-64
@ ./node_modules/aurelia-bootstrapper-webpack/dist/native-modules/aurelia-bootstrapper-webpack.js
@ multi aurelia-webpack-plugin/runtime/empty-entry aurelia-webpack-plugin/runtime/pal-loader-entry aurelia-bootstrapper aurelia-bootstrapper-webpack aurelia-polyfills aurelia-pal aurelia-pal-browser regenerator-runtime whatwg-fetch
ERROR in ./node_modules/aurelia-webpack-plugin/runtime/empty-entry.js
Module not found: Error: Can't resolve 'main' in 'C:\Users\bxc20\Desktop\VS\aspice\aspice-web-admin\Admin\node_modules\aurelia-webpack-plugin\runtime'
@ ./node_modules/aurelia-webpack-plugin/runtime/empty-entry.js
@ multi aurelia-webpack-plugin/runtime/empty-entry aurelia-webpack-plugin/runtime/pal-loader-entry ./src/main`
My package.json looks like this:
{
"name": "aurelia-webpack-admin",
"version": "2.0.0",
"description": "Administrative application for managing Acuity IPS applications.",
"scripts": {
"test": "cross-env BABEL_ENV=node NODE_ENV=test ./node_modules/karma/bin/karma start test/karma.conf.js",
"start": "npm run server:dev",
"starts": "npm run server:devs",
"webdriver:stop": "webdriver-manager stop",
"webdriver:update": "webdriver-manager update",
"webdriver:start": "webdriver-manager start",
"protractor:e2e": "protractor ./test/conf",
"server:dev": "cross-env NODE_ENV=production webpack serve --history-api-fallback --watch-content-base --content-base src/",
"server:devs": "cross-env NODE_ENV=development webpack serve --history-api-fallback --watch-content-base --content-base src/ --https",
"build:dev": "cross-env NODE_ENV=development webpack",
"build:prod": "cross-env NODE_ENV=production webpack"
},
"devDependencies": {
"@babel/core": "^7.22.5",
"@babel/polyfill": "^7.12.1",
"@babel/preset-env": "^7.22.5",
"aurelia-hot-module-reload": "0.1.0",
"aurelia-protractor-plugin": "1.0.1",
"aurelia-webpack-plugin": "4.0.0",
"babel-loader": "8.2.5",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-es2017": "^6.16.0",
"babel-register": "^6.26.0",
"concurrently": "^7.0.0",
"copy-webpack-plugin": "^4.0.1",
"cross-env": "^7.0.3",
"css-loader": "^0.28.0",
"file-loader": "^2.0.0",
"hawk": "^7.1.2",
"html-loader": "^0.5.0",
"html-webpack-plugin": "^3.1.0",
"jasmine-core": "^3.10.1",
"jasmine-reporters": "^2.3.0",
"karma": "^6.4.2",
"karma-chrome-launcher": "^3.2.0",
"karma-jasmine": "^5.1.0",
"karma-phantomjs-launcher": "^1.0.4",
"karma-sourcemap-loader": "^0.4.0",
"karma-webpack": "4.0.2",
"less": "^3.9.0",
"less-loader": "^4.0.3",
"mock-json-api": "^0.2.7",
"pem": "^1.9.4",
"protractor": "^7.0.0",
"protractor-fail-fast": "^3.0.2",
"raw-loader": "^0.5.1",
"redux-logger": "^3.0.6",
"request": "^2.88.2",
"request-json": "^0.6.2",
"style-loader": "^0.13.1",
"wait-on": "^6.0.0",
"webdriver-manager": "^11.1.1",
"webpack": "4.46.0",
"webpack-cli": "4.10.0",
"webpack-dev-server": "3.11.3"
},
"dependencies": {
"aurelia-bootstrapper": "^2.4.0",
"aurelia-bootstrapper-webpack": "^1.1.0",
"aurelia-event-aggregator": "1.0.1",
"aurelia-fetch-client": "1.4.0",
"aurelia-framework": "1.4.1",
"aurelia-history-browser": "1.2.0",
"aurelia-http-client": "1.3.0",
"aurelia-loader": "^1.0.2",
"aurelia-loader-webpack": "2.2.5",
"aurelia-logging-console": "1.0.0",
"aurelia-pal": "^1.8.2",
"aurelia-pal-browser": "1.8.0",
"aurelia-polyfills": "1.3.0",
"aurelia-route-recognizer": "1.2.0",
"aurelia-router": "1.5.0",
"aurelia-templating-binding": "1.4.1",
"aurelia-templating-resources": "1.6.0",
"aurelia-templating-router": "1.3.1",
"aurelia-validation": "1.1.2",
"copy-webpack-plugin": "4.2.3",
"detect-browser": "^3.0.1",
"es6-promise-promise": "^1.0.0",
"flatpickr": "~4.4.2",
"json-loader": "^0.5.7",
"leaflet": "1.0.2",
"leaflet-draw": "0.4.9",
"moment": "^2.29.4",
"redux": "^4.0.5",
"redux-thunk": "^2.4.2",
"whatwg-fetch": "^2.0.2"
}
}
My main.js looks like:
import env from 'env';
import ConfigService from './services/config-service';
import { login, authenticateUser, getCachedUser } from './application/auth';
import '../styles/styles.less';
import { detectBrowser } from './util/browser-detection';
import { Aurelia } from 'aurelia-framework';
import { PLATFORM } from "aurelia-pal";
import {bootstrap} from 'aurelia-bootstrapper-webpack';
import { WebpackLoader } from 'aurelia-loader-webpack';
require('!style-loader!css-loader!leaflet-draw/dist/leaflet.draw.css');
export function configure(aurelia) {
function startApp(config, user) {
config.user = user;
bootstrap(async () => {
aurelia.use.standardConfiguration()
.plugin('aurelia-validation');
if (env.debug) aurelia.use.developmentLogging();
aurelia.loader.registerLoader(WebpackLoader)
await aurelia.start()
aurelia.setRoot(PLATFORM.moduleName('/src/main.js'));
})
}
let testUser = {
userName: '[email protected]',
profile: {}
};
this.browser = detectBrowser();
ConfigService.getConfig().then(config => {
if (!config.testing && this.browser.name !== 'ie') {
authenticateUser(config).then(user => {
if (user) {
startApp(config, user);
} else {
login(config);
}
}).catch(err => console.log('Main:Error with authentication', err));
} else {
startApp(config, testUser);
}
}).catch(err => console.log('Error with config file', err));
}
My webpack.config.js looks like:
// The plugin that loads your source code in Aurelia.
const { AureliaPlugin } = require('aurelia-webpack-plugin');
// This is siteActions node tool to resolve paths.
const path = require('path');
// We need this to use the CommonsChunkPlugin.
const webpack = require('webpack');
// The plugin that adds the script tags to our index.html
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ENV = process.env.NODE_ENV && process.env.NODE_ENV.toLowerCase() || 'development';
const project = require('./package.json');
// basic configuration:
const title = 'Acuity IPS Admin';
const baseUrl = '/';
const rootDir = path.resolve();
const srcDir = path.resolve('src');
const outDir = path.resolve(__dirname, 'dist');
const bootstrap = [
'aurelia-bootstrapper',
'aurelia-bootstrapper-webpack',
'aurelia-polyfills',
'aurelia-pal',
'aurelia-pal-browser',
'regenerator-runtime',
'whatwg-fetch'
];
const vendor = [
'leaflet',
'leaflet-draw',
'moment',
'flatpickr',
'redux',
'redux-thunk',
'redux-logger'
];
const aurelia = Object.keys(project.dependencies).filter(dep => dep.startsWith('aurelia-'));
console.log(aurelia)
const config = {
// Sets mode as per v4 migration
mode: ENV,
devtool: 'inline-source-map',
performance: {hints: false},
entry: {
'main': './src/main',
'bootstrap': bootstrap,
'aurelia': aurelia,
'vendor': vendor
},
resolve: {
alias: {
env: path.join(__dirname, 'src/config/env-dev.js')
}
},
output: {
//This is the folder where our packed app will be after we run webpack.
publicPath: '/',
path: outDir,
filename: 'scripts/[name].[hash].bundle.js',
sourceMapFilename: 'scripts/[name].[hash].map',
chunkFilename: 'scripts/[name].[id].[hash].chunk.js'
},
module: {
// Loaders is changed to rules in v4 migration
rules: [
//This loader runs babel for every js file so the files are transpiled to ES5 javascript.
//NOTE: Additional Babel settings are in the .babelrc file
{
test: /\.js?$/,
exclude: [/node_modules/, path.resolve('./**/*.spec.js')],
loader: "babel-loader",
options: {
code: true,
rootMode: 'upward',
presets: ['@babel/preset-env']
}
},
//This loader reads our html templates that are referenced and bundles them with our javascript.
{test: /\.html$/, exclude: [/node_modules/, path.resolve('src/index.html')], loader: 'html-loader'},
// LESS and CSS files
{test: /\.css$/, exclude: /node_modules/,
loader: 'style-loader!css-loader?-minimize'},
{test: /\.less$/, exclude: /node_modules/,
loader: "style-loader!css-loader?-minimize!less-loader"},
// File loader for supporting images, for example, in CSS files.
{test: /\.(png|gif|jpg|svg)$/, loader: "file-loader?name=/images/[name].[ext]"}
],
},
// Added in wbpack v4 migration
optimization: {
splitChunks: {
chunks: 'all'
}
},
plugins: [
new webpack.ProvidePlugin({
Promise: 'es6-promise-promise'
}),
//The Aurelia Plugin.
new AureliaPlugin(),
// REMOVE for v4 migration
// This is what will create siteActions separate bundle for the libs under 'aurelia'
// in our entry section.
// new webpack.optimization.splitChunks({
// name: ['bootstrap', 'aurelia', 'vendor'].reverse()
// }),
// This plugin will add our bundles to the html file and copy it
// to the build folder.
new HtmlWebpackPlugin({
template: 'index.html',
chunksSortMode: 'auto'
}),
new CopyWebpackPlugin([
// Copy directory contents to {output}/to/directory/
//{ from: 'assets', to: 'assets' },
{from: 'src/config', to: 'config'},
//{from: 'web.config', to: 'web.config'}
])
],
node: {
fs: "empty"
},
//Development Server Settings
devServer: {
port: 8080
}
}
//DEVELOPMENT BUILD SETTINGS
//TODO: split webpack configs into development and production files?
if (ENV === 'development') {
//Add development build specific changes
}
//PRODUCTION BUILD SETTINGS
if (ENV === 'production') {
// config.devtool = 'cheap-module-source-map';
//
config.resolve = {
alias: {
env: path.join(__dirname, 'src/config/env-prod.js')
}
};
//
// //Add any additional PROD or QA plugins
// config.plugins.push(
// new webpack.optimize.UglifyJsPlugin({
// minimize: true,
// sourceMap: config.devtool && (config.devtool.indexOf("sourcemap") >= 0 || config.devtool.indexOf("source-map") >= 0)
// })
// );
config.plugins.push(
new CopyWebpackPlugin([
{from: 'npm-dist', to: '.'}
])
)
}
module.exports = config;
Expected/desired behavior:
I would like to be able to build and run my application without the errors
I have a file a.html
that depends on b
and c
:
<require from='./b'></require>
<require from='./c'></require>
b.html
also depends on c
, so it includes the following:
<require from='./c'></require>
In this case, if the timing is right, I get an error while importing c
:
ERROR [app-router] Error: Template markup must be wrapped in a <template> element e.g. <template> <!-- markup here --> </template>
The error manifests in aurelia-pal-browser.js in createTemplateFromMarkup
, but that is only because it is passed an empty markup
parameter to the method.
The core appears to be in WebpackLoader._import
. On one call, the result of the require is the actual content of c.html
, but on the other, it is just an empty object. That in turn has no <template>
child and fails.
The core line appears to be here https://github.com/aurelia/loader-webpack/blob/master/src/index.js#L78
Note that if I run it through a browser debugger and step through each time, then the issue goes away, which implies some kind of timing issue.
There's a bug in the webpack loader _import implementation,
when you require the same resource multiple times from within the same template, then the import function will return an object on all subsequent calls, and only the first call will resolve properly.
Viewmodel error will be: No view model found in module "..."
Template error will be: Template markup must be wrapped in a <template> element e.g. <template> <!-- markup here --> </template>
my workaround:
return new Promise(function (resolve, reject) {
...
->
WebpackLoader.map = {};
...
return WebpackLoader.map[moduleId] || ( WebpackLoader.map[moduleId] = new Promise(function (resolve, reject) {
... );
I'm new to webpack and I set up a very simple project with just this index.js
:
import {bootstrap} from "aurelia-bootstrapper-webpack";
import {Aurelia} from "aurelia-framework";
bootstrap(async (aurelia) => {
aurelia.use.standardConfiguration().developmentLogging();
await aurelia.start();
aurelia.setRoot("app", document.body);
});
but trying to bundle with webpack I get this warning:
WARNING in ./~/aurelia-loader-webpack/dist/commonjs/aurelia-loader-webpack.js
Module not found: Error: Can't resolve 'aurelia-loader-context' @ ./~/aurelia-loader-webpack/dist/commonjs/aurelia-loader-webpack.js 104:25-66
and if I ignore it and run the app in the browser I get this:
bundle.js:624 Uncaught (in promise) Error: Cannot find module "aurelia-loader-context"
at webpackMissingModule (http://localhost:8888/bundle.js:624:71)
at http://localhost:8888/bundle.js:624:170
Suddenly I get this warning:
WARNING in ./src ^\.\/.*$
Module not found: Error: Can't resolve 'css' in '/Users/lovatog/Workspaces/aurelia/packages/best-app/src'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' prefix when using loaders.
You need to specify 'css-loader' instead of 'css'.
@ ./src ^\.\/.*$
@ ./~/aurelia-loader-webpack/dist/commonjs/aurelia-loader-webpack.js
@ ./~/aurelia-bootstrapper-webpack/dist/commonjs/aurelia-bootstrapper-webpack.js
@ ./src/main/index.ts
@ multi app
Webpack's guys told me aurelia-loader-webpack
may be missing -loader
somewhere, which became mandatory for loaders in the latest betas.
I'm submitting a bug report
Please tell us about your environment:
Operating System:
Windows [10]
Node Version:
10.15.1
NPM Version:
6.4.1
JSPM OR Webpack AND Version
webpack 4.29.0
Browser:
Chrome Version 72.0.3626.119 (Official Build) (64-bit)
Language:
TypeScript 3.3.1
Current behavior:
Require custom component does not work from template when using an alias/ts path.
<require from="@root/hello-world/hello-world"></require>
Error: Unable to find module with ID: @root/hello-world/hello-world.html
at WebpackLoader.eval (aurelia-loader-webpack.js?e63c:197)
at step (aurelia-loader-webpack.js?e63c:41)
at Object.eval [as next] (aurelia-loader-webpack.js?e63c:22)
at eval (aurelia-loader-webpack.js?e63c:16)
at new Promise (<anonymous>)
at __awaiter (aurelia-loader-webpack.js?e63c:12)
at WebpackLoader._import (aurelia-loader-webpack.js?e63c:162)
at WebpackLoader.eval (aurelia-loader-webpack.js?e63c:262)
at step (aurelia-loader-webpack.js?e63c:41)
at Object.eval [as next] (aurelia-loader-webpack.js?e63c:22)
Expected/desired behavior:
When aliases are configured in webpack I expect the loader to include these trying to resolve the module.
Workaround
Load in TS and pass the class using viewResources decorator.
import { HelloWorldCustomElement } from '@root/hello-world/hello-world';
import { viewResources } from 'aurelia-templating';
@viewResources(HelloWorldCustomElement)
export class App {}
I'm submitting a bug report
Please tell us about your environment:
Operating System:
Windows 8.1
Node Version:
10.8.0
Current behavior:
When directing to html templates as module id in routes:
routes = [{ moduleId: PLATFORM.moduleName('foo.html'), }]
this._import(moduleId, defaultHMR)
in method loadModule
in WebpackLoader
returns rejected promise with value Error: Unable to find module with ID: ./foo.html at WebpackLoader
Expected/desired behavior:
Everything works correctly if .html
suffix is omited and new file foo.ts with empty class inside it is created.
According to feature aurelia/templating-router#25 using only html views should work. Implementation of this feature was done by dynamically creation empty of class and it seems that loader is not aware of it happening.
I'm submitting a bug report
Please tell us about your environment:
Current behavior:
@noview(['nprogress/nprogress.css'])
seems to be ignore by the webpack loader. The resulting app fails to load trying to find nprogress.css
Workaround, inside matching html file solves this:
<template> <require from="nprogress/nprogress.css"></require> </template>
Expected/desired behavior:
I'm sure webpack hot loading feature impresses and speaks for itself. I know I am.
Which brings me to dream about whether this would be possible to achieve with Aurelia models and views?
Found the following information about enabling hot module replacement / loading on webpack website, but sadly I'm out of my depth here: Hot Module Replacement
I'm submitting a bug report
Please tell us about your environment:
Operating System:
OSX 10.12.1
Node Version:
6.5.0
Browser:
Firefox 49.0.2
Language:
ESNext
Current behavior:
Cannot load app view
Expected/desired behavior:
App view loaded successfully
So, I try to load my Aurelia app inside an iFrame. For Chrome it works fine without any problem but Firefox throwing error "No view model common found in module "app"."
I debug a little bit and end up in this method
WebpackLoader.prototype._import = function _import(moduleId) {
var _this2 = this;
if (this.modulesBeingLoaded[moduleId]) {
return this.modulesBeingLoaded[moduleId];
}
var moduleIdParts = moduleId.split('!');
var path = moduleIdParts.splice(moduleIdParts.length - 1, 1)[0];
var loaderPlugin = moduleIdParts.length === 1 ? moduleIdParts[0] : null;
var action = new Promise(function (resolve, reject) {
if (loaderPlugin) {
try {
return resolve(_this2.loaderPlugins[loaderPlugin].fetch(path));
} catch (e) {
return reject(e);
}
} else {
try {
var result = __webpack_require__(path);
return _this2._getActualResult(result, resolve, reject);
} catch (_) {
delete __webpack_require__.c[path];
}
require.ensure([], function (require) {
var result = require('aurelia-loader-context/' + path);
//----------------------------------------------------------
// in here, var result is 'undefined' and path value is 'app'
// Chrome doesn't enter this function
//----------------------------------------------------------
return _this2._getActualResult(result, resolve, reject);
}, 'app');
}
}).then(function (result) {
_this2.modulesBeingLoaded[moduleId] = undefined;
return result;
});
this.modulesBeingLoaded[moduleId] = action;
return action;
};
If the page loaded outside iFrame, there is no problem at all.
I'm submitting a bug report
Please tell us about your environment:
Operating System:
Any OS (tested on Windows 11)
Node Version:
LTS (16.17.0)
NPM Version:
8.15.0
Webpack version
webpack: 5.74.0
webpack-cli: 4.10.0
webpack-dev-server 4.10.1
Browser:
all
Language:
TypeScript 4.8.2
Current behavior:
For some time our Aurelia application had issues with altering CSS properties in chromium browsers (Chrome/Edge) devtools.
When trying to toggle certain CSS properties on/off through the "Styles" tab of the devtools "Elements" inspector, the CSS layout for major parts of the app immediately gets corrupted; certain selectors suddenly appear multiple times in the "Styles" tab, and the whole page looks messed up.
This really has complicated working with our app's design, so today I set out to find the root cause of the issue.
TLDR: I found that a fix is required in the aurelia-loader-webpack
package, I have therfore prepared a PR.
We are using Sass (.scss) source code, and we use a standard au-cli
generaated webpack configuration pipeline:
sass-loader => postcss-loader => css-loader
for files <require>
d from HTML templates, and with the additioinal => style-loader
for files imported from ES modules. (Source maps are enabled for the loaders when webpack mode=development
).
Steps taken to identify the problem:
@use
(or @import
) rules.<style>
elements that originated from .scss files with @use
rules, and noticed that these had multiple /* sourceURL=[path] */
lines at the end; just before the /* sourceMappingURL=[dataURI] */
. (One for the source file, and then one for each @use
rule).sourceURL
lines from the DOM fixes the problem.sourceURL
lines are never included when using style-loader
(f.ex. when importing from ES modules), only when using aurelia-loader-webpack
(when loaded from HTML templates).It looks like multiple sourceURL
lines affect the way sourceMapping works in chromium devtools; it seems like the devtools only considers the last of the sourceURL
lines.
I therefore have tried to find a way to make aurelia-loader-webpack
style element injection work like style-loader
; to not include the sourceURL
lines, only include the sourceMappingURL
line (when sourceMaps).
The .toString()
method from the loaded css-loader
module that is called in aurelia-loader-webpack.ts:241
returns the full CSS content, with both sourceURL
and sourceMappingURL
lines.
I therefore found two possible solutions to fix the problem:
toString()
method, and use a RegExp to remove the sourceURL
lines (only executed when the loaded css-loader
module has sourceMaps).css-loader
module properties. This can be accomplished by reusing some of the code from the css-loader
repository, and skip the sourceURL
generation.Pros/cons:
Solution 1: Low vulnerability to breaking changes in css-loader
package but has a minor performance impact.
Solution 2: More vulnerable to major changes in the css-loader
package, but with zero performance impact.
I have forked this repository and implemented solutions 1. and 2. on two different branches:
I have tested both solutions in our app, and they both fix the problem.
PS! Solution 2 reuses the exact code from the toString()
in the style-loader
loader, but the writing of the sourceURL
lines have been excluded.
I hope you acknowledge this as a problem, and realize that a fix is needed here.
I have not created a PR yet, because I wanted some feedback on which of the solutions you prefer.
Please get back to me, hopefully with your preferred solution, so that I can make a PR.
Expected/desired behavior:
Altering CSS through devtools should work.
I'm submitting a bug report
Please tell us about your environment:
Operating System:
OSX 10.12.3
Node Version:
6.2.0
NPM Version:
4.1.2
Browser:
Chrome 55
Current behavior:
Updating from version 1.0.3 to 2.0.0 crashes my app at startup with the following error:
Error: Unable to find module with ID: main
where main
is my module ID. When I switch back to 1.0.3 it starts working again. Is there something I need to change when updating to the latest version? (I am not using HMR yet)
Some versions I am using that might be helpful:
If I need to post more information, please ask :)
Unhandled rejection TypeError: Cannot read property '_getActualResult' of null
at http://localhost:9000/aurelia-bootstrap.bundle.js:15443:22
Same result on the skeleton project
@heruan commented on Mon Jul 11 2016
The CompositionContext
interface has viewModel
defined as:
/**
* The view model url or instance for the component.
*/
viewModel?: any;
but if it's set to a view model instance when using Webpack, I get this error:
Uncaught (in promise) TypeError: Cannot read property 'endsWith' of undefined(โฆ)
convertOriginToViewUrl @ aurelia-templating.js:705
ConventionalViewStrategy @ aurelia-templating.js:563
createFallbackViewStrategy @ aurelia-templating.js:700
getViewStrategy @ aurelia-templating.js:691
(anonymous function) @ aurelia-templating.js:4367
because viewModel
seems assumed to be a string.
To reproduce simply use this as main.js
in skeleton-esnext-webpack:
import {bootstrap} from 'aurelia-bootstrapper-webpack';
import {App} from "./app";
bootstrap((aurelia) => {
aurelia.use.standardConfiguration().developmentLogging();
aurelia.start().then(() => aurelia.setRoot( aurelia.container.get(App), document.body) );
});
This happens using Webpack only, the same logic in skeleton-esnext works as expected.
@EisenbergEffect commented on Mon Jul 11 2016
I believe this is a limitation in Webpack due to the fact that it doesn't function as a true module loader.
@niieani Can you look into this please? This issue has come up repeatedly. Either there's a bug in the Webpack loader or this just isn't possible with Webpack. If it isn't possible, we need to include documentation.
@heruan As a workaround, you can always provide the module id. Another possibility would be to manually associate the module id with the view model like so
import {Origin} from 'aurelia-metadata';
export class MyClass {
}
Origin.set(MyClass, new Origin('./my-class', 'MyClass'));
If you need, you could create a decorator to do this as well, potentially leveraging the module id constants that Webpack makes available. I believe it's module.id
but I'm not sure. @niieani can confirm. So, you could do something like this:
function origin(id, name) {
return function(target) {
Origin.set(target.constructor, new Origin(id, name || 'Default'));
}
}
@origin(module.id)
export class MyClass {
}
@heruan commented on Mon Jul 11 2016
Thank you @EisenbergEffect, I hit this also when mapping a route in the router with moduleId
set to an external module such as "module-name": using Webpack it fails with Error: Cannot find module './module-name'
, whereas using JSPM it loads the first export in "module-name" as expected.
Thus, since I'm trying to set view models from external modules as app root and routes, I don't think the Origin
workaround could work.
@EisenbergEffect commented on Mon Jul 11 2016
For the routing scenario, I'm not sure how that would work with Webpack. @niieani will have to chime in on that.
@niieani commented on Mon Jul 11 2016
There are no limitations related to Webpack. When using either external resources/modules or paths to modules that cannot be statically analyzed you need to include them in build resources (see the readme of webpack skeleton and webpack-plugin for more info on how to do that).
The cited error however looks like a bug. I will investigate. Essentially, everything that works with JSPM or RequireJS should work exactly the same with Webpack assuming proper configuration.
@EisenbergEffect commented on Mon Jul 11 2016
@niieani Thanks! That's good to hear. I know you've got plenty you are working on but if you could add this to your list to investigate, that would be great. I've seen this and similar issues come up a few times.
@heruan commented on Mon Jul 11 2016
Thank you @niieani!
For reference, these are a couple of use cases which fails using Webpack but works with JSPM.
RouteConfig.moduleId
:routerConfiguration.mapRoute( { route: '/list', moduleId: 'my-module/list' } );
CompositionContext
, instead of a string:// in main configure/bootstrap function
let root = aurelia.container.get(MyApp);
aurelia.setRoot(root, document.body);
@niieani commented on Mon Jul 11 2016
Using an actual module id instead of relative path
@heruan This should work, providing you declare the given moduleId as a build resource in your package.json.
The second issue seems to be with Origin metadata not being set properly for the modules by the webpack loader. This is the one I need to investigate.
@heruan commented on Mon Jul 11 2016
Thank you @niieani I can confirm that declaring modules in package.json/aurelia/build/resources
works! I look forward on your investigation for the other case, consider me available for testing.
I'm submitting a feature request
Hello,
I'd just like to share with you a few opinions of mine about Webpack support in Aurelia.
I think things would be a lot easier for everyone, if all dependencies between files in Aurelia were discoverable statically from just looking at the source files. This is what makes Webpack shine and work without causing headaches and without need for additional plugins.
This is somewhat completely the other way around in Aurelia, which makes heavy use of the Loader class, which offers loading of js/html files dynamically. Because of that, in order to run Aurelia, there is a need of adding the dedicated aurelia webpack plugin, that I personally am not very fond of using.
So, my 2 cents are: if Aurelia team really, really wants to offer support for 2 different styles of loading dependencies (require.js/system.js' async style vs webpack's compilation style), then it'd be great to (a) offer a way to use the framework in a more webpack-friendly way and (b) make the core framework code load dependencies statically instead of dynamically via the Loader class.
E.g. instead of:
aurelia.use.plugin('aurelia-dialog');
offer a way to install this plugin statically:
import { AureliaDialogPlugin } from 'aurelia-dialog';
aurelia.use.plugin(AureliaDialogPlugin);
Instead of loading aurelia-framework
like this in the webpack bootstrapper:
loader.loadModule('aurelia-framework')
use es6 import:
import { Aurelia } from 'aurelia-framework';
There are features that require dynamic module loading. I suppose this is how Aurelia's able to load a matching .html view file for a .js viewModel file without mentioning the .html in any way. Well, I'm quite ok with importing the html file via var viewHtml = import 'my-component.html';
and then using the @useView
decorator to inform Aurelia explicitly what html to use.
Instead of using the <require>
tag in html file like this:
<require from='./nav-bar'></require>
I would be happy to use a decorator on relevant components like this:
import { NavBarComponent } from 'nav-bar'
@useComponent(NavBarComponent, /* as */ 'nav-bar')
export class App {
configureRouter(config, router) {}
}
The only occasion, when modules should be able to be loaded asynchronously and when the framework should step forward with an opinion of how to do this, is when there is a requirement to load a Router's route on demand. Please take a look at one of the official webpack examples of how this could be done: link. This is very similar to what loader-webpack does (the require
ing of "aurelia-loader-context/" prefix idea), but it uses one of the official loader plugins: bundle-loader
. There is also an angular-webpack project around on github, where guys use es6-promise-loader
instead.
Where I'm trying to get at is: this would be really helpful, if Aurelia (and all official ecosystem) was not using the loader in the framework code and let the actual developer decide, whether they want to have some more syntactic sugar and convenience (like the <require>
html tag), that is available only, when require.js
-style loader is in use, or whether they want to use webpack-style loader and sacrifice those additional features.
I could reason more about it, but this is already getting long and nobody likes reading walls of text.
So there it is -- my feedback and opinion of the state of affairs. I might be wrong in many places -- I've only started with Webpack a few weeks ago. Also, I know, that Aurelia devs, and previously Durandal devs, are very accustomed to having the ability to load stuff dynamically (previously with require.js and now with system.js). So having stated that, I'm perfectly fine with Aurelia just carrying on with its course -- no hard feelings. I just thought, that hearing another dev's opinion and point of view might be helpful for Aurelia's devs, while developing this fantastic framework.
Thanks for spending your time to read this.
More details here -
But I believe if a plugin requires css from html file it fails.
I'm submitting a bug report
I'm submitting a feature request
Please tell us about your environment:
Operating System:
OSX 10.x|Linux (distro)|Windows [7|8|8.1|10]
Node Version:
6.2.0
Browser:
all | Chrome XX | Firefox XX | Edge XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView
Language:
all | TypeScript X.X | ESNext
Current behavior:
Expected/desired behavior:
What is the expected behavior?
What is the motivation / use case for changing the behavior?
I'm submitting a bug report
We are trying to upgrade to TypeScript 2.1.4 and the latest version of Webpack. The project builds, but an exception is being thrown while trying to load Aurelia.
+-- [email protected]
| `-- [email protected]
`-- [email protected]
+-- [email protected]
| `-- [email protected]
`-- [email protected]
Please tell us about your environment:
Operating System:
Windows 10
Node Version:
6.9.1
NPM Version:
3.810.8
JSPM OR Webpack AND Version
webpack 2.1.0-beta.28
Browser:
all
Language:
TypeScript 2.1.4
Current behavior:
The following exception occurs when bootstrapping Aurelia with latest TypeScript/WebPack
bluebird.js:5236 Error: Unable to find module with ID: main
at WebpackLoader.<anonymous> (http://localhost.inmotionnow.com:9001/aurelia-bootstrap.bundle.js?34bb5343bd0ee218797e:28173:35)
at step (http://localhost.inmotionnow.com:9001/aurelia-bootstrap.bundle.js?34bb5343bd0ee218797e:28010:23)
at Object.next (http://localhost.inmotionnow.com:9001/aurelia-bootstrap.bundle.js?34bb5343bd0ee218797e:27991:53)
at http://localhost.inmotionnow.com:9001/aurelia-bootstrap.bundle.js?34bb5343bd0ee218797e:27985:65
at __awaiter (http://localhost.inmotionnow.com:9001/aurelia-bootstrap.bundle.js?34bb5343bd0ee218797e:27981:12)
at WebpackLoader._import (http://localhost.inmotionnow.com:9001/aurelia-bootstrap.bundle.js?34bb5343bd0ee218797e:28129:16)
at WebpackLoader.<anonymous> (http://localhost.inmotionnow.com:9001/aurelia-bootstrap.bundle.js?34bb5343bd0ee218797e:28238:44)
at step (http://localhost.inmotionnow.com:9001/aurelia-bootstrap.bundle.js?34bb5343bd0ee218797e:28010:23)
at Object.next (http://localhost.inmotionnow.com:9001/aurelia-bootstrap.bundle.js?34bb5343bd0ee218797e:27991:53)
at http://localhost.inmotionnow.com:9001/aurelia-bootstrap.bundle.js?34bb5343bd0ee218797e:27985:65
From previous event:
at __awaiter (http://localhost.inmotionnow.com:9001/aurelia-bootstrap.bundle.js?34bb5343bd0ee218797e:27981:12)
at WebpackLoader.loadModule (http://localhost.inmotionnow.com:9001/aurelia-bootstrap.bundle.js?34bb5343bd0ee218797e:28225:16)
at config (http://localhost.inmotionnow.com:9001/aurelia-bootstrap.bundle.js?34bb5343bd0ee218797e:27926:19)
at handleApp (http://localhost.inmotionnow.com:9001/aurelia-bootstrap.bundle.js?34bb5343bd0ee218797e:27917:10)
at http://localhost.inmotionnow.com:9001/aurelia-bootstrap.bundle.js?34bb5343bd0ee218797e:27945:9
From previous event:
at http://localhost.inmotionnow.com:9001/aurelia-bootstrap.bundle.js?34bb5343bd0ee218797e:27942:44
From previous event:
at run (http://localhost.inmotionnow.com:9001/aurelia-bootstrap.bundle.js?34bb5343bd0ee218797e:27939:24)
at Object.<anonymous> (http://localhost.inmotionnow.com:9001/aurelia-bootstrap.bundle.js?34bb5343bd0ee218797e:27964:1)
at Object.aurelia-bootstrapper-webpack (http://localhost.inmotionnow.com:9001/aurelia-bootstrap.bundle.js?34bb5343bd0ee218797e:27965:30)
at __webpack_require__ (http://localhost.inmotionnow.com:9001/aurelia-bootstrap.bundle.js?34bb5343bd0ee218797e:57:38)
at Object.257 (http://localhost.inmotionnow.com:9001/aurelia-bootstrap.bundle.js?34bb5343bd0ee218797e:18704:1)
at __webpack_require__ (http://localhost.inmotionnow.com:9001/aurelia-bootstrap.bundle.js?34bb5343bd0ee218797e:57:38)
at 0 (http://localhost.inmotionnow.com:9001/aurelia-bootstrap.bundle.js?34bb5343bd0ee218797e:145:18)
at http://localhost.inmotionnow.com:9001/aurelia-bootstrap.bundle.js?34bb5343bd0ee218797e:148:10tryCatcher @ bluebird.js:5236Promise._settlePromiseFromHandler @ bluebird.js:3242Promise._settlePromise @ bluebird.js:3299Promise._settlePromise0 @ bluebird.js:3344Promise._settlePromises @ bluebird.js:3419(anonymous function) @ bluebird.js:175(anonymous function) @ bluebird.js:4490
client?7d79:38 [WDS] Warnings while compiling.
Here are our project's installed npm packages:
[email protected] C:\Git\proximus
+-- @easy-webpack/[email protected]
| +-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | | +-- [email protected]
| | | | +-- [email protected]
| | | | +-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | | +-- [email protected]
| | | | +-- [email protected]
| | | | `-- [email protected]
| | | `-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | | `-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | | +-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| `-- [email protected]
+-- @easy-webpack/[email protected]
| `-- [email protected]
| `-- [email protected]
| +-- [email protected]
| `-- [email protected]
+-- @easy-webpack/[email protected]
+-- @easy-webpack/[email protected]
| `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| `-- [email protected]
+-- @easy-webpack/[email protected]
| +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | | +-- [email protected]
| | | | +-- [email protected]
| | | | +-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | | +-- [email protected]
| | | | `-- [email protected]
| | | | +-- [email protected]
| | | | | `-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | | `-- [email protected]
| | | | +-- [email protected]
| | | | | +-- [email protected]
| | | | | | `-- [email protected]
| | | | | `-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | | `-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | | `-- [email protected]
| | | | +-- [email protected]
| | | | +-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | | +-- [email protected]
| | | | `-- [email protected]
| | | | +-- [email protected]
| | | | `-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | | +-- [email protected]
| | | | | `-- [email protected]
| | | | `-- [email protected]
| | | | +-- [email protected]
| | | | | `-- [email protected]
| | | | +-- [email protected]
| | | | | +-- [email protected]
| | | | | `-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | | +-- [email protected]
| | | | +-- [email protected]
| | | | `-- [email protected]
| | | | +-- [email protected]
| | | | `-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| `-- [email protected]
+-- @easy-webpack/[email protected]
+-- @easy-webpack/[email protected]
| `-- [email protected]
| `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| `-- [email protected]
+-- @easy-webpack/[email protected]
| `-- [email protected]
| +-- [email protected]
| `-- [email protected]
+-- @easy-webpack/[email protected]
| +-- [email protected]
| `-- [email protected]
| `-- [email protected]
+-- @easy-webpack/[email protected]
| `-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | | `-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | | +-- [email protected]
| | | | +-- [email protected]
| | | | `-- [email protected]
| | | `-- [email protected]
| | `-- [email protected]
| `-- [email protected]
+-- @easy-webpack/[email protected]
| `-- [email protected]
+-- @easy-webpack/[email protected]
| `-- [email protected]
+-- @easy-webpack/[email protected]
| `-- [email protected]
+-- @easy-webpack/[email protected]
| `-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | `-- [email protected]
| `-- [email protected]
+-- @easy-webpack/[email protected]
| `-- [email protected]
+-- @easy-webpack/[email protected]
| +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| `-- [email protected]
| `-- [email protected]
+-- @easy-webpack/[email protected]
| `-- [email protected]
| `-- [email protected]
+-- @easy-webpack/[email protected]
| `-- [email protected]
+-- @easy-webpack/[email protected]
| `-- [email protected]
+-- @easy-webpack/[email protected]
+-- @easy-webpack/[email protected]
| +-- @easy-webpack/[email protected]
| +-- @types/[email protected]
| `-- [email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
| `-- @types/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
| `-- @types/[email protected]
+-- [email protected]
| +-- [email protected]
| `-- [email protected]
+-- [email protected]
| +-- [email protected]
| `-- [email protected]
+-- [email protected]
+-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| `-- [email protected]
+-- [email protected]
| `-- [email protected]
+-- [email protected]
| `-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | `-- [email protected]
| `-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| `-- [email protected]
+-- [email protected]
+-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| `-- [email protected]
| `-- [email protected]
+-- [email protected]
| `-- [email protected]
+-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | `-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| | `-- [email protected]
| `-- [email protected]
| `-- [email protected]
+-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | `-- [email protected]
| `-- [email protected]
| `-- [email protected]
+-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| `-- [email protected]
| `-- [email protected]
+-- [email protected]
+-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| `-- [email protected]
+-- [email protected]
| +-- [email protected]
| `-- [email protected]
| `-- [email protected]
| `-- [email protected]
+-- [email protected]
| `-- [email protected]
| `-- [email protected]
| +-- [email protected]
| `-- [email protected]
+-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| `-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | `-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- UNMET OPTIONAL DEPENDENCY fsevents@^1.0.0
| | +-- [email protected]
| | | `-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | `-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| | `-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | | +-- [email protected]
| | | | | `-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | | +-- [email protected]
| | | | +-- [email protected]
| | | | +-- [email protected]
| | | | +-- [email protected]
| | | | +-- [email protected]
| | | | `-- [email protected]
| | | `-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | | `-- [email protected]
| | | `-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | | +-- [email protected]
| | | | +-- [email protected]
| | | | | `-- [email protected]
| | | | +-- [email protected]
| | | | +-- [email protected]
| | | | +-- [email protected]
| | | | +-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | | `-- [email protected]
| | | | `-- [email protected]
| | | `-- [email protected]
| | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| `-- [email protected]
| `-- [email protected]
+-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| `-- [email protected]
| `-- [email protected]
+-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | | +-- [email protected]
| | | | +-- [email protected]
| | | | +-- [email protected]
| | | | +-- [email protected]
| | | | `-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| `-- [email protected]
+-- [email protected]
+-- [email protected]
| `-- [email protected]
| `-- [email protected]
+-- [email protected]
| `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| `-- [email protected]
+-- [email protected]
| `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | | `-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| `-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| `-- [email protected]
+-- [email protected]
+-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| `-- [email protected]
| `-- [email protected]
+-- [email protected]
| +-- [email protected]
| +-- [email protected]
| `-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| `-- [email protected]
| `-- [email protected]
+-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | | `-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | | `-- [email protected]
| | | `-- [email protected]
| | | +-- [email protected]
| | | | `-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | | `-- [email protected]
| | | `-- [email protected]
| | | +-- [email protected]
| | | | `-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | | `-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | | +-- [email protected]
| | | | +-- [email protected]
| | | | `-- [email protected]
| | | `-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| `-- [email protected]
| `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| `-- [email protected]
| +-- [email protected]
| `-- [email protected]
+-- [email protected]
| +-- [email protected]
| `-- [email protected]
+-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| `-- [email protected]
+-- [email protected]
| `-- [email protected]
+-- [email protected]
+-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| `-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| `-- [email protected]
+-- [email protected]
| +-- [email protected]
| +-- [email protected]
| `-- [email protected]
| `-- [email protected]
+-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| `-- [email protected]
| `-- [email protected]
+-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| `-- [email protected]
+-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| `-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | | `-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| `-- [email protected]
+-- [email protected]
| `-- [email protected]
| `-- [email protected]
| `-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | | +-- [email protected]
| | | | +-- [email protected]
| | | | +-- [email protected]
| | | | | `-- [email protected]
| | | | +-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | | +-- [email protected]
| | | | +-- [email protected]
| | | | | `-- [email protected]
| | | | +-- [email protected]
| | | | `-- [email protected]
| | | `-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | | +-- [email protected]
| | | | +-- [email protected]
| | | | `-- [email protected]
| | | `-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | `-- [email protected]
| `-- [email protected]
+-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | `-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | | +-- [email protected]
| | | | | `-- [email protected]
| | | | +-- [email protected]
| | | | | `-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | | +-- [email protected]
| | | | +-- [email protected]
| | | | +-- [email protected]
| | | | | +-- [email protected]
| | | | | `-- [email protected]
| | | | `-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | | +-- [email protected]
| | | | +-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | | +-- [email protected]
| | | | | +-- [email protected]
| | | | | `-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| `-- [email protected]
+-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | | `-- [email protected]
| | | | +-- [email protected]
| | | | +-- [email protected]
| | | | | `-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | | `-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | | `-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | `-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | | `-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | `-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| `-- [email protected]
`-- [email protected]
`-- [email protected]
+-- [email protected]
| +-- [email protected]
| `-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| `-- [email protected]
| `-- [email protected]
+-- [email protected]
+-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| `-- [email protected]
+-- [email protected]
`-- [email protected]
In my package.json
(and therefore node_modules
) I have dependencies for the front-end and the back-end. When I run webpack using the config from the esnext skeleton I get a lot of errors like this:
<snip>
large error about webpack's inability to deal with a commonjs
feature in `express-static/index.js` here ...
</snip>
@ ./~/express-static/index.js
@ ./client ^\.\/.*$
@ ./~/aurelia-loader-webpack/dist/commonjs/aurelia-loader-webpack.js
Something in aurelia-loader-webpack.js
pulls in every single dependency listed in my package.json and/or node_modules?
I have a custom element which loads HTML from a server endpoint. In the standard es-2016 and TypeScript skeletons this functionality works fine. However, using the Webpack starter, specifically the loader, due to the way dependencies are resolved with a map, you can no longer do this.
HTML:
<template>
<compose view.bind="viewUrl" containerless></compose>
</template>
Javascript:
import {inject, bindable, containerless, customElement, TaskQueue} from 'aurelia-framework';
import {EventAggregator} from 'aurelia-event-aggregator';
@customElement('top-bar')
@containerless()
@inject(TaskQueue, EventAggregator)
export class TopBar {
@bindable router;
ea: EventAggregator;
taskQueue: TaskQueue;
viewUrl = null;
constructor(taskQueue, ea) {
this.taskQueue = taskQueue;
this.ea = ea;
this.ea.subscribe('router:navigation:success', () => {
this.updateViewUrl();
});
}
updateViewUrl() {
this.taskQueue.queueMicroTask(() => {
this.viewUrl = `/Utility/TopBarTemplate?url=${window.location.href}`;
});
}
}
The offending part of the loader appears to be this:
function webpackContextResolve(req) {
return map[req] || (function() { throw new Error("Cannot find module '" + req + "'.") }());
};
It assumes if it is not in the dependency map (and being a remote resource it would not be) then it should throw an error. This is completely different to how the standard loader handles these kind of things.
Aurelia ES6 Webkit.
Getting this error when trying to run unit tests with Wallaby.
ModuleNotFoundError: Module not found: Error: Can't resolve 'aurelia-loader-context' in 'D:\WebstormProjects\my_app\node_modules\aurelia-loader-webpack\dist\commonjs'
Happens when I add:
import {bootstrap} from 'aurelia-bootstrapper-webpack';
to \test\unit\setup.js - or any other .spec.js test.
Let me know if this is a Wallaby problem and I'll raise a ticket there.
Or possibly related to: #19
I'm submitting a bug report
Please tell us about your environment:
Operating System: Windows 10
Node Version: 6.9.1
yarn Version: 1.3.2
Webpack: 3.4.1
Browser: all
Language: TypeScript 2.6.1
Current behavior:
The type definition is missing a Webpack reference.
[at-loader] Checking finished with 1 errors
[at-loader] ./node_modules/aurelia-loader-webpack/dist/commonjs/aurelia-loader-webpack.d.ts:31:51
TS2503: Cannot find namespace 'Webpack'.
Link to source
Expected/desired behavior:
Reproducing the error
/dist/**/aurelia-loader-webpack.d.ts
What is the expected behavior?
The typings should be able to resolve the Webpack namespace
What is the motivation / use case for changing the behavior?
Apps that use this package nonetheless compile successfully, but it's confusing to see this error all the time.
It seems to be easily resolved by copying webpack-hot-interface.d.ts
into dist/**/
I'm submitting a bug report
Please tell us about your environment:
Operating System:
OSX 10.x|Linux (distro)|Windows [7|8|8.1|10]
Node Version:
8.1.3
I am not sure what webpack version or even tool itself am I using. The README.md instructions state:
This will install all required dependencies, including a local version of Webpack that is going to
build and bundle the app. There is no need to install Webpack globally
Also, the devDependencies section of package.json shows
"@easy-webpack/config-aurelia": "^2.2.2",
"@easy-webpack/config-babel": "^4.0.0",
"@easy-webpack/config-common-chunks-simple": "^2.0.3",
"@easy-webpack/config-copy-files": "^1.1.2",
"@easy-webpack/config-css": "^4.0.0",
"@easy-webpack/config-env-development": "^2.1.5",
"@easy-webpack/config-env-production": "^3.0.0",
"@easy-webpack/config-external-source-maps": "^3.1.0",
"@easy-webpack/config-fonts-and-images": "^2.1.0",
"@easy-webpack/config-generate-index-html": "^2.1.1",
"@easy-webpack/config-global-bluebird": "^2.1.0",
"@easy-webpack/config-global-jquery": "^2.1.0",
"@easy-webpack/config-global-regenerator": "^1.2.2",
"@easy-webpack/config-html": "^3.1.0",
"@easy-webpack/config-json": "^3.1.0",
"@easy-webpack/config-test-coverage-istanbul": "^3.2.0",
"@easy-webpack/config-uglify": "^2.2.3",
"@easy-webpack/core": "^2.0.0",
Browser:
Chrome 62.0.3202.94
Language:
ESNext
Current behavior:
Using the esnext-webpack skeleton, the command npm start
results with well over thousand lines long output on the cmd.exe
Expected/desired behavior:
What is the expected behavior?
A console log of a normal size (5-10) lines
What is the motivation / use case for changing the behavior?
I am writing a set of tutorials and know that my readers will ask me about this behavior right away
Inside a clean empty folder, running
git clone https://github.com/aurelia/loader-webpack.git
yarn install
yarn run build
fails.
First issue I had was a problem with yarg
dependency from aurelia-tools
and then build:compile
works but there is an error with build:doc
Unable to shape the aurelia-loader-webpack.d.ts file.
ENOENT: no such file or directory, open 'C:\xxxx\aurelia-loader-webpack\dist\doc-temp\aurelia-loader-webpack.d.ts'
I'm submitting a feature request
Please tell us about your environment:
Current behavior:
aurelia-loader-webpack always names the application chunk as 'app'.
So the output file name is always 'app.bundle[.<hash>].js'
I found out that the current behaviour is driven by this code in loader-webpack:
require.ensure([], require => {
// if failed, try resolving via the context created by the plugin //
const result = require('aurelia-loader-context/' + path);
return this._getActualResult(result, resolve, reject);
}, 'app');
Expected/desired behavior:
Allow to specify a different name for the app chunk.
If there is another way to achieve this, please let me know.
What is the motivation / use case for changing the behavior?
I need to use a different name for the output file that contains the app chunk.
If using @easy-webpack based config (e.g. @easy-webpack/config-env-development
), it is unclear how to change the output filename for the app bundle.
Webpack throws an error when it sees a free variable module
used in an ES module (i.e. in the same file as import or export).
module
is found in lots of places because of module.hot
.
The consequence is that neither es2015 nor native-modules are usable with Webpack currently.
This is important because ES modules is a prerequisite for tree shaking.
To me this seems like a bug in webpack, or maybe they changed the API for HMR when using ES modules. I'll investigate.
This loader does try load any modules by webpack_require. The code is here.
Webpack always caches to information of module. Please look following sample (generated by webpack).
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
////// 2. so we can't get module exports
/******/ if (installedModules[moduleId]) return installedModules[moduleId].exports;
////// 1. always cache!!
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/ if (!modules[moduleId] && typeof moduleId === 'string') {
/******/ var newModuleId;
/******/ if (modules[newModuleId = moduleId + '.js'] || modules[newModuleId = moduleId + '.ts']) {
/******/ moduleId = newModuleId;
/******/ installedModules[moduleId] = module;
/******/ }
/******/ }
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ module.l = true;
/******/ return module.exports;
/******/ }
So, if you try require.ensure
after __webpack_require__
, we can't get module exports.
We have to delete the cache.
try {
// first try native webpack method //
const result = __webpack_require__(path);
return this._getActualResult(result, resolve, reject);
} catch (_) {
// delete the cache
delete __webpack_require__.c[path];
}
or check the module exists before __webpack_require__
.
if (__webpack_require__.m[path] !== undefined) {
const result = __webpack_require__(path);
...
} {
require.ensure([], require => {
...
}
Thank you.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.