Issues with not finding glyphicons or aliases during building - node.js

Question

I am seeing an error relating to a bunch of .eot glyphicons from Bootstrap that are not being found. I am getting two errors which I think are related. A bunch of errors for not being able to resolve or that a glyphicon doesn't exist, mixed in with errors about the field browser not containing valid alias configuration.
I have included the full error message as well as the babelrc file and webpack config. I will also include the longer package.json below in case it's relevant.
The errors say it is looking for a path like:
/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-sass/assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot
However the actual path should be:
/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot
Errors:
ERROR in ./node_modules/bootstrap-loader/no-op.js (./node_modules/css-loader/dist/cjs.js!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js?sourceMap!./node_modules/bootstrap-loader/lib/bootstrap.styles.loader.js?{"bootstrapVersion":3,"useCustomIconFontPath":false,"extractStyles":false,"styleLoaders":["style-loader","css-loader","sass-loader"],"styles":["mixins","normalize","print","glyphicons","scaffolding","type","code","grid","tables","forms","buttons","component-animations","dropdowns","button-groups","input-groups","navs","navbar","breadcrumbs","pagination","pager","labels","badges","jumbotron","thumbnails","alerts","progress-bars","media","list-group","panels","wells","responsive-embed","close","modals","tooltip","popovers","carousel","utilities","responsive-utilities"],"scripts":["transition","alert","button","carousel","collapse","dropdown","modal","tooltip","popover","scrollspy","tab","affix"],"configFilePath":"/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-loader/.bootstraprc-3-default","bootstrapPath":"/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-sass","bootstrapRelPath":"../bootstrap-sass"}!./node_modules/bootstrap-loader/no-op.js)
Module not found: Error: Can't resolve '../bootstrap-sass/assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot' in '/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-loader'
resolve '../bootstrap-sass/assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot' in '/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-loader'
using description file: /var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-loader/package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration
using description file: /var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-sass/package.json (relative path: ./assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot)
no extension
Field 'browser' doesn't contain a valid alias configuration
/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-sass/assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot doesn't exist
.jsx
Field 'browser' doesn't contain a valid alias configuration
/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-sass/assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot.jsx doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-sass/assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-sass/assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot.json doesn't exist
.scss
Field 'browser' doesn't contain a valid alias configuration
/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-sass/assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot.scss doesn't exist
as directory
.babelrc:
{
"presets": [
"#babel/preset-env",
"#babel/preset-react",
"#babel/preset-flow"
],
"plugins": [
"react-hot-loader/babel",
"#babel/plugin-syntax-dynamic-import",
"#babel/plugin-syntax-import-meta",
[
"#babel/plugin-proposal-decorators",
{
"legacy": true
}
],
"#babel/plugin-proposal-class-properties",
"#babel/plugin-proposal-json-strings",
"#babel/plugin-proposal-function-sent",
"#babel/plugin-proposal-export-namespace-from",
"#babel/plugin-proposal-numeric-separator",
"#babel/plugin-proposal-throw-expressions",
"#babel/plugin-proposal-export-default-from",
"#babel/plugin-proposal-logical-assignment-operators",
"#babel/plugin-proposal-optional-chaining",
[
"#babel/plugin-proposal-pipeline-operator",
{
"proposal": "minimal"
}
],
"#babel/plugin-proposal-nullish-coalescing-operator",
"#babel/plugin-proposal-do-expressions",
"#babel/plugin-proposal-function-bind",
"#babel/plugin-transform-object-assign"
]
}
common.config.js (aka webpack config):
const path = require('path');
const autoprefixer = require('autoprefixer');
const merge = require('webpack-merge');
const development = require('./dev.config');
const devprod = require('./dev.configPROD');
const production = require('./prod.config');
// require('babel-polyfill').default;
const TARGET = process.env.npm_lifecycle_event;
const PATHS = {
app: path.join(__dirname, '../src'),
build: path.join(__dirname, '../dist'),
};
process.env.BABEL_ENV = TARGET;
const common = {
entry: [
PATHS.app,
],
output: {
path: PATHS.build,
filename: 'bundle.js',
},
resolve: {
extensions: ['.jsx', '.js', '.json', '.scss'],
modules: ['node_modules', PATHS.app],
},
module: {
rules: [{
test: /bootstrap-sass\/assets\/javascripts\//,
use: [
{ loader: 'imports-loader?jQuery=jquery' },
]
}, {
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
use: [
{ loader: 'url-loader?limit=10000&mimetype=application/font-woff' },
]
}, {
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
use: [
{ loader: 'url-loader?limit=10000&mimetype=application/font-woff2' },
]
}, {
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
use: [
{ loader: 'url-loader?limit=10000&mimetype=application/octet-stream' },
]
}, {
test: /\.otf(\?v=\d+\.\d+\.\d+)?$/,
use: [
{ loader: 'url-loader?limit=10000&mimetype=application/font-otf' },
]
}, {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
use: [
{ loader: 'url-loader?limit=100000' },
]
}, {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
use: [
{ loader: 'file-loader' },
]
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: [
{ loader: 'url-loader?limit=10000&mimetype=image/svg+xml' },
]
}, {
test: /\.m?js$/,
use: [{
loader: 'babel-loader',
options:
{
presets: [],
},
}],
exclude: /node_modules/,
}, {
test: /\.png$/,
use: [
{ loader: 'file-loader?name=[name].[ext]' },
]
}, {
test: /\.jpg$/,
use: [
{ loader: 'file-loader?name=[name].[ext]' },
]
}, {
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
]
}],
},
};
if (TARGET === 'start' || !TARGET) {
module.exports = merge(development, common);
}
if (TARGET === 'build' || !TARGET) {
module.exports = merge(devprod, common);
//module.exports = merge(production, common);
//Results in graphical glitchs (css) because of uglify-js
//development config does not run uglify-js and therefore produces usable bundle
}
It also loads in another config file for webpack which I'll include here too:
dev.configPROD.js:
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');
module.exports = {
mode: 'development',
devtool: 'cheap-module-eval-source-map',
entry: [
'bootstrap-loader',
'./src/index',
],
output: {
publicPath: '/dist/',
},
module: {
rules: [{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: () => [autoprefixer()],
},
},
'sass-loader',
],
}),
}],
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"developmentPROD"',
},
__DEVELOPMENT__: true,
}),
new ExtractTextPlugin('bundle.css'),
new webpack.optimize.OccurrenceOrderPlugin(),
// new webpack.HotModuleReplacementPlugin(), //no pings back to webpack "_hrm"
new webpack.NoEmitOnErrorsPlugin(),
new webpack.ProvidePlugin({
jQuery: 'jquery',
'window.jQuery': 'jquery',
Tether: 'tether',
'window.Tether': 'tether',
Popper: ['popper.js', 'default'],
Alert: 'exports-loader?Alert!bootstrap/js/dist/alert',
Button: 'exports-loader?Button!bootstrap/js/dist/button',
Carousel: 'exports-loader?Carousel!bootstrap/js/dist/carousel',
Collapse: 'exports-loader?Collapse!bootstrap/js/dist/collapse',
Dropdown: 'exports-loader?Dropdown!bootstrap/js/dist/dropdown',
Modal: 'exports-loader?Modal!bootstrap/js/dist/modal',
Popover: 'exports-loader?Popover!bootstrap/js/dist/popover',
Scrollspy: 'exports-loader?Scrollspy!bootstrap/js/dist/scrollspy',
Tab: 'exports-loader?Tab!bootstrap/js/dist/tab',
Tooltip: 'exports-loader?Tooltip!bootstrap/js/dist/tooltip',
Util: 'exports-loader?Util!bootstrap/js/dist/util',
}),
],
};
And finally the package.json:
{
"name": "redux-easy-boilerplate",
"version": "1.3.3",
"description": "",
"scripts": {
"clean": "rimraf dist",
"build": "webpack --progress --verbose --colors --display-error-details --config webpack/common.config.js",
"build:production": "npm run clean && npm run build",
"lint": "eslint src",
"start": "node bin/server.js",
"test": "karma start"
},
"repository": {
"type": "git",
"url": ""
},
"keywords": [
"react",
"reactjs",
"boilerplate",
"redux",
"hot",
"reload",
"hmr",
"live",
"edit",
"webpack"
],
"author": "https://github.com/anorudes, https://github.com/keske",
"license": "MIT",
"devDependencies": {
"#babel/core": "7.4.5",
"#babel/plugin-proposal-class-properties": "^7.0.0",
"#babel/plugin-proposal-decorators": "^7.0.0",
"#babel/plugin-proposal-do-expressions": "^7.0.0",
"#babel/plugin-proposal-export-default-from": "^7.0.0",
"#babel/plugin-proposal-export-namespace-from": "^7.0.0",
"#babel/plugin-proposal-function-bind": "^7.0.0",
"#babel/plugin-proposal-function-sent": "^7.0.0",
"#babel/plugin-proposal-json-strings": "^7.0.0",
"#babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
"#babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
"#babel/plugin-proposal-numeric-separator": "^7.0.0",
"#babel/plugin-proposal-optional-chaining": "^7.0.0",
"#babel/plugin-proposal-pipeline-operator": "^7.0.0",
"#babel/plugin-proposal-throw-expressions": "^7.0.0",
"#babel/plugin-syntax-dynamic-import": "^7.0.0",
"#babel/plugin-syntax-import-meta": "^7.0.0",
"#babel/polyfill": "7.4.4",
"autoprefixer": "9.6.0",
"axios": "0.19.0",
"babel-eslint": "10.0.2",
"babel-loader": "8.0.6",
"babel-plugin-react-transform": "^3.0.0",
"bootstrap": "4.3.1",
"bootstrap-loader": "^3.0.4",
"bootstrap-sass": "3.4.1",
"bootstrap-webpack": "0.0.6",
"classnames": "2.2.6",
"css-loader": "3.0.0",
"csswring": "^7.0.0",
"deep-equal": "^1.0.1",
"eslint": "^6.0.1",
"eslint-config-airbnb": "17.1.0",
"eslint-plugin-import": "2.18.0",
"eslint-plugin-jsx-a11y": "6.2.1",
"eslint-plugin-react": "7.14.2",
"expect": "24.8.0",
"exports-loader": "^0.7.0",
"expose-loader": "^0.7.5",
"express": "4.17.1",
"express-open-in-editor": "^3.1.1",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^4.0.0",
"gapi": "0.0.3",
"history": "4.9.0",
"http-proxy": "^1.17.0",
"imports-loader": "^0.8.0",
"jasmine-core": "3.4.0",
"jquery": "3.4.1",
"jwt-decode": "^2.2.0",
"karma": "4.1.0",
"karma-chrome-launcher": "^2.2.0",
"karma-mocha": "^1.3.0",
"karma-webpack": "4.0.2",
"less": "3.9.0",
"less-loader": "^5.0.0",
"lodash": "4.17.11",
"material-ui": "^1.0.0-beta.47",
"material-ui-icons": "^1.0.0-beta.36",
"mocha": "^6.1.4",
"morgan": "1.9.1",
"node-sass": "4.12.0",
"npm-install-webpack-plugin": "^4.0.5",
"postcss-import": "^12.0.1",
"postcss-loader": "3.0.0",
"q": "^1.5.1",
"qs": "6.7.0",
"rc-datepicker": "5.0.14",
"react": "16.8.6",
"react-addons-css-transition-group": "^15.6.2",
"react-calendar-component": "^3.0.0",
"react-date-picker": "7.5.1",
"react-datepicker": "2.7.0",
"react-document-meta": "^3.0.0-beta.5",
"react-dom": "16.8.6",
"react-forms": "^2.0.0-beta33",
"react-hot-loader": "4.11.1",
"react-loading-order-with-animation": "^1.0.0",
"react-onclickoutside": "6.8.0",
"react-redux": "7.1.0",
"react-router": "5.0.1",
"react-router-redux": "^4.0.8",
"react-select": "^3.0.4",
"react-tap-event-plugin": "3.0.3",
"react-transform-hmr": "^1.0.4",
"redux": "4.0.1",
"redux-form": "8.2.4",
"redux-logger": "3.0.6",
"redux-thunk": "^2.3.0",
"resolve-url-loader": "3.1.0",
"rimraf": "2.6.3",
"sass-loader": "7.1.0",
"style-loader": "^0.23.1",
"uglifyjs-webpack-plugin": "2.1.3",
"url-loader": "2.0.1",
"webpack": "4.35.0",
"webpack-cli": "3.3.5",
"webpack-dev-middleware": "3.7.0",
"webpack-dev-server": "3.7.2",
"webpack-hot-middleware": "2.25.0",
"webpack-merge": "4.2.1",
"yargs": "^13.2.4"
},
"dependencies": {
"#babel/cli": "7.4.4",
"#babel/core": "^7.0.0",
"#babel/plugin-proposal-object-rest-spread": "^7.0.0",
"#babel/plugin-transform-object-assign": "7.2.0",
"#babel/preset-env": "7.4.5",
"#babel/preset-flow": "7.0.0",
"#babel/preset-react": "^7.0.0",
"#material-ui/core": "4.1.3",
"#material-ui/icons": "4.2.1",
"material-ui-pickers": "2.2.4",
"moment": "2.24.0",
"npm-check-updates": "3.1.12",
"papaparse": "5.0.0",
"prop-types": "15.7.2",
"query-string": "6.8.1",
"react-csv": "1.1.1",
"react-dates": "20.2.4",
"react-document-title": "^2.0.3",
"react-handsontable": "0.3.2",
"react-scripts": "3.0.1",
"react-select-fast-filter-options": "^0.2.3",
"react-virtualized-select": "^3.1.3",
"reactstrap": "8.0.0"
}
}

Answer 1

This issue could be solve by simply changing variables that indicate the path of the fonts folder oustside the stylsheets folder.
2 variables have to be used at import
// Bootstrap
$bootstrap-sass-asset-helper: false !default;
$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../../fonts/bootstrap/") !default;
#import 'bootstrap-sass';

Answer 2

I just faced the same issue trying to build an old project.
The path of the fonts-directory is incorrect, for some reason.
The correct path would be /node_modules/bootstrap-sass/assets/fonts instead of /node_modules/bootstrap-sass/assets/stylesheets/fonts
As a workaround, I just copied the /node_modules/bootstrap-sass/assets/fonts-folder into /node_modules/bootstrap-sass/assets/stylesheets/.