I am experimenting with webpack and wanted to use, among others, the bootstrap4 and font-awesome. All modules are recognized except these two.
The package.json created after npm install <module>:
{
"name": "blog",
"version": "1.0.0",
"description": "my site",
"main": "index.html",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.0.0",
"bootstrap4": "0.0.1-security",
"css-loader": "^0.28.4",
"font-awesome": "^4.7.0",
"less": "^2.7.2",
"less-loader": "^4.0.4",
"lodash": "^4.17.4",
"moment": "^2.18.1",
"style-loader": "^0.18.2",
"vue": "^2.3.4"
}
}
The webpack.config.js file I use:
const path = require('path');
module.exports = {
entry: path.join(__dirname, 'entry.js'),
output: {
path: path.join(__dirname, 'src'),
filename: 'build.js'
},
module: {
rules: [{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
}
]
}
}
Running webpack generates errors for bootstrap4 and font-awesome:
D:\Dropbox\dev\jekyll\blog\webpack>webpack
Hash: 2501a45f8eacb5b3fdac
Version: webpack 2.7.0
Time: 3028ms
Asset Size Chunks Chunk Names
build.js 1.24 MB 0 [emitted] [big] main
[0] ./~/moment/moment.js 129 kB {0} [built]
[14] ./~/moment/locale/bo.js 3.47 kB {0} [optional] [built]
[117] ./~/style-loader/lib/addStyles.js 8.7 kB {0} [built]
[118] (webpack)/buildin/global.js 509 bytes {0} [built]
[119] (webpack)/buildin/module.js 517 bytes {0} [built]
[120] ./js/explorer.js 1.35 kB {0} [built]
[121] ./~/lodash/lodash.js 540 kB {0} [built]
[122] ./less/navbar.less 1.13 kB {0} [built]
[123] ./less/style.less 1.12 kB {0} [built]
[124] ./~/vue/dist/vue.runtime.esm.js 195 kB {0} [built]
[125] ./entry.js 572 bytes {0} [built]
[126] ./~/css-loader!./~/less-loader/dist/cjs.js!./less/navbar.less 2.8 kB {0} [built]
[127] ./~/css-loader!./~/less-loader/dist/cjs.js!./less/style.less 7.67 kB {0} [built]
[128] ./~/moment/locale ^\.\/.*$ 2.79 kB {0} [optional] [built]
[129] ./~/process/browser.js 5.42 kB {0} [built]
+ 116 hidden modules
ERROR in ./entry.js
Module not found: Error: Can't resolve 'font-awesome' in 'D:\Dropbox\dev\jekyll\blog\webpack'
@ ./entry.js 16:0-39
ERROR in ./entry.js
Module not found: Error: Can't resolve 'bootstrap4' in 'D:\Dropbox\dev\jekyll\blog\webpack'
@ ./entry.js 15:0-36
The referenced entry.js:
import Vue from 'vue'
import bootstrap4 from 'bootstrap4'
import fontawesome from 'font-awesome'
import _ from 'lodash'
import moment from 'moment'
require('./less/style.less')
require('./less/navbar.less')
//require('./js/posts.js')
require('./js/explorer.js')
console.log('hello')
Why are these two modules a problem?
The complete error log from webpack, for completeness:
D:\Dropbox\dev\jekyll\blog\webpack>webpack --display-error-details
Hash: 2501a45f8eacb5b3fdac
Version: webpack 2.7.0
Time: 2952ms
Asset Size Chunks Chunk Names
build.js 1.24 MB 0 [emitted] [big] main
[0] ./~/moment/moment.js 129 kB {0} [built]
[14] ./~/moment/locale/bo.js 3.47 kB {0} [optional] [built]
[117] ./~/style-loader/lib/addStyles.js 8.7 kB {0} [built]
[118] (webpack)/buildin/global.js 509 bytes {0} [built]
[119] (webpack)/buildin/module.js 517 bytes {0} [built]
[120] ./js/explorer.js 1.35 kB {0} [built]
[121] ./~/lodash/lodash.js 540 kB {0} [built]
[122] ./less/navbar.less 1.13 kB {0} [built]
[123] ./less/style.less 1.12 kB {0} [built]
[124] ./~/vue/dist/vue.runtime.esm.js 195 kB {0} [built]
[125] ./entry.js 572 bytes {0} [built]
[126] ./~/css-loader!./~/less-loader/dist/cjs.js!./less/navbar.less 2.8 kB {0} [built]
[127] ./~/css-loader!./~/less-loader/dist/cjs.js!./less/style.less 7.67 kB {0} [built]
[128] ./~/moment/locale ^\.\/.*$ 2.79 kB {0} [optional] [built]
[129] ./~/process/browser.js 5.42 kB {0} [built]
+ 116 hidden modules
ERROR in ./entry.js
Module not found: Error: Can't resolve 'font-awesome' in 'D:\Dropbox\dev\jekyll\blog\webpack'
resolve 'font-awesome' in 'D:\Dropbox\dev\jekyll\blog\webpack'
Parsed request is a module
using description file: D:\Dropbox\dev\jekyll\blog\webpack\package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration
after using description file: D:\Dropbox\dev\jekyll\blog\webpack\package.json (relative path: .)
resolve as module
D:\Dropbox\dev\jekyll\blog\node_modules doesn't exist or is not a directory
D:\Dropbox\dev\jekyll\node_modules doesn't exist or is not a directory
D:\Dropbox\dev\node_modules doesn't exist or is not a directory
D:\Dropbox\node_modules doesn't exist or is not a directory
D:\node_modules doesn't exist or is not a directory
looking for modules in D:\Dropbox\dev\jekyll\blog\webpack\node_modules
using description file: D:\Dropbox\dev\jekyll\blog\webpack\package.json (relative path: ./node_modules)
Field 'browser' doesn't contain a valid alias configuration
after using description file: D:\Dropbox\dev\jekyll\blog\webpack\package.json (relative path: ./node_modules)
using description file: D:\Dropbox\dev\jekyll\blog\webpack\node_modules\font-awesome\package.json (relative path: .)
no extension
Field 'browser' doesn't contain a valid alias configuration
D:\Dropbox\dev\jekyll\blog\webpack\node_modules\font-awesome is not a file
.js
Field 'browser' doesn't contain a valid alias configuration
D:\Dropbox\dev\jekyll\blog\webpack\node_modules\font-awesome.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
D:\Dropbox\dev\jekyll\blog\webpack\node_modules\font-awesome.json doesn't exist
as directory
existing directory
using path: D:\Dropbox\dev\jekyll\blog\webpack\node_modules\font-awesome\index
using description file: D:\Dropbox\dev\jekyll\blog\webpack\node_modules\font-awesome\package.json (relative path: ./index)
no extension
Field 'browser' doesn't contain a valid alias configuration
D:\Dropbox\dev\jekyll\blog\webpack\node_modules\font-awesome\index doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
D:\Dropbox\dev\jekyll\blog\webpack\node_modules\font-awesome\index.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
D:\Dropbox\dev\jekyll\blog\webpack\node_modules\font-awesome\index.json doesn't exist
[D:\Dropbox\dev\jekyll\blog\node_modules]
[D:\Dropbox\dev\jekyll\node_modules]
[D:\Dropbox\dev\node_modules]
[D:\Dropbox\node_modules]
[D:\node_modules]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\font-awesome]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\font-awesome.js]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\font-awesome.json]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\font-awesome\index]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\font-awesome\index.js]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\font-awesome\index.json]
@ ./entry.js 16:0-39
ERROR in ./entry.js
Module not found: Error: Can't resolve 'bootstrap4' in 'D:\Dropbox\dev\jekyll\blog\webpack'
resolve 'bootstrap4' in 'D:\Dropbox\dev\jekyll\blog\webpack'
Parsed request is a module
using description file: D:\Dropbox\dev\jekyll\blog\webpack\package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration
after using description file: D:\Dropbox\dev\jekyll\blog\webpack\package.json (relative path: .)
resolve as module
D:\Dropbox\dev\jekyll\blog\node_modules doesn't exist or is not a directory
D:\Dropbox\dev\jekyll\node_modules doesn't exist or is not a directory
D:\Dropbox\dev\node_modules doesn't exist or is not a directory
D:\Dropbox\node_modules doesn't exist or is not a directory
D:\node_modules doesn't exist or is not a directory
looking for modules in D:\Dropbox\dev\jekyll\blog\webpack\node_modules
using description file: D:\Dropbox\dev\jekyll\blog\webpack\package.json (relative path: ./node_modules)
Field 'browser' doesn't contain a valid alias configuration
after using description file: D:\Dropbox\dev\jekyll\blog\webpack\package.json (relative path: ./node_modules)
using description file: D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\package.json (relative path: .)
no extension
Field 'browser' doesn't contain a valid alias configuration
D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4 is not a file
.js
Field 'browser' doesn't contain a valid alias configuration
D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4.json doesn't exist
as directory
existing directory
use ./index.js from main in package.json
using description file: D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration
after using description file: D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\package.json (relative path: .)
using description file: D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\package.json (relative path: ./index.js)
no extension
Field 'browser' doesn't contain a valid alias configuration
D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\index.js doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\index.js.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\index.js.json doesn't exist
as directory
D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\index.js doesn't exist
using path: D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\index
using description file: D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\package.json (relative path: ./index)
no extension
Field 'browser' doesn't contain a valid alias configuration
D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\index doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\index.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\index.json doesn't exist
[D:\Dropbox\dev\jekyll\blog\node_modules]
[D:\Dropbox\dev\jekyll\node_modules]
[D:\Dropbox\dev\node_modules]
[D:\Dropbox\node_modules]
[D:\node_modules]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4.js]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4.json]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\index.js]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\index.js.js]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\index.js.json]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\index.js]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\index]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\index.js]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\index.json]
@ ./entry.js 15:0-36
font-awesome does not have any fields in package.json that are recognised by webpack and there is also no index.js in the package, therefore it can't be imported as usual. Presumably you want to use the CSS file, so you could import it like this.
import 'font-awesome/css/font-awesome.css';
bootstrap4 is not a real package. From the npm registry - bootstrap4:
Security holding package
This package name is not currently in use, but was formerly occupied by another package. To avoid malicious use, npm is hanging on to the package name, but loosely, and we'll probably give it to you if you want it.
You may adopt this package by contacting support@npmjs.com and requesting the name.
You need the actual boostrap package. The stable version is currently 3.3.7, but the v4 alpha is available on npm. You can install it with:
npm install --save bootstrap@next