We Keep Coding

aliases not working while using Storybook/vue

I'm using Storybook for Vue and I'm trying to add aliases to the webpack config in storybook/main.js:
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js',
'#': path.resolve('src'),
'#': 'src',
'#src': 'src'
},
extensions: ['*', '.js', '.vue', '.json']
},
This is how my file structure looks:
And the error I'm getting:
npm run storybook
> scss-loader-example#0.1.0 storybook /Users/test/Documents/webdev/test/scss-loader-example
> start-storybook -p 6006
info #storybook/vue v5.3.17
info
info => Loading presets
info => Loading presets
info => Adding stories defined in ".storybook/main.js".
info => Using default Webpack setup.
webpack built c29ceda255d3976f13b9 in 9398ms
✖ ｢wdm｣: Hash: c29ceda255d3976f13b9
Version: webpack 4.42.0
Time: 9398ms
Built at: 2020-03-18 11:41:13
Asset Size Chunks Chunk Names
iframe.html 2.87 KiB [emitted]
main.c29ceda255d3976f13b9.bundle.js 321 KiB main [emitted] [immutable] [big] main
main.c29ceda255d3976f13b9.bundle.js.map 213 KiB main [emitted] [dev] main
runtime~main.c29ceda255d3976f13b9.bundle.js 31.2 KiB runtime~main [emitted] [immutable] runtime~main
runtime~main.c29ceda255d3976f13b9.bundle.js.map 32.3 KiB runtime~main [emitted] [dev] runtime~main
vendors~main.c29ceda255d3976f13b9.bundle.js 2.68 MiB vendors~main [emitted] [immutable] [big] vendors~main
vendors~main.c29ceda255d3976f13b9.bundle.js.map 2.79 MiB vendors~main [emitted] [dev] vendors~main
Entrypoint main [big] = runtime~main.c29ceda255d3976f13b9.bundle.js runtime~main.c29ceda255d3976f13b9.bundle.js.map vendors~main.c29ceda255d3976f13b9.bundle.js vendors~main.c29ceda255d3976f13b9.bundle.js.map main.c29ceda255d3976f13b9.bundle.js main.c29ceda255d3976f13b9.bundle.js.map
[0] multi ./node_modules/#storybook/core/dist/server/common/polyfills.js ./node_modules/#storybook/core/dist/server/preview/globals.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true 64 bytes {main} [built]
[./.storybook/generated-entry.js] 230 bytes {main} [built]
[./node_modules/#storybook/core/dist/server/common/polyfills.js] 120 bytes {vendors~main} [built]
[./node_modules/#storybook/core/dist/server/preview/globals.js] 93 bytes {vendors~main} [built]
[./node_modules/#storybook/vue/dist/client/index.js] 1.21 KiB {vendors~main} [built]
[./node_modules/airbnb-js-shims/index.js] 40 bytes {vendors~main} [built]
[./node_modules/core-js/features/symbol/index.js] 359 bytes {vendors~main} [built]
[./node_modules/global/window.js] 232 bytes {vendors~main} [built]
[./node_modules/querystring-es3/index.js] 127 bytes {vendors~main} [built]
[./node_modules/regenerator-runtime/runtime.js] 23.6 KiB {vendors~main} [built]
[./node_modules/webpack-hot-middleware/client-overlay.js] (webpack)-hot-middleware/client-overlay.js 2.17 KiB {vendors~main} [built]
[./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true] (webpack)-hot-middleware/client.js?reload=true&quiet=true 7.68 KiB {vendors~main} [built]
[./node_modules/webpack-hot-middleware/node_modules/strip-ansi/index.js] (webpack)-hot-middleware/node_modules/strip-ansi/index.js 161 bytes {vendors~main} [built]
[./node_modules/webpack-hot-middleware/process-update.js] (webpack)-hot-middleware/process-update.js 4.35 KiB {vendors~main} [built]
[./node_modules/webpack/buildin/harmony-module.js] (webpack)/buildin/harmony-module.js 573 bytes {vendors~main} [built]
+ 708 hidden modules
ERROR in ./src/components/Balance.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Balance.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve '#/js/automation-const' in '/Users/test/Documents/webdev/test/scss-loader-example/src/components'
# ./src/components/Balance.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Balance.vue?vue&type=script&lang=js&) 27:0-56 53:13-32
# ./src/components/Balance.vue?vue&type=script&lang=js&
# ./src/components/Balance.vue
# ./stories/1-Button.stories.js
# ./stories sync ^\.\/(?:(?:(?!\.)(?:(?:(?!(?:|\/)\.).)*?)\/)?(?!\.)(?=.)[^\/]*?\.stories\.js\/?)$
# ./.storybook/generated-entry.js
# multi ./node_modules/#storybook/core/dist/server/common/polyfills.js ./node_modules/#storybook/core/dist/server/preview/globals.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true
ERROR in ./src/components/Balance.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Balance.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve '#/js/utils/helper' in '/Users/test/Documents/webdev/test/scss-loader-example/src/components'
# ./src/components/Balance.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Balance.vue?vue&type=script&lang=js&) 26:0-39 57:19-25
# ./src/components/Balance.vue?vue&type=script&lang=js&
# ./src/components/Balance.vue
# ./stories/1-Button.stories.js
# ./stories sync ^\.\/(?:(?:(?!\.)(?:(?:(?!(?:|\/)\.).)*?)\/)?(?!\.)(?=.)[^\/]*?\.stories\.js\/?)$
# ./.storybook/generated-entry.js
# multi ./node_modules/#storybook/core/dist/server/common/polyfills.js ./node_modules/#storybook/core/dist/server/preview/globals.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true
Child HtmlWebpackCompiler:
Asset Size Chunks Chunk Names
__child-HtmlWebpackPlugin_0 6.5 KiB HtmlWebpackPlugin_0 HtmlWebpackPlugin_0
Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
[./node_modules/#storybook/core/node_modules/html-webpack-plugin/lib/loader.js!./node_modules/#storybook/core/dist/server/templates/index.ejs] 2.15 KiB {HtmlWebpackPlugin_0} [built]
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.
And the paths inside Balance.vue which are causing the issue:
import helper from '#/js/utils/helper'
import automationConstants from '#/js/automation-const'
Any ideas what I'm doing wrong?

I created a separate webpack.config.js file in my .storybook folder and used the following config.
config.resolve.alias = {
...config.resolve.alias,
'#': path.resolve(__dirname, '../src/'),
vue$: 'vue/dist/vue.esm.js'
};
make sure to also add vue$ otherwise the vue compiler will be broken.

Webpack bundle size increases on every consecutive build

I'm packing a project with webpack in order to use it as a library. It's a components library so I'm generating small bundles for every component that lives in its own directory under src/ui. This is a example component:
src/
|- ui/
|-- anchor/
|- dist/
|- index.js
|- _anchor.scss
I pretend to generate the bundled component in dist/index.js.
With my current Webpack configuration, if I run NODE_ENV=production webpack --display-modules for example, three consecutive times wihtout changing any code, the Webpack outputs are:
Asset Size Chunks Chunk Names
anchor/dist/index.js 4.69 KiB 0 [emitted] anchor
anchor/dist/index.js.map 15.8 KiB 0 [emitted] anchor
Entrypoint anchor = anchor/dist/index.js anchor/dist/index.js.map
[0] external "react" 42 bytes {0} [built]
[1] external "classnames" 42 bytes {0} [built]
[2] ./src/ui/anchors/_anchor.scss 1.94 KiB {0} [built]
[3] ./node_modules/css-loader/dist/runtime/api.js 2.35 KiB {0} [built]
[4] ./src/ui/anchor/index.js + 1 modules 1.69 KiB {0} [built]
| ./src/ui/anchor/index.js 1.41 KiB [built]
| ./node_modules/babel-preset-react-app/node_modules/#babel/runtime/helpers/esm/defineProperty.js 269 bytes [built]
Asset Size Chunks Chunk Names
anchor/dist/index.js 5.7 KiB 0 [emitted] anchor
anchor/dist/index.js.map 14.3 KiB 0 [emitted] anchor
Entrypoint anchor = anchor/dist/index.js anchor/dist/index.js.map
[0] ./src/ui/anchor/dist/index.js 4.69 KiB {0} [built]
[1] external "react" 42 bytes {0} [built]
[2] external "classnames" 42 bytes {0} [built]
Asset Size Chunks Chunk Names
anchor/dist/index.js 6.71 KiB 0 [emitted] anchor
anchor/dist/index.js.map 16.6 KiB 0 [emitted] anchor
Entrypoint anchor = anchor/dist/index.js anchor/dist/index.js.map
[0] ./src/ui/anchor/dist/index.js 5.7 KiB {0} [built]
[1] external "react" 42 bytes {0} [built]
[2] external "classnames" 42 bytes {0} [built]
As you can see, bundle size increases around a 1 KiB on each execution.
My current webpack configuration is:
const path = require('path')
module.exports = {
mode: 'production',
entry: {
anchor: './src/ui/anchor'
},
output: {
path: path.resolve(__dirname, 'src', 'ui'),
filename: '[name]/dist/index.js',
library: ['components', '[name]'],
libraryTarget: 'umd'
},
externals: {
react: 'umd react',
'react-dom': 'umd react-dom',
'prop-types': 'umd prop-types',
classnames: 'umd classnames'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|dist)/,
loader: 'babel-loader',
options: {
presets: [require.resolve('babel-preset-react-app')],
},
enforce: 'pre',
}, {
test: /\.scss$/,
use: [
"css-loader",
"sass-loader"
]
}
]
},
devtool: 'source-map'
}
How can I configure it so bundle 'resets' or stays the same?

In library.filename, you configured the [name] option specifying for every entry you have configured, it'll assign a special name. You would usually only use this parameter if you are using multiple entry points, which I don't see here.
You shouldn't have to "reset" anything when you recompile your Webpack. I'm guessing the file size didn't get infinitely larger after this question, right?
Check this out:
https://github.com/webpack/webpack/tree/master/examples/multi-part-library

Webpack - WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB)

When I run webpack in production mode.
There is a warning that asset size limit (exceed).
How can I run without this error?
In my project, I include css, and I see some node_module directory include in the webpack build.
But if I exclude node_module of css it will have the error.
The following is the output when I try to build my project with webpack.
[mai#localhost dssoft]$ yarn run build
yarn run v1.9.2
$ webpack --config webpack.config.js
Hash: a5edfb917e6152759218
Version: webpack 4.16.3
Time: 16592ms
Built at: 08/07/2018 7:58:40 PM
Asset Size Chunks Chunk Names
f4769f9bdb7466be65088239c12046d1.eot 19.7 KiB [emitted]
448c34a56d699c29117adc64c43affeb.woff2 17.6 KiB [emitted]
fa2772327f55d8198301fdb8bcfc8158.woff 22.9 KiB [emitted]
e18bbf611f2a2e43afc071aa2f4e1512.ttf 44.3 KiB [emitted]
89889688147bd7575d6327160d64e760.svg 106 KiB [emitted]
bundle.js 624 KiB 0 [emitted] [big] main
Entrypoint main [big] = bundle.js
[22] ./node_modules/react-router-dom/es/index.js + 34 modules 80.3 KiB {0} [built]
| 35 modules
[29] ./node_modules/react-bootstrap/es/index.js + 104 modules 301 KiB {0} [built]
| 105 modules
[90] ./js/reducers/index.js 650 bytes {0} [built]
[116] ./node_modules/react-redux/es/index.js + 23 modules 43 KiB {0} [built]
| 24 modules
[121] multi whatwg-fetch ./js/App.js 40 bytes {0} [built]
[122] ./js/App.js 5.17 KiB {0} [built]
[134] ./js/actions/index.js 2.31 KiB {0} [built]
[213] ./js/configureStore.js 1.4 KiB {0} [built]
[221] ./js/pages/Index.js 479 bytes {0} [built]
[222] ./js/pages/Signup.js 8.04 KiB {0} [built]
[227] ./js/pages/Login.js 7.67 KiB {0} [built]
[228] ./js/pages/Logout.js 620 bytes {0} [built]
[229] ./js/pages/NotFound.js 2.86 KiB {0} [built]
[230] ./js/pages/Events.js 3.51 KiB {0} [built]
[244] ./js/App.css 1.04 KiB {0} [built]
+ 231 hidden modules
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
bundle.js (624 KiB)
WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
main (624 KiB)
bundle.js
WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
Done in 20.99s.
Additional webpack.config.js
const path = require('path');
module.exports = {
mode: 'production',
entry: [
'whatwg-fetch',
path.resolve(__dirname, 'src', 'App.js')
],
module: {
rules: [
{
test: /\.js$/,
exclude: /\/node_modules\//,
use: {
loader: 'babel-loader',
}
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
loader: 'url-loader',
options: {
limit: 10000
}
}
]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'public'),
},
};

Webpacks warning size seems out of date. Instead of just ignoring it you can set it to a more meaningful size limit.
module.exports = {
....
},
performance: {
maxEntrypointSize: 512000,
maxAssetSize: 512000
},
....
}

You can hide these warnings/hints by setting performance.hints = false:
{
performance: {
hints: false
}
}
See the docs for more information.
Of course, the hint is there for a reason and you should look into ways of reducing your bundle size. For example by using code splitting.

performance: {
hints: false
}
hide by this statement

ASP.NETCore Yoeman and Dotnet CLI examples are failing out of the box for me, why>

I'm a newbie at trying to use my JavaScript skills with ASP.NET Core.
Using Yoeman, I get an error after these steps:
npm install -g yo generator-aspnetcore-spa
npm install -g webpack
yo aspnetcore-spa
The error is:
Error: Cannot find module 'temp'
at Function.Module._resolveFilename (module.js:469:15)
at Function.Module._load (module.js:417:25)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (C:\Users\Bruce\AppData\Roaming\npm\node_modules\yo\node_modules\external-editor\main\index.js:15:10)
at Object.<anonymous> (C:\Users\Bruce\AppData\Roaming\npm\node_modules\yo\node_modules\external-editor\main\index.js:136:4)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
What should I do to fix this?
Also after this error, to try something else I went to the Dotnet CLI and tried this:
dotnet new reactredux
dotnet restore
yarn install
dotnet run
The error is:
Hosting environment: Development
Content root path: C:\Users\Bruce\Dropbox\Projects MoneyPlan\MyNewThing
Now listening on: http://localhost:5000
Application started. Press Ctrl+C to shut down.
fail: Microsoft.AspNetCore.NodeServices[0]
(node:10072) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
fail: Microsoft.AspNetCore.NodeServices[0]
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
fail: Microsoft.AspNetCore.NodeServices[0]
[at-loader] Checking finished with 1 errors
fail: Microsoft.AspNetCore.NodeServices[0]
[at-loader] Checking finished with 1 errors
info: Microsoft.AspNetCore.NodeServices[0]
webpack built f9fa10795e41d7865b35 in 12041ms
info: Microsoft.AspNetCore.NodeServices[0]
Hash: f9fa10795e41d7865b35
Version: webpack 2.5.1
Time: 12041ms
Asset Size Chunks Chunk Names
main-client.js 299 kB 0 [emitted] [big] main-client
site.css 1.56 kB 0 [emitted] main-client
main-client.js.map 333 kB 0 [emitted] main-client
site.css.map 85 bytes 0 [emitted] main-client
chunk {0} main-client.js, site.css, main-client.js.map, site.css.map (main-client) 244 kB [entry] [rendered]
[0] external "vendor_609a3b1255e87fe0584f" 42 bytes {0} [not cacheable]
[1] delegated ./node_modules/react/react.js from dll-reference vendor_609a3b1255e87fe0584f 42 bytes {0} [not cacheable] [built]
[59] ./ClientApp/boot-client.tsx 938 bytes {0} [built]
[60] (webpack)-hot-middleware/client.js?path=%2F__webpack_hmr 6.68 kB {0} [built]
[61] delegated ./node_modules/event-source-polyfill/eventsource.js from dll-reference vendor_609a3b1255e87fe0584f 42 bytes {0} [not cacheable] [built]
[69] ./ClientApp/configureStore.ts 1.35 kB {0} [built]
[70] ./ClientApp/routes.tsx 743 bytes {0} [built]
[71] ./ClientApp/css/site.css 41 bytes {0} [built]
[177] ./~/strip-ansi/index.js 161 bytes {0} [built]
[178] (webpack)-hot-middleware/client-overlay.js 1.82 kB {0} [built]
[179] (webpack)-hot-middleware/process-update.js 3.88 kB {0} [built]
[180] delegated ./node_modules/bootstrap/dist/js/npm.js from dll-reference vendor_609a3b1255e87fe0584f 42 bytes {0} [not cacheable] [built]
[182] delegated ./node_modules/react-dom/index.js from dll-reference vendor_609a3b1255e87fe0584f 42 bytes {0} [not cacheable] [built]
[186] delegated ./node_modules/querystring-es3/index.js from dll-reference vendor_609a3b1255e87fe0584f 42 bytes {0} [not cacheable] [built]
[189] multi event-source-polyfill webpack-hot-middleware/client?path=%2F__webpack_hmr ./ClientApp/boot-client.tsx 52 bytes {0} [built]
+ 175 hidden modules
ERROR in [at-loader] ./ClientApp/components/Layout.tsx:13:21
TS2322: Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<NavMenu> & { children?: ReactNode; } & void'.
Type '{}' is not assignable to type 'void'.
Child extract-text-webpack-plugin:
chunk {0} extract-text-webpack-plugin-output-filename 3.32 kB [entry] [rendered]
[0] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
[1] ./~/css-loader!./ClientApp/css/site.css 1.81 kB {0} [built]
If I point my browser at http://localhost:5000/ anyway to see what happens, I get this error:
ERROR in [at-loader] ./ClientApp/components/Layout.tsx:13:21
TS2322: Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<NavMenu> & { children?: ReactNode; } & void'.
Type '{}' is not assignable to type 'void'.
I'm at a loss here, with all these examples failing out of the box. Any help?

Why am I getting 2 builds with Webpack?

I need to know the hash of the build so I'm trying to capture it in the callback function:
const compiler = webpack(webpackConfig, function (err, stats) {
debug("Hash", stats.hash)
})
But when I'm doing this something weird happens: I'm getting 2 builds and can capture only 1 hash - obviously I need the other one instead of the one in the callback.
Output when having a callback:
app:server Hash +7s ea34c7a4d34baae1c353
webpack built d796ba7633cf5b1023a0 in 6673ms
Hash: ea34c7a4d34baae1c353
Version: webpack 1.13.1
Time: 6649ms
Asset Size Chunks Chunk Names
app.ea34c7a4d34baae1c353.js 1.27 MB 0 [emitted] app
1.counter.ea34c7a4d34baae1c353.js 247 kB 1 [emitted] counter
vendor.ea34c7a4d34baae1c353.js 389 kB 2 [emitted] vendor
app.ea34c7a4d34baae1c353.js.map 1.54 MB 0 [emitted] app
1.counter.ea34c7a4d34baae1c353.js.map 303 kB 1 [emitted] counter
vendor.ea34c7a4d34baae1c353.js.map 466 kB 2 [emitted] vendor
favicon.ico 24.8 kB [emitted]
index.html 595 bytes [emitted]
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
index.html 553 kB 0
webpack: bundle is now VALID.
Hash: d796ba7633cf5b1023a0
Version: webpack 1.13.1
Time: 6673ms
Asset Size Chunks Chunk Names
app.d796ba7633cf5b1023a0.js 1.17 MB 0 [emitted] app
vendor.d796ba7633cf5b1023a0.js 389 kB 1 [emitted] vendor
app.d796ba7633cf5b1023a0.js.map 1.42 MB 0 [emitted] app
vendor.d796ba7633cf5b1023a0.js.map 466 kB 1 [emitted] vendor
favicon.ico 24.8 kB [emitted]
index.html 595 bytes [emitted]
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
index.html 553 kB 0
webpack: bundle is now VALID.
Output when no callback:
Hash: c5e31d1eb986b7ef318d
Version: webpack 1.13.1
Time: 3891ms
Asset Size Chunks Chunk Names
app.c5e31d1eb986b7ef318d.js 1.26 MB 0 [emitted] app
1.counter.c5e31d1eb986b7ef318d.js 30.6 kB 1 [emitted] counter
vendor.c5e31d1eb986b7ef318d.js 389 kB 2 [emitted] vendor
app.c5e31d1eb986b7ef318d.js.map 1.54 MB 0 [emitted] app
1.counter.c5e31d1eb986b7ef318d.js.map 37.9 kB 1 [emitted] counter
vendor.c5e31d1eb986b7ef318d.js.map 466 kB 2 [emitted] vendor
favicon.ico 24.8 kB [emitted]
index.html 595 bytes [emitted]
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
index.html 553 kB 0
webpack: bundle is now VALID.
File: https://github.com/davezuko/react-redux-starter-kit/blob/master/server/main.js

Ok I've found out... In the Webpack's source if there is a callback given to the webpack(options, callback) then it automatically runs itself:
function webpack(options, callback) {
...
if(callback) {
...
compiler.run(callback);
}
return compiler;
}
If someone wants to add a callback do it by adding a plugin as follows:
compiler.plugin("done", stats => {
debug(hash)
})