webpack: configuration.entry should be an non-empty object - serverless-framework

serverless deploy is throwing this error with latest webpack verstion.
Serverless: Bundling with Webpack...
Webpack Options Validation Error -----------------------
WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.entry should be a non-empty object.
webpack.config.js
const path = require('path');
const slsw = require('serverless-webpack');
// var nodeExternals = require('webpack-node-externals')
module.exports = {
mode: slsw.lib.webpack.isLocal ? 'development' : 'production',
entry: slsw.lib.entries,
// externals: [nodeExternals()],
devtool: 'source-map',
resolve: {
extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
},
output: {
libraryTarget: 'commonjs',
path: path.join(__dirname, '.webpack'),
filename: '[name].js',
},
target: 'node',
module: {
rules: [
// all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
{ test: /\.tsx?$/, loader: 'ts-loader' },
],
},
};
package.json
"serverless": "^1.72.0",
"serverless-aws-documentation": "^1.1.0",
"serverless-dynamodb-local": "^0.2.39",
"serverless-iam-roles-per-function": "^2.0.2",
"serverless-offline": "^6.4.0",
"serverless-reqvalidator-plugin": "^1.0.3",
"serverless-s3-local": "^0.6.2",
"serverless-webpack": "^5.3.2",
"ts-loader": "^7.0.5",
"typescript": "^3.9.5",
"webpack": "^4.43.0"
there's something related here: https://github.com/serverless-heaven/serverless-webpack/issues/372
serverless.yml is very standard and was working with older webpack versions.
Not expert in webpack here, any help much appreciated.

The solution for this was to recreate the project with from the scratch and reinstall the packages:
sls create --template aws-nodejs-typescript --path projectname
in this case, the webpack.config.json generate looks like this:
const path = require('path');
const slsw = require('serverless-webpack');
const nodeExternals = require('webpack-node-externals');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
module.exports = {
context: __dirname,
mode: slsw.lib.webpack.isLocal ? 'development' : 'production',
entry: slsw.lib.entries,
devtool: slsw.lib.webpack.isLocal ? 'cheap-module-eval-source-map' : 'source-map',
resolve: {
extensions: ['.mjs', '.json', '.ts'],
symlinks: false,
cacheWithContext: false,
},
output: {
libraryTarget: 'commonjs',
path: path.join(__dirname, '.webpack'),
filename: '[name].js',
},
target: 'node',
externals: [nodeExternals()],
module: {
rules: [
// all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
{
test: /\.(tsx?)$/,
loader: 'ts-loader',
exclude: [
[
path.resolve(__dirname, 'node_modules'),
path.resolve(__dirname, '.serverless'),
path.resolve(__dirname, '.webpack'),
],
],
options: {
transpileOnly: true,
experimentalWatchApi: true,
},
},
],
},
plugins: [
// new ForkTsCheckerWebpackPlugin({
// eslint: true,
// eslintOptions: {
// cache: true
// }
// })
],
};
and package.json:
"#types/aws-lambda": "^8.10.17",
"#types/node": "^10.12.18",
"fork-ts-checker-webpack-plugin": "^3.0.1",
"serverless": "^1.73.1",
"serverless-aws-documentation": "^1.1.0",
"serverless-dynamodb-local": "^0.2.39",
"serverless-iam-roles-per-function": "^2.0.2",
"serverless-offline": "^6.4.0",
"serverless-reqvalidator-plugin": "^1.0.3",
"serverless-s3-local": "^0.6.2",
"serverless-webpack": "^5.2.0",
"ts-loader": "^5.3.3",
"typescript": "^3.2.4",
"webpack": "^4.29.0",
"webpack-node-externals": "^1.7.2"
deployment both offline and cloud works ok.

Related

Vue 3 vendor bundle is bloated with #babel/parser/lib when vue.esm-bundler.js is used in webpack

I created a Vue 3 project and using webpack for bundling the package. Since I have in-DOM templates, I cannot go with the default #runtime-dom. So I have aliased Vue to point to vue.esm-bundler.js.
The issue I am facing is that, when I take a prod build, my vendor bundle is bloated with #babel/parser/lib.
Sample project to reproduce this issue is available here
Steps to follow:
npm install
npm run bundle
Open dist folder and see the Webpack bundle analyser report.
For ease of config, pasting the configs below.
webpack.config.js
const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
.BundleAnalyzerPlugin;
const { VueLoaderPlugin } = require("vue-loader");
const TerserPlugin = require("terser-webpack-plugin");
module.exports = (env, options) => {
const devMode = options.mode != "production";
return {
context: path.resolve(__dirname, "src"),
entry: {
"vue-bundle": "./entry/main.js",
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].js",
chunkFilename: "[name].js",
},
module: {
rules: [
{
test: /\.js$/,
exclude: [/node_modules/],
use: {
loader: "babel-loader",
options: {
presets: [
[
"#babel/preset-env",
{
targets: [">25%"],
debug: true,
corejs: "3.6.5",
useBuiltIns: false,
},
],
],
},
},
},
{
test: /\.vue$/,
use: "vue-loader",
},
],
},
plugins: [
new CleanWebpackPlugin(),
new VueLoaderPlugin(),
new BundleAnalyzerPlugin({
openAnalyzer: false,
analyzerMode: "static",
reportFilename: "webpack_bundle_analyser_report.html",
defaultSizes: "gzip",
}),
],
optimization: {
mangleWasmImports: true,
removeAvailableModules: true,
sideEffects: true,
minimize: devMode ? false : true,
minimizer: [
new TerserPlugin({
test: /\.js(\?.*)?$/i,
exclude: /\/node-modules/,
parallel: 4,
extractComments: false,
}),
],
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: "vendor-bundle",
chunks: "all",
},
},
},
},
devtool: devMode ? "eval-cheap-source-map" : false,
resolve: {
extensions: [".ts", ".js", ".vue", ".json"],
alias: {
vue: "vue/dist/vue.esm-bundler.js"
},
},
};
};
package.json
{
"name": "testPro",
"version": "1.0.0",
"private": true,
"scripts": {
"bundle": "webpack --mode=production --config webpack.config.js",
"bundle-dev": "webpack --mode=development --config webpack.config.js"
},
"devDependencies": {
"#babel/core": "^7.12.3",
"#babel/preset-env": "^7.12.1",
"#babel/preset-typescript": "^7.12.1",
"#vue/compiler-sfc": "^3.0.2",
"babel-loader": "^8.1.0",
"clean-webpack-plugin": "^3.0.0",
"core-js": "^3.6.5",
"regenerator-runtime": "^0.13.7",
"terser-webpack-plugin": "^5.0.3",
"vue-loader": "^16.0.0-beta.4",
"webpack": "^5.3.0",
"webpack-bundle-analyzer": "^3.9.0",
"webpack-cli": "^4.1.0"
},
"dependencies": {
"vue": "^3.0.2"
}
}
Entry file main.js
import { createApp } from 'vue';
import App from '../App.vue';
createApp(App).mount('#app');
Not able to get what I am missing.
I strongly believe it is a bug in Vue 3 so I submitted a bug report - you can track it here
...I reproduced it myself using Vue CLI just to eliminate the chance the problem is in your Webpack config
You have 2 options to workaround this issue:
If you don't need to release right now, just work on your project and wait for a fix (I'm pretty sure it will be fixed - Vue builds for a browser which include compiler does not depend on #babel/parser so it's clear Vue don't need it to work correctly inside browser)
Don't use in-DOM templates and template option (string templates) - put everything in .vue files, <template></template> blocks - Runtime + Compiler vs. Runtime-only. Then you don't need a build with compiler...
EDIT: removed the part about missing process.env.NODE_ENV as --mode param to Webpack CLI does exactly that...

Vue JS: Build command `npm run build` is not able to generate `index.html`

When I'm running npm run build, it is not creating index.html in the dist/ directory. The reason I need index.html is that I want to deploy my Vue project to AWS EC2 (/var/www/html/). What to do to generate this index.html?
My dist/ directory structure after running npm run build:
My package.json:
{
"name": "proto",
"description": "Prototype",
"version": "1.0.0",
"license": "MIT",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"#melmacaluso/vue-modal": "^2.1.0",
"firebase": "^7.14.2",
"fusioncharts": "^3.15.1-sr.1",
"vue": "^2.5.11",
"vue-fusioncharts": "^3.0.4",
"vue-router": "^3.1.6",
"vuex": "^3.3.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"file-loader": "^1.1.4",
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
}
My webpack.config.js:
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
}, {
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
The build command output:
$ npm run build
> proto#1.0.0 build C:\Users\john\Documents\VUE\dummy_prototype_1
> cross-env NODE_ENV=production webpack --progress --hide-modules
In your webpack.config.js, scroll down then add the HtmlWebpackPlugin plugin into module.exports.plugins as #Michal Levy suggested.
Updated:
For the error (webpack.js:348 throw err; TypeError: Cannot read property 'make' of undefined), one possible reason is version issue. The solution is downgrade (uninstall then install) html-webpack-plugin to 3.2.0.
Below is new configuration for plugins:
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
// below is the plugin you need to add
new HtmlWebpackPlugin({
filename: path.resolve(__dirname, './dist/index.html'), // the path where is the `index.html` generated.
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
Just use HtmlWebpackPlugin
It will automatically create (new or from template you provide) index.html in the dist folder and inject any necessary <script> (for js bundles) or <link> (for extracted CSS) tags
As it seems you already have index.html template, use template option - see the docs

Webpack - trying to route/compile my CSS and JS files into CSS and JS specific sub-folders within dist/ folder

I'm pretty new to webpack in general. Just a couple of days in really. For the most part I feel like I've made some pretty good progress on at setting up and integrating webpack into my local development environment. Quite a few bugs and command line errors along the way but I was able to work through most of them up to now. Shout out to Maxmillian Schwärzmuller's short YT series on Webpack to get me started.
Now I'm trying to re-purpose/expand on some of the concepts I've picked up however I'm not yet having any success getting my npm run build (this would be the production command) to compile my CSS files into CSS and JS subfolders (off the root of the site) respectively.
I felt like I was making more progress with my attempts to use the file-loader package within my JS and CSS specific test blocks but now I'm wondering if I'm not either misunderstanding the purpose of the file-loader package or simply not configuring it correctly.
Here are the contents of my webpack.config.js file:
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const extractPlugin = new ExtractTextPlugin({
filename: 'styles.css'
});
module.exports = {
entry: './src/js/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['babel-preset-env']
}
}
// attempted to replicate the same use statement as seen below for the jpg/png test
// and only app.js (not app.bundle.js) was dropped into dist/js/
// {
// loader: 'file-loader',
// options: {
// name: '[name].[ext]',
// outputPath: 'js/',
// publicPath: 'js/'
// }
// }
]
},
{
test: /\.scss$/,
use: extractPlugin.extract({
use: ['css-loader', 'sass-loader']
})
// attempted to modify/replicate the above use statement
// use: [
// {
// loader: 'css-loader',
// loader: 'sass-loader'
// loader: 'file-loader',
// options: {
// name: '[name].[ext]',
// outputPath: 'css/',
// publicPath: 'css/'
// }
// }
// ]
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader'
}
]
},
{
test: /\.(jpg|png)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images/',
publicPath: 'images/'
}
}
]
},
{
test: /\.html$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]'
}
}
],
exclude: path.resolve(__dirname, 'src/index.html')
}
]
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}),
extractPlugin,
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'src/index.html'
}),
new CleanWebpackPlugin(['dist'])
]
};
Here is the package.json file:
{
"name": "nodomaintoseehere.com",
"version": "1.0.0",
"description": "Site repository v1.0",
"private": true,
"main": "./src/app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server",
"build": "webpack -p"
},
"author": "Jeremy Wilson",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"clean-webpack-plugin": "^0.1.19",
"cross-env": "^5.2.0",
"css-loader": "^1.0.0",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.11",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"jquery": "^3.3.1",
"node-sass": "^4.9.3",
"sass-loader": "^7.1.0",
"webpack": "^3.12.0",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^2.11.2"
},
"dependencies": {
"bootstrap": "^4.1.3",
"lodash": "^4.17.10"
}
}
And finally the app.js file
import '../css/styles.scss';
import 'babel-polyfill';
import $ from 'jquery';
Thanks in advance.
Putting assets into different subfolders does not make any differece in performance, nor in use since those are going to sit on your static server everytime until it is redeployed.
There is no way to output js files to js folder since there is no option on babel loader and file-loader does not handle js, they just emit the file, in your case it would endup with duplicated files at the end. File-loader is not ideal to work with javascript files.
For css, you can configure extract-text-plugin.
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const extractPlugin = new ExtractTextPlugin({
filename: 'css/styles.css' // <---
});
module.exports = {
entry: './src/js/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['babel-preset-env']
}
}
]
},
{
test: /\.scss$/,
use: extractPlugin.extract({
use: ['css-loader', 'sass-loader']
})
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader'
}
]
},
{
test: /\.(jpg|png)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images/',
publicPath: 'images/'
}
}
]
},
{
test: /\.html$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]'
}
}
],
exclude: path.resolve(__dirname, 'src/index.html')
}
]
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}),
extractPlugin,
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'src/index.html'
}),
new CleanWebpackPlugin(['dist'])
]
};

.bind no longer working after upgrading to new Aurelia webpack plugins

I'm trying to update my Aurelia project that uses webpack so I can require .scss files in my templates. I've looked at the Aurelia Skeleton project for webpack and have followed this guide to come up with my webpack.config which is listed below. I have also included my package.json file.
I am able to load styles now, but have come across a perplexing issue. None of the my bind statements work anymore. The code itself didn't change and was working fine before this update attempt. I tried using two-way, one-way, etc, but that didn't work either. The #bindable property is always undefined.
<my-custom-element value.bind="something"></my-custom-element>
In MyCustomElement, value is always undefined although something is set properly.
I have tried walking back the package versions and I think it has to do with aurelia-bootstrapper, but I'm not sure.
I'm out of ideas on how to debug this issue. Any help would be much appreciated.
webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const DashboardPlugin = require('webpack-dashboard/plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const { AureliaPlugin, ModuleDependenciesPlugin } = require('aurelia-webpack-plugin');
const { optimize: { CommonsChunkPlugin }, ProvidePlugin } = require('webpack')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const project = require('./package.json');
// config helpers:
const ensureArray = (config) => config && (Array.isArray(config) ? config : [config]) || []
const when = (condition, config, negativeConfig) =>
condition ? ensureArray(config) : ensureArray(negativeConfig)
// primary config:
const title = 'Radar';
const outDir = path.resolve(__dirname, 'dist');
const srcDir = path.resolve(__dirname, 'src');
const nodeModulesDir = path.resolve(__dirname, 'node_modules');
const baseUrl = '/';
// If not done this way the plugin will try to load when only a build is required and cause it to hang.
const addDashboardPlugin = process.env.npm_lifecycle_event === 'webpack' ? [] : [new DashboardPlugin({
port: 3333
})];
const metadata = {
port: process.env.WEBPACK_PORT || 9000,
host: process.env.WEBPACK_HOST || 'localhost'
};
const cssRules = [
{ loader: 'css-loader' },
{
loader: 'postcss-loader',
options: { plugins: () => [require('autoprefixer')({ browsers: ['last 2 versions'] })] }
}
]
module.exports = ({ production, server, extractCss, coverage } = {}) => ({
resolve: {
extensions: ['.js'],
modules: [srcDir, 'node_modules'],
},
entry: {
app: ['aurelia-bootstrapper'],
aurelia: Object.keys(project.dependencies).filter(dep => dep.startsWith('aurelia-')),
vendor: Object.keys(project.dependencies).filter(dep => !dep.startsWith('aurelia-'))
},
devtool: production ? 'source-map' : 'inline-source-map',
output: {
path: outDir,
publicPath: baseUrl,
filename: production ? '[name].[chunkhash].bundle.js' : '[name].[hash].bundle.js',
sourceMapFilename: production ? '[name].[chunkhash].bundle.map' : '[name].[hash].bundle.map',
chunkFilename: production ? '[name].[chunkhash].chunk.js' : '[name].[hash].chunk.js',
},
devServer: {
contentBase: outDir,
// serve index.html for all 404 (required for push-state)
historyApiFallback: true,
port: metadata.port,
host: metadata.host,
watchOptions: {
aggregateTimeout: 300,
poll: 1000
}
},
module: {
rules: [
{
test: /\.scss$/i,
issuer: [{ not: [{ test: /\.html$/i }] }],
loaders: ['style-loader', 'css-loader?sourceMap', 'sass-loader?sourceMap']
},
{
test: /\.scss$/i,
issuer: [{ test: /\.html$/i }],
loaders: ['css-loader?sourceMap', 'sass-loader?sourceMap']
},
// CSS required in JS/TS files should use the style-loader that auto-injects it into the website
// only when the issuer is a .js/.ts file, so the loaders are not applied inside html templates
{
test: /\.css$/i,
issuer: [{ not: [{ test: /\.html$/i }] }],
use: extractCss ? ExtractTextPlugin.extract({
fallback: 'style-loader',
use: cssRules,
}) : ['style-loader', ...cssRules],
},
{
test: /\.css$/i,
issuer: [{ test: /\.html$/i }],
// CSS required in templates cannot be extracted safely
// because Aurelia would try to require it again in runtime
use: cssRules,
},
{ test: /\.html$/i, loader: 'html-loader' },
{
test: /\.js$/i, loader: 'babel-loader', exclude: nodeModulesDir,
options: coverage ? { sourceMap: 'inline', plugins: ['istanbul'] } : {},
},
{ test: /\.json$/i, loader: 'json-loader' },
// use Bluebird as the global Promise implementation:
{ test: /[\/\\]node_modules[\/\\]bluebird[\/\\].+\.js$/, loader: 'expose-loader?Promise' },
// embed small images and fonts as Data Urls and larger ones as files:
{ test: /\.(png|gif|jpg|cur)$/i, loader: 'url-loader', options: { limit: 8192 } },
{ test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff2' } },
{ test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff' } },
// load these fonts normally, as files:
{ test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'file-loader' },
]
},
plugins: [
new AureliaPlugin(),
new ModuleDependenciesPlugin({
'aurelia-dialog': ['./ai-dialog', './ai-dialog-header', './ai-dialog-footer', './ai-dialog-body',
'./attach-focus', './dialog-configuration', './dialog-controller', './dialog-options', './dialog-renderer',
'./dialog-result', './dialog-service', './lifecycle', './renderer'],
'aurelia-chart': ['./elements/chart-element', './attributes/chart-attribute', './observers/model-observer']
}),
new ProvidePlugin({
'Promise': 'bluebird'
}),
new HtmlWebpackPlugin({
template: 'index.ejs',
minify: production ? {
removeComments: true,
collapseWhitespace: true
} : undefined,
metadata: {
title, server, baseUrl
},
}),
new CopyWebpackPlugin([
{ from: 'src/config', to: 'config' },
{ from: 'styles/img', to: 'img' }
]),
...when(extractCss, new ExtractTextPlugin({
filename: production ? '[contenthash].css' : '[id].css',
allChunks: true,
})),
...when(production, new CommonsChunkPlugin({
name: 'common'
})),
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.scss$/i,
cssProcessor: require('cssnano'),
cssProcessorOptions: { discardComments: { removeAll: true } },
canPrint: true
})
].concat(addDashboardPlugin)
})
package.json
"dependencies": {
"aurelia-animator-css": "^1.0.0",
"aurelia-application-insights": "^1.0.0",
"aurelia-binding": "^1.2.0",
"aurelia-bootstrapper": "^2.1.1",
"aurelia-chart": "^0.2.6",
"aurelia-configuration": "1.0.17",
"aurelia-dependency-injection": "^1.3.1",
"aurelia-dialog": "^1.0.0-beta.3.0.0",
"aurelia-event-aggregator": "^1.0.1",
"aurelia-fetch-client": "^1.1.2",
"aurelia-framework": "^1.1.0",
"aurelia-history": "^1.0.0",
"aurelia-history-browser": "^1.0.0",
"aurelia-logging": "^1.3.1",
"aurelia-logging-console": "^1.0.0",
"aurelia-metadata": "^1.0.3",
"aurelia-notify": "^0.8.1",
"aurelia-pal": "^1.3.0",
"aurelia-pal-browser": "^1.1.0",
"aurelia-path": "^1.0.0",
"aurelia-route-recognizer": "^1.0.0",
"aurelia-router": "^1.3.0",
"aurelia-task-queue": "^1.2.0",
"aurelia-templating": "^1.3.0",
"aurelia-templating-binding": "^1.3.0",
"aurelia-templating-resources": "^1.3.1",
"aurelia-templating-router": "^1.1.0",
"aurelia-validation": "^1.0.0",
"bluebird": "^3.3.5",
"json-loader": "^0.5.4",
... //omitted for clarity
},
"devDependencies": {
"aurelia-loader-nodejs": "^1.0.1",
"aurelia-pal-nodejs": "^1.0.0-beta.1.0.0",
"aurelia-tools": "^1.0.0",
"aurelia-webpack-plugin": "^2.0.0-rc.2",
"autoprefixer": "^7.0.0",
"babel-core": "^6.17.0",
"babel-eslint": "^7.2.3",
"babel-loader": "^7.0.0",
"babel-plugin-istanbul": "^4.1.3",
"babel-plugin-lodash": "^3.2.10",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-polyfill": "^6.16.0",
"babel-preset-env": "^1.5.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-1": "^6.24.1",
"babel-register": "^6.11.6",
"concurrently": "^2.2.0",
"copy-webpack-plugin": "^4.0.1",
"cross-env": "^3.1.3",
"css-loader": "^0.28.1",
"eslint": "^3.12.2",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.9.0",
"html-server": "^0.1.1",
"html-webpack-plugin": "^2.22.0",
"json-loader": "^0.5.4",
"node-sass": "^3.13.0",
"optimize-css-assets-webpack-plugin": "^1.3.2",
"package": "^1.0.1",
"postcss-loader": "^1.3.3",
"raw-loader": "^0.5.1",
"rimraf": "^2.5.2",
"sass-loader": "^4.0.2",
"style-loader": "^0.17.0",
"url-loader": "^0.5.8",
"webpack": "^2.6.1",
"webpack-dashboard": "^0.2.0",
"webpack-dev-server": "^2.4.5"
}
nav-bar.html
<template>
<require from='./_nav-bar.scss'></require>
<section class="nav-bar nav-bar__group" data-grid="full">
<div data-grid="full">
<main-menu router.bind="router" data-grid="21"></main-menu>
<user-panel data-grid="3"></user-panel>
</div>
</section>
</template>
main-menu.html
<template class="main-menu">
<ul class="main-menu__nav-list">
<li repeat.for="row of router.navigation">
<a href.bind="row.href"
data-appinsights-category="navigation"
data-appinsights-action="${row.title}"
data-text="${row.title}">
${row.title}
</a>
</li>
</ul>
</template>
main-menu.js
import { bindable, inject } from 'aurelia-framework';
#inject(Element)
export class MainMenuCustomElement {
//This value is always undefined now
#bindable router;
constructor(element) {
this.element = element;
}
toggleMenu() {
//removed for brevity
}
}
I got it to work after adding import babel-polyfill to main.js, changing .babelrc to reference `.babelrc.js like so:
{
"presets": [ "./.babelrc.js" ]
}
I also included .babelrc.js from the skeleton-navigation project.
.babelrc.js
// this file will be used by default by babel#7 once it is released
module.exports = {
"plugins": [
"transform-decorators-legacy",
"transform-class-properties"
],
"presets": [
[
"env", {
"targets": process.env.BABEL_TARGET === 'node' ? {
"node": process.env.IN_PROTRACTOR ? '6' : 'current'
} : {
"browsers": [
"last 2 versions",
"not ie <= 11"
],
"uglify": process.env.NODE_ENV === 'production',
},
"loose": true,
"modules": process.env.BABEL_TARGET === 'node' ? 'commonjs' : false,
"useBuiltIns": true
}
]
]
}

Load bootstrap with webpack for vue

How can I get bootstrap working and loaded with webpack for a vue project?
I have been trying to use this: https://www.npmjs.com/package/bootstrap-sass-webpack
I added the loaders to my webpack.config.js and installed bootstrap-sass-webpack. I get the following error when trying to build:
ERROR in ./~/bootstrap-sass-webpack/index.js
Module not found: Error: Cannot resolve module 'sass' in /Users/joebob/Desktop/vue-webpack-starter/node_modules/bootstrap-sass-webpack
# ./~/bootstrap-sass-webpack/index.js 1:0-76
webpack.config.js
module.exports = {
entry: './src/main.js',
output: {
path: './dist',
publicPath: 'dist/',
filename: 'build.js'
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
},
{
test: /\.vue$/,
loader: 'vue'
},
{ test: /\.woff$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
{ test: /\.ttf$/, loader: "file-loader" },
{ test: /\.eot$/, loader: "file-loader" },
{ test: /\.svg$/, loader: "file-loader" }
]
},
vue: {
loaders: {
js: 'babel'
}
}
}
package.json
{
"name": "vue-webpack-starter",
"version": "1.0.0",
"dependencies": {
"bootstrap-sass-webpack": "0.0.3",
"vue": "^1.0.16",
"vue-router": "^0.7.11"
},
"devDependencies": {
"babel-core": "^6.1.2",
"babel-loader": "^6.1.0",
"babel-plugin-transform-runtime": "^6.1.2",
"babel-preset-es2015": "^6.1.2",
"babel-preset-stage-0": "^6.1.2",
"babel-runtime": "^5.8.0",
"css-loader": "^0.23.0",
"file-loader": "^0.8.5",
"style-loader": "^0.13.0",
"url-loader": "^0.5.7",
"vue-hot-reload-api": "^1.2.0",
"vue-html-loader": "^1.0.0",
"vue-loader": "^7.3.0",
"webpack": "^1.12.2"
}
}
main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './app.vue'
import Home from './home.vue'
import Items from './items.vue'
require("bootstrap-sass-webpack")
Vue.use(VueRouter)
var router = new VueRouter()
router.map({
'/': {
name: 'home',
component: Home
},
'/items': {
name: 'items',
component: Items
}
})
router.start(App, '#app')
Adding sass-loader fixed this error. Am now getting:
ERROR in ./~/bootstrap-sass-webpack/~/css-loader!./~/sass-loader!./~/bootstrap-sass-webpack/bootstrap-sass-styles.loader.js!./~/bootstrap-sass-webpack/bootstrap-sass.config.js
Module build failed:
scripts: {
^
Invalid CSS after "#icon-font-path": expected 1 selector or at-rule, was "bootstrap-sass/..."
in /Users/joebob/Development/vue-webpack-starter/node_modules/bootstrap-sass-webpack/bootstrap-sass.config.js (line 2, column 1)
# ./~/bootstrap-sass-webpack/~/style-loader!./~/bootstrap-sass-webpack/~/css-loader!./~/sass-loader!./~/bootstrap-sass-webpack/bootstrap-sass-styles.loader.js!./~/bootstrap-sass-webpack/bootstrap-sass.config.js 4:2-458
This is what I do using webpack-simple template and bootstrap-sass (https://github.com/vuejs-templates/webpack-simple):
package.json
{
"name": "Example",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "Aleix Fabra <aleixfabra#gmail.com>",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^2.3.3"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-env": "^1.5.1",
"bootstrap-sass": "^3.3.7",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"node-sass": "^4.5.0",
"sass-loader": "^5.0.1",
"vue-loader": "^12.1.0",
"vue-template-compiler": "^2.3.3",
"webpack": "^2.6.1",
"webpack-dev-server": "^2.4.5"
}
}
main.js
window.$ = window.jQuery = require('jquery')
import 'bootstrap-sass'
import 'bootstrap-sass/assets/stylesheets/_bootstrap.scss'
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
webpack.config.js
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this necessary.
'scss': 'vue-style-loader!css-loader!sass-loader',
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
},
{
test: /\.(otf|eot|woff|woff2|ttf|svg)$/,
loader: 'file-loader'
},
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
You should install the sass-loader:
npm install sass-loader --save-dev