Trying to implement bootstrap-loader for webpack, but I keep running into the same issue. Tried bringing it up with the github repo devs, but no they said it works? They also recommended downgrading to bootstrap alpha 2, which did not resolve the issue.
repo for reference
error
ERROR in ./~/bootstrap-loader/lib/bootstrap.loader.js?configFilePath=/home/p3pt/dev/java/projects/sba2-wip/frontend/config/.bootstraprc!./~/bootstrap-loader/no-op.js
Module build failed: Error:
Could not find bootstrap version: '4'. Did you install it?
The package is 'bootstrap' for bootstrap v4 and 'bootstrap-sass' for v3.
at Object.module.exports.pitch (/home/p3pt/dev/java/projects/sba2-wip/frontend/node_modules/bootstrap-loader/lib/bootstrap.loader.js:114:11)
debug log
[bootstrap-loader]: bootstrap-loader is using config file at /home/p3pt/dev/java/projects/sba2-wip/frontend/config/.bootstraprc
[bootstrap-loader]: Hey, we're in DEBUG mode because you have
your config log level set to 'debug'.
[bootstrap-loader]: Query from webpack config: ?configFilePath=/home/p3pt/dev/java/projects/sba2-wip/frontend/config/.bootstraprc
[bootstrap-loader]: Using Bootstrap module: bootstrap
[bootstrap-loader]: resolveModule error is [Error: Cannot find module 'bootstrap' from '/home/p3pt/dev/java/projects/sba2-wip/frontend/node_modules/bootstrap-loader/lib/utils']
[bootstrap-loader]: Bootstrap module location (abs): false
webpack config
const webpackMerge = require('webpack-merge');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const DefinePlugin = require('webpack/lib/DefinePlugin');
const commonConfig = require('./webpack.common.js');
const helpers = require('./helpers');
const ENV = process.env.ENV = process.env.NODE_ENV = 'development';
const HMR = helpers.hasProcessFlag('hot');
const METADATA = webpackMerge(commonConfig.metadata, {
host: 'localhost',
port: 3000,
ENV: ENV,
HMR: HMR
});
const bootstrapDevEntryPoint = 'bootstrap-loader/lib/bootstrap.loader?' +
`configFilePath=${__dirname}/.bootstraprc` +
'!bootstrap-loader/no-op.js';
module.exports = webpackMerge(commonConfig, {
metadata: METADATA,
debug: true,
devtool: 'cheap-module-eval-source-map',
entry: {
bootstrapDevEntryPoint
},
output: {
path: helpers.root('dist'),
filename: '[name].js',
chunkFilename: '[id].chunk.js',
sourceMapFilename: '[name].map',
library: 'ac_[name]',
libraryTarget: 'var',
},
plugins: [
new DefinePlugin({
'ENV': JSON.stringify(METADATA.ENV),
'HMR': METADATA.HMR,
'process.env': {
'ENV': JSON.stringify(METADATA.ENV),
'NODE_ENV': JSON.stringify(METADATA.ENV),
'HMR': METADATA.HMR
}
}),
],
devServer: {
port: METADATA.port,
host: METADATA.host,
historyApiFallback: true,
watchOptions: {
aggregateTimeout: 300,
poll: 1000
},
outputPath: helpers.root('dist')
},
node: {
global: 'window',
crypto: 'empty',
process: true,
module: false,
clearImmediate: false,
setImmediate: false
}
});
package.json
...
"dependencies": {
"#angular/common": "2.0.0-rc.5",
"#angular/compiler": "2.0.0-rc.5",
"#angular/core": "2.0.0-rc.5",
"#angular/forms": "0.3.0",
"#angular/http": "2.0.0-rc.5",
"#angular/platform-browser": "2.0.0-rc.5",
"#angular/platform-browser-dynamic": "2.0.0-rc.5",
"#angular/platform-server": "2.0.0-rc.5",
"#angular/router": "3.0.0-rc.1",
"bootstrap": "^4.0.0-alpha.2",
"core-js": "^2.4.1",
"font-awesome": "^4.6.3",
"jquery": "^3.1.0",
"lodash": "^4.15.0",
"moment": "^2.14.1",
"ng2-bootstrap": "^1.0.24",
"rxjs": "5.0.0-beta.11",
"tether": "^1.3.4",
"zone.js": "^0.6.17"
},
"devDependencies": {
"#types/jasmine": "^2.2.33",
"#types/lodash": "4.14.34",
"#types/node": "^6.0.38",
"#types/source-map": "^0.1.26",
"#types/webpack": "^1.12.33",
"angular2-hmr": "~0.8.1",
"angular2-template-loader": "^0.5.0",
"autoprefixer": "^6.4.0",
"awesome-typescript-loader": "2.2.1",
"bootstrap-loader": "^2.0.0-beta.3",
"codelyzer": "0.0.28",
"css-loader": "^0.24.0",
"extract-text-webpack-plugin": "^2.0.0-beta.3",
"file-loader": "^0.9.0",
"font-awesome-sass-loader": "^1.0.2",
"html-loader": "^0.4.3",
"html-webpack-plugin": "^2.22.0",
"http-server": "^0.9.0",
"imports-loader": "^0.6.5",
"istanbul-instrumenter-loader": "^0.2.0",
"jasmine-core": "^2.4.1",
"json-loader": "^0.5.4",
"karma": "^1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-coverage": "^1.1.1",
"karma-jasmine": "^1.0.2",
"karma-mocha-reporter": "^2.1.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^1.8.0",
"node-sass": "^3.8.0",
"postcss-loader": "^0.10.1",
"raw-loader": "^0.5.1",
"remap-istanbul": "^0.6.4",
"resolve": "^1.1.7",
"resolve-url-loader": "^1.6.0",
"rimraf": "^2.5.4",
"sass-loader": "^4.0.0",
"source-map-loader": "^0.1.5",
"style-loader": "^0.13.1",
"to-string-loader": "^1.1.4",
"ts-helpers": "1.1.1",
"ts-node": "^1.3.0",
"tslint": "^3.15.1",
"tslint-loader": "^2.1.5",
"typescript": "^2.0.0-beta",
"url-loader": "^0.5.7",
"webpack": "^2.1.0-beta.21",
"webpack-dev-server": "^2.1.0-beta.0",
"webpack-merge": "^0.14.1"
}
...
The issue is that bootstrap alpha 3 is broken, and the recommendation to downgrade to alpha 2 actually does work. I misunderstood that npm install would pick up on the ^ symbol and upgrade the package.
The fix revolves in changing the following in package.json
change
"bootstrap": "^4.0.0-alpha.2"
to
"bootstrap": "4.0.0-alpha.2"
Related
I've been cleaning up my npm audit errors and after I was done I could not execute npm tun build anymore.
Error
ERROR in web/themes/custom/js/funds-chunk.js from Terser
Unexpected token: punc ()) [webpack://./node_modules/source-map-loader/dist/cjs.js!./frontend/js/shared/select2.countSelectionAdapter.js:18,0][web/themes/custom/js/funds-chunk.js:26214,4]
at ne (/node_modules/terser/dist/bundle.min.js:1:19592)
at c (/node_modules/terser/dist/bundle.min.js:1:28298)
at l (/node_modules/terser/dist/bundle.min.js:1:28389)
at f (/node_modules/terser/dist/bundle.min.js:1:28442)
at /node_modules/terser/dist/bundle.min.js:1:38167
at x (/node_modules/terser/dist/bundle.min.js:1:38198)
at O (/node_modules/terser/dist/bundle.min.js:1:34874)
at U (/node_modules/terser/dist/bundle.min.js:1:42405)
at me (/node_modules/terser/dist/bundle.min.js:1:48326)
at /terser/dist/bundle.min.js:1:49206
package.json
{
...
"scripts": {
"build": "webpack --config webpack.config.js --env production",
},
"devDependencies": {
"#babel/core": "^7.10.4",
"#types/jquery": "^3.5.1",
"babel-loader": "^8.1.0",
"css-loader": "^3.6.0",
"file-loader": "^6.0.0",
"image-webpack-loader": "^6.0.0",
"mini-css-extract-plugin": "^1.6.2",
"prettier": "2.8.1",
"sass": "1.32",
"sass-loader": "^9.0.2",
"scss-loader": "0.0.1",
"terser-webpack-plugin": "^3.0.6",
"ts-loader": "^8.0.18",
"typescript": "^4.2.3",
"webpack-cli": "^4.7.2",
"webpack-merge": "^5.0.8"
},
"dependencies": {
"#popperjs/core": "^2.9.2",
"#types/bootstrap": "^5.0.12",
"#types/googlemaps": "^3.43.3",
"#types/iframe-resizer": "^3.5.9",
"#types/js-cookie": "^3.0.0",
"#types/requirejs": "^2.1.32",
"autoprefixer": "^9.8.5",
"bootstrap": "^4.0.0",
"filemanager-webpack-plugin": "^8.0.0",
"fork-ts-checker-webpack-plugin": "^6.2.0",
"highcharts": "^9.3.3",
"highlight.js": "^10.1.1",
"iframe-resizer": "^3.5.5",
"jquery": "^3.5.1",
"jquery-quicksand": "^1.6.0",
"js-cookie": "^3.0.1",
"loader-utils": "^2.0.3",
"parsleyjs": "^2.9.2",
"popper.js": "^1.0.8",
"postcss-loader": "^3.0.0",
"query-string": "^7.0.1",
"select2": "^4.0.13",
"slick-carousel": "^1.8.1",
"source-map-loader": "^2.0.1",
"swiper": "^6.5.3 <6.8",
"tippy.js": "^6.2.6",
"webpack": "^5.30.0"
},
"overrides": {
"got": "12.1.0",
"semver-regex#<3.1.4": "3.1.4",
"semver-regex#>=4.0.0 <4.0.3": "4.0.3",
"trim-newlines": "4.0.1",
"minimist": "1.2.6",
"terser#<4.8.1": "4.8.1",
"terser#>=5.0.0 <5.14.2": "5.14.2",
"nth-check": "2.0.1",
"minimatch": "3.0.5"
}
}
webpack.config.prod.js
const TerserPlugin = require('terser-webpack-plugin');
const path = require('path');
module.exports = {
mode: 'production',
devtool: 'source-map',
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
parallel: false,
terserOptions: {
ecma: 5, // IE11
compress: true,
output: {
comments: false,
beautify: false
}
}
})
]
},
module: {
rules: [{
test: /images.*\.(jpg|jpeg|gif|png|svg|webp)$/i,
use: info => {
const theme = path.basename(info.issuer, path.extname(info.issuer));
return [{
loader: "file-loader",
options: {
outputPath: url => path.join('/web/themes/custom', theme, 'dist/images', url),
name: "[name].[ext]",
publicPath: '../images'
},
},
]
}
}]
}
};
I've looked into these:
https://github.com/webpack-contrib/terser-webpack-plugin/issues/114,
https://github.com/jantimon/html-webpack-plugin/issues/1262 but I do not use uglify or html-minifier.
https://github.com/webpack/webpack/issues/14662 updated webpack from 5.30.0 to version 5.75 did not help
Webpack 5 - "Unexpected token: punc (.)" after import axios adding mode: web didn't do a thing
the context is the following: I am learning unit testing using Jest. My current enviroment is Jest with Webpack as I am using ES6 Modules. In my current project, I'm only testing JavaScript logic, not the UI. Ideally, Jest would skip over my imported files and only test functions in my current file. The test suite was working as expected, until I imported a DOM rendering file into my main JS file (import './display.js'). I see this error in every test I run.
import './display.js';
import './style.css';
import {pubSub, ps} from './subscriptions.js';
import {Gameboard, tiles} from './gameboard.js'
If I don't add import './display.js', I get this error:
Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.
I did try installing jsdom as well, but nothing happens.
I also tried adding './display.js' to an excluded files list in my package.json, but that didn't work either.
I used:
collectCoverageFrom: ['!src/display.js']
This is my package.json:
{
"name": "battleship",
"jest": {
"collectCoverageFrom": [
"!src/display.js"
]
},
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "jest --coverage",
"build": "webpack",
"watch": "jest --watch *.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/itsaflamingo/Battleship.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/itsaflamingo/Battleship/issues"
},
"homepage": "https://github.com/itsaflamingo/Battleship#readme",
"devDependencies": {
"#babel/preset-env": "^7.18.6",
"css-loader": "^6.7.1",
"html-webpack-plugin": "^5.5.0",
"jest": "^28.1.2",
"style-loader": "^3.3.1",
"webpack": "^5.73.0",
"webpack-cli": "^4.10.0"
},
"dependencies": {
"acorn": "^8.7.1",
"acorn-import-assertions": "^1.8.0",
"ajv": "^6.12.6",
"ajv-keywords": "^3.5.2",
"ansi-regex": "^5.0.1",
"boolbase": "^1.0.0",
"browserslist": "^4.21.1",
"buffer-from": "^1.1.2",
"camel-case": "^4.1.2",
"caniuse-lite": "^1.0.30001361",
"chrome-trace-event": "^1.0.3",
"clean-css": "^5.3.0",
"clone-deep": "^4.0.1",
"colorette": "^2.0.19",
"commander": "^2.20.3",
"cross-spawn": "^7.0.3",
"css-select": "^4.3.0",
"css-what": "^6.1.0",
"cssesc": "^3.0.0",
"dom-converter": "^0.2.0",
"dom-serializer": "^1.4.1",
"domelementtype": "^2.3.0",
"domhandler": "^4.3.1",
"domutils": "^2.8.0",
"dot-case": "^3.0.4",
"electron-to-chromium": "^1.4.173",
"enhanced-resolve": "^5.10.0",
"entities": "^2.2.0",
"envinfo": "^7.8.1",
"es-module-lexer": "^0.9.3",
"escalade": "^3.1.1",
"eslint-scope": "^5.1.1",
"esrecurse": "^4.3.0",
"estraverse": "^4.3.0",
"events": "^3.3.0",
"fast-deep-equal": "^3.1.3",
"fast-json-stable-stringify": "^2.1.0",
"fastest-levenshtein": "^1.0.12",
"find-up": "^4.1.0",
"function-bind": "^1.1.1",
"glob-to-regexp": "^0.4.1",
"graceful-fs": "^4.2.10",
"has": "^1.0.3",
"has-flag": "^4.0.0",
"he": "^1.2.0",
"html-minifier-terser": "^6.1.0",
"htmlparser2": "^6.1.0",
"icss-utils": "^5.1.0",
"import-local": "^3.1.0",
"interpret": "^2.2.0",
"is-core-module": "^2.9.0",
"is-plain-object": "^2.0.4",
"isexe": "^2.0.0",
"isobject": "^3.0.1",
"jest-worker": "^27.5.1",
"jsdom": "^20.0.0",
"json-parse-even-better-errors": "^2.3.1",
"json-schema-traverse": "^0.4.1",
"kind-of": "^6.0.3",
"loader-runner": "^4.3.0",
"locate-path": "^5.0.0",
"lodash": "^4.17.21",
"lower-case": "^2.0.2",
"lru-cache": "^6.0.0",
"merge-stream": "^2.0.0",
"mime-db": "^1.52.0",
"mime-types": "^2.1.35",
"nanoid": "^3.3.4",
"neo-async": "^2.6.2",
"no-case": "^3.0.4",
"node-releases": "^2.0.5",
"nth-check": "^2.1.1",
"p-limit": "^2.3.0",
"p-locate": "^4.1.0",
"p-try": "^2.2.0",
"param-case": "^3.0.4",
"pascal-case": "^3.1.2",
"path-exists": "^4.0.0",
"path-key": "^3.1.1",
"path-parse": "^1.0.7",
"picocolors": "^1.0.0",
"pkg-dir": "^4.2.0",
"postcss": "^8.4.14",
"postcss-modules-extract-imports": "^3.0.0",
"postcss-modules-local-by-default": "^4.0.0",
"postcss-modules-scope": "^3.0.0",
"postcss-modules-values": "^4.0.0",
"postcss-selector-parser": "^6.0.10",
"postcss-value-parser": "^4.2.0",
"pretty-error": "^4.0.0",
"punycode": "^2.1.1",
"randombytes": "^2.1.0",
"rechoir": "^0.7.1",
"relateurl": "^0.2.7",
"renderkid": "^3.0.0",
"resolve": "^1.22.1",
"resolve-cwd": "^3.0.0",
"resolve-from": "^5.0.0",
"safe-buffer": "^5.2.1",
"schema-utils": "^3.1.1",
"semver": "^7.3.7",
"serialize-javascript": "^6.0.0",
"shallow-clone": "^3.0.1",
"shebang-command": "^2.0.0",
"shebang-regex": "^3.0.0",
"source-map": "^0.6.1",
"source-map-js": "^1.0.2",
"source-map-support": "^0.5.21",
"strip-ansi": "^6.0.1",
"supports-color": "^8.1.1",
"supports-preserve-symlinks-flag": "^1.0.0",
"tapable": "^2.2.1",
"terser": "^5.14.1",
"terser-webpack-plugin": "^5.3.3",
"tslib": "^2.4.0",
"update-browserslist-db": "^1.0.4",
"uri-js": "^4.4.1",
"util-deprecate": "^1.0.2",
"utila": "^0.4.0",
"watchpack": "^2.4.0",
"webpack-merge": "^5.8.0",
"webpack-sources": "^3.2.3",
"which": "^2.0.2",
"wildcard": "^2.0.0",
"yallist": "^4.0.0"
},
"keywords": []
}
This is my webpack.config:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
index: './src/index.js',
print: './src/print.js',
display: './src/display.js',
subscriptions: './src/subscriptions.js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'Battleship',
}),
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
},
};
This is the test I am running for index.js:
import {Ship, Players, playerBoats} from './index';
test('factory function returns object', () => {
expect(Ship('Carrier', 5)).toMatchObject({
boatName: 'Carrier',
length: 5,
hitSpot: [],
sunk: false,
});
})
test('when hit, factory function returns modified object', () => {
expect(Ship('Destroyer', 2).isHit(1, playerBoats)).toMatchObject({
boatName: 'Destroyer',
coordinates: [],
length: 2,
hitSpot: [1],
sunk: false,
});
})
test('player can attack computer multiple times', () => {
expect(Players().Player().playerAttack(4)).toMatchObject({
boatName: 'Carrier',
coordinates: [2, 3, 4],
length: 5,
hitSpot: [2, 4],
sunk: false,
})
})
I am running Linux on Chromebook and using VS Code, I'm not sure if that makes a difference. I just want to be able to skip UI tests with Jest.
Came back to answer as I struggled with this for a while. My issue was that I was not separating my UI and logic, and jest does not accept DOM methods or selectors unless specified.
Because the node-sass have a big install problem and compatible problem, I do not want to use node-sass, prefer to use dart sass in my project. But when I use the sass-loader like this:
"sass-loader": "7.0.0",
shows that:
ERROR in ./node_modules/sass-loader/lib/loader.js!./node_modules/css-loader?sourceMap!./node_modules/sass-loader/lib/loader.js?sourceMap!./src/public/widget/style.scss
Module build failed: Error: `sass-loader` requires `node-sass` >=4. Please install a compatible version.
at Object.sassLoader (/Users/xiaoqiangjiang/source/reddwarf/frontend/crx-selection-translate/node_modules/sass-loader/lib/loader.js:31:19)
# ./node_modules/style-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/css-loader?sourceMap!./node_modules/sass-loader/lib/loader.js?sourceMap!./src/public/widget/style.scss 4:14-197
what should I do to let the sass-loader ignore the node sass and use dart sass? I do not want to use node sass, it waste too much time to handle the install and compatible problem. BTW, this is my project package.json content:
{
"private": true,
"repository": {
"type": "git",
"url": "git+https://github.com/jiangxiaoqiang/crx-selection-translate.git"
},
"scripts": {
"xpostinstall": "node ./build/install-pdf-viewer",
"dev": "webpack --config build/webpack.dev.config.js",
"build": "gulp --cwd . --gulpfile build/gulp-build.js",
"test": "karma start build/karma.config.js"
},
"dependencies": {
"bootstrap-sass": "^3.4.1",
"chrome-call": "^1.0.2",
"connect.io": "^3.1.3",
"interact.js": "^1.2.6",
"js-wheel": "https://github.com/jiangxiaoqiang/js-wheel.git",
"translation.js": "github:jiangxiaoqiang/translation.js",
"vue": "^1.0.24",
"vue-router": "^0.7.11"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^6.2.4",
"babel-plugin-transform-runtime": "^6.9.0",
"babel-polyfill": "^6.9.1",
"babel-preset-es2015": "^6.9.0",
"babel-preset-stage-3": "^6.5.0",
"chrome-env": "^0.0.6",
"css-loader": "^0.23.1",
"del": "^2.2.0",
"download": "^5.0.0",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^0.8.5",
"fs-extra": "^8.1.0",
"gulp": "^3.9.1",
"gulp-clean-css": "^2.3.2",
"gulp-htmlmin": "^2.0.0",
"gulp-jsonmin": "^1.2.0",
"gulp-uglify": "^1.5.3",
"gulp-zip": "^3.2.0",
"isparta-loader": "^2.0.0",
"jasmine-core": "^2.99.1",
"karma": "^6.3.11",
"karma-chrome-launcher": "^1.0.1",
"karma-coverage": "^2.1.0",
"karma-coveralls": "^2.1.0",
"karma-firefox-launcher": "^1.3.0",
"karma-ie-launcher": "^1.0.0",
"karma-jasmine": "^1.1.2",
"karma-phantomjs-launcher": "^1.0.0",
"karma-safari-launcher": "^1.0.0",
"karma-sourcemap-loader": "^0.3.8",
"karma-webpack": "^1.7.0",
"phantomjs-prebuilt": "^2.1.6",
"raw-loader": "^0.5.1",
"sass": "1.48.0",
"sass-loader": "7.0.0",
"style-loader": "^0.13.0",
"vue-html-loader": "^1.2.0",
"webpack": "^3.12.0",
"webpack-cli": "^4.9.1"
},
"author": "Jiangxiaoqiang <jiangtingqiang#gmail.com>",
"license": "GPLv3",
"bugs": {
"url": "https://github.com/jiangxiaoqiang/crx-selection-translate/issues"
},
"homepage": "https://github.com/jiangxiaoqiang/crx-selection-translate#readme"
}
any suggestion or clue was welcome. I tried to tweak the webpack config like this to specify the load-sass to use dart sass not node sass:
{
test : /\.scss$/ ,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
{
loader: 'sass-loader',
options: {
implementation: require('sass'),
},
},
]
}
still did not work.
Webpack is working well before babel installation but after that it isn't generating newest file. I am using webpack version 4.17.2 and babel loader version 8.0.2. How to fix this issue, as i have integrated webpack into gulp automation. Kindly Guide me how to fix this issue and rectify it as i am using it first time .
Here is the Webpack.config.js file
var path = require('path');
module.exports = {
entry: './app/assets/scripts/App.js',
output: {
path: path.resolve(__dirname, "./app/temp/script"),
filename: 'App.js'
},
module: {
rules: [{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
}]
}
}
Here is Package.json file
{
"name": "travel-site",
"version": "1.0.0",
"dependencies": {
"jquery": "^3.2.1",
"jquery-smooth-scroll": "2.2.0",
"lazysizes": "4.0.1",
"normalize.css": "7.0.0",
"picturefill": "3.0.2",
"waypoints": "4.0.1"
},
"devDependencies": {
"#babel/preset-env": "^7.0.0",
"autoprefixer": "7.1.6",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.2",
"babel-preset-es2015": "^6.24.1",
"browser-sync": "2.18.13",
"del": "^3.0.0",
"gulp": "^3.9.1",
"gulp-cssnano": "2.1.2",
"gulp-imagemin": "4.0.0",
"gulp-modernizr": "1.0.0-alpha",
"gulp-postcss": "^7.0.0",
"gulp-rename": "^1.2.2",
"gulp-rev": "8.1.0",
"gulp-svg-sprite": "^1.4.0",
"gulp-svg2png": "^2.0.2",
"gulp-uglify": "^3.0.0",
"gulp-usemin": "^0.3.28",
"gulp-watch": "^4.3.11",
"postcss-hexrgba": "^1.0.1",
"postcss-import": "^11.0.0",
"postcss-mixins": "^6.2.0",
"postcss-nested": "^2.1.2",
"postcss-simple-vars": "^4.1.0",
"webpack": "^4.17.2",
"webpack-cli": "^3.1.0"
}
}
One solution would be to remove the old file every time it compiles by using clean-webpack-plugin.
const cleanWebPackPlugin = require('clean-webpack-plugin');
plugins: [
new cleanWebPackPlugin(['path-to-App.js'])
]
I'm having lots of trouble getting the webpack DLL plugin to work for me. It's work in the sense that the dll is being extracted, and the other bundle sizes are reducing, however when run in the browser I get the following error:
module.js from dll-reference [name]:1 Uncaught TypeError: __webpack_require__(...) is not a function
at Object.../node_modules/webpack/buildin/module.js (module.js from dll-reference [name]:1)
at __webpack_require__ (bootstrap dff23196bbd9943d1e33:678)
at fn (bootstrap dff23196bbd9943d1e33:88)
at Object.../node_modules/node-libs-browser/node_modules/punycode/punycode.js (punycode.js:533)
at __webpack_require__ (bootstrap dff23196bbd9943d1e33:678)
at fn (bootstrap dff23196bbd9943d1e33:88)
at Object.../node_modules/url/url.js (url.js:24)
at __webpack_require__ (bootstrap dff23196bbd9943d1e33:678)
at fn (bootstrap dff23196bbd9943d1e33:88)
at Object.<anonymous> (client:6)
My config seems to be correct according to the docs and people on SO / github who have had the same error message.
webpack.development.js:
let fs = require('fs')
let path = require('path')
let webpack = require('webpack')
const { extractLegacy, extractModules } = require('./extract-text')
let defaultConfig = require('./webpack')
module.exports = Object.assign({}, defaultConfig, {
cache: true,
devtool: '#source-map',
entry: Object.assign(defaultConfig.entry, {
'webpack-dev-server/hot/client?https://app.local.app:8080/':
'webpack-dev-server/client?https://app.local.app:8080/',
'dll.vendor': '../build/dll.vendor.js'
}),
devServer: {
hot: true,
inline: true,
disableHostCheck: true,
host: 'app.local',
headers: { 'Access-Control-Allow-Origin': '*' },
https: {
key: fs.readFileSync(path.join(__dirname, '../l ocalssl/server.key')),
cert: fs.readFileSync(path.join(__dirname, '../localssl/server.crt'))
},
stats: {
cached: false,
cachedAssets: false,
children: false,
chunks: false,
chunkModules: false,
chunkOrigins: false,
depth: false,
errors: true,
errorDetails: true,
hash: false,
maxModules: 0,
modules: false,
providedExports: false,
reasons: false,
source: false,
timings: false,
usedExports: false
}
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development')
}
}),
extractLegacy,
extractModules,
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
new webpack.DllReferencePlugin({
manifest: require('../build/vendor.json'),
name: '[name]',
context: path.resolve(__dirname, '../')
})
]})
webpack.dll.js
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: {
vendor: [path.resolve(__dirname, './vendors.js')]
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: ['babel-loader?cacheDirectory']
}
]
},
output: {
path: path.resolve(__dirname, '../build'),
filename: 'dll.[name].js',
library: '[name]'
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, '../build', '[name].json'),
name: '[name]'
})
],
resolve: {
modules: ['node_modules']
}
}
package.json
{
"version": "1.0.0",
"description": "",
"main": "src/index.js",
"dependencies": {
"#heroku/foreman": "^2.0.2",
"adm-zip": "^0.4.7",
"amqplib": "^0.5.2",
"autoprefixer": "7.1.3",
"aws-sdk": "^2.104.0",
"babel-cli": "6.16.0",
"babel-eslint": "^7.2.3",
"babel-loader": "6.2.5",
"babel-plugin-flow-react-proptypes": "^5.1.2",
"babel-plugin-module-resolver": "^2.7.1",
"babel-plugin-recharts": "1.1.0",
"babel-plugin-transform-async-to-generator": "^6.22.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-flow-strip-types": "^6.22.0",
"babel-plugin-transform-object-rest-spread": "^6.22.0",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "6.16.0",
"babel-preset-es2015-node": "^6.1.1",
"babel-preset-react": "6.16.0",
"basic-auth": "1.1.0",
"bcrypt": "^1.0.3",
"body-parser": "1.17.2",
"bookshelf": "0.10.4",
"bookshelf-cascade-delete": "2.0.1",
"bookshelf-paranoia": "0.9.0",
"bootstrap": "3.3.7",
"bunyan": "1.8.10",
"bunyan-middleware": "0.4.0",
"change-case": "3.0.1",
"cheerio": "^1.0.0-rc.2",
"classnames": "2.2.5",
"compression": "1.7.0",
"connect-flash": "0.1.1",
"connect-redis": "3.3.0",
"cookie-parser": "^1.4.3",
"cookies-js": "^1.2.3",
"cron": "1.2.1",
"css-loader": "0.28.4",
"csvtojson": "^1.1.7",
"date-holidays": "^1.2.0",
"deep-equal": "^1.0.1",
"deep-freeze": "^0.0.1",
"deserialize-error": "^0.0.3",
"draft-convert": "^1.4.8",
"draft-extend": "^1.5.0",
"draft-js": "^0.10.1",
"elasticsearch": "^13.0.1",
"email-templates": "^2.7.1",
"eslint-plugin-babel": "^4.1.2",
"eslint-plugin-flow-vars": "^0.5.0",
"express": "4.16.0",
"express-request-id": "1.4.0",
"express-session": "1.15.3",
"extract-text-webpack-plugin": "2.1.2",
"file-loader": "0.11.2",
"flow": "^0.2.3",
"forever": "^0.15.3",
"helmet": "3.8.0",
"http-errors": "1.6.1",
"ignore-styles": "^5.0.1",
"immutable": "^3.8.1",
"isomorphic-fetch": "2.2.1",
"jackrabbit": "git+https://github.com/leonlau/jackrabbit.git#da554347132757cd81c39037dd527ee258d088b5",
"jsdom": "^11.5.1",
"json-loader": "0.5.4",
"json2csv": "^3.7.3",
"knex": "0.13.0",
"knex-migrate": "^1.3.0",
"less": "2.7.1",
"less-loader": "2.2.3",
"lodash": "4.16.4",
"md5": "^2.2.1",
"microtime-nodejs": "^1.0.0",
"moment": "2.15.2",
"moment-range": "^2.2.0",
"mongo": "0.1.0",
"mongodb": "2.2.11",
"nconf": "0.8.4",
"newrelic": "^2.6.0",
"node-sass": "^4.5.3",
"normalizr": "^3.2.1",
"numeral": "^2.0.6",
"oauth": "git+https://github.com/Dakuan/node-oauth.git#24bc9bec128b5ca718eb5cd6e319cd22129a5158",
"oauth2-server": "^2.4.1",
"ordinal-numbers": "^1.0.3",
"pdfmake": "^0.1.32",
"pg": "6.1.6",
"pg-hstore": "2.3.2",
"pluralize": "^7.0.0",
"postcss": "6.0.10",
"postcss-loader": "1.1.1",
"prettyjson": "^1.2.1",
"proxyquire": "^1.7.11",
"pug": "2.0.0-beta6",
"quill": "^1.3.1",
"react": "^15.4.1",
"react-addons-perf": "^15.4.2",
"react-autosize-textarea": "^0.4.4",
"react-datepicker": "^0.40.0",
"react-dom": "^15.6.1",
"react-joyride": "^1.10.1",
"react-redux": "4.4.5",
"react-router": "2.8.1",
"react-router-redux": "4.0.7",
"react-scroll": "^1.5.5",
"react-scrollbar": "^0.5.1",
"react-slick": "^0.15.0",
"react-slider": "^0.7.0",
"react-sparklines": "^1.6.0",
"react-stripe-elements": "^1.0.1",
"react-table": "^6.6.0",
"react-textarea-autosize": "^5.0.6",
"react-toggle": "^4.0.2",
"react-tooltip": "^3.2.10",
"recharts": "^1.0.0-beta.1",
"recompose": "^0.24.0",
"redfour": "^1.0.2",
"redis": "2.6.3",
"redux": "3.6.0",
"redux-devtools-extension": "^1.0.0",
"redux-form": "^7.1.1",
"redux-logger": "2.7.0",
"redux-saga": "^0.16.0",
"redux-saga-test-plan": "^3.3.1",
"redux-thunk": "2.1.0",
"request": "^2.78.0",
"request-promise": "^4.2.2",
"rewire": "^2.5.2",
"s3": "^4.4.0",
"sass-loader": "^6.0.6",
"sendgrid": "4.7.1",
"serialize-error": "^2.1.0",
"simulant": "^0.2.2",
"snyk": "^1.41.1",
"soap": "^0.21.0",
"socket.io": "^2.0.2",
"socket.io-client": "^2.0.2",
"socket.io-cookie-parser": "^1.0.0",
"socket.io-redis": "^5.1.0",
"stripe": "^5.1.0",
"style-loader": "^0.19.1",
"url-loader": "0.5.7",
"url-parse": "^1.1.9",
"urlencode": "^1.1.0",
"uuid": "2.0.3",
"validate.js": "^0.11.1",
"velocity-animate": "^1.4.0",
"velocity-react": "^1.2.1",
"victory": "0.13.7",
"webpack": "^3.10.0",
"xml2json": "^0.11.0"
},
"devDependencies": {
"ava": "^0.24.0",
"babel-jest": "16.0.0",
"babel-register": "6.16.3",
"chromedriver": "^2.34.1",
"enzyme": "^2.7.0",
"eslint": "3.8.1",
"eslint-config-prettier": "2.9.0",
"eslint-plugin-flowtype": "^2.30.0",
"eslint-plugin-lodash-fp": "2.1.3",
"eslint-plugin-react": "6.4.1",
"fetch-mock": "5.5.0",
"flow-bin": "^0.57.2",
"husky": "^0.14.3",
"lint-staged": "^6.0.0",
"nightwatch": "^0.9.19",
"nock": "9.0.2",
"node-mocks-http": "^1.5.4",
"nodemon": "1.11.0",
"npm-run-all": "^4.1.1",
"nyc": "8.3.2",
"prettier": "1.9.2",
"ps-node": "^0.1.4",
"react-addons-test-utils": "^15.4.1",
"react-hot-loader": "3.0.0-beta.6",
"redux-mock-store": "^1.2.2",
"selenium-server-standalone-jar": "^3.8.1",
"sinon": "1.17.6",
"supertest": "2.0.1",
"webpack-dev-server": "^2.11.1",
"webpack-hot-middleware": "^2.21.0"
},
"ava": {
"require": [
"babel-register",
"babel-polyfill",
"ignore-styles"
],
"babel": "inherit"
},
"nyc": {
"extension": [
".jsx",
".js"
],
"include": [
"src"
],
"exclude": [
"tests",
"build",
"node_modules"
]
},
"engines": {
"node": "8.9.x",
"npm": "5.5.x",
"yarn": "1.3.2"
},
}
folder structure:
-- build
-- src
-- webpack