On OSX, after I installed all of dependencies by yarn install, The webpack bundle's output keeps showing the error Error evaluating function ceil: argument must be a number.
I have no idea why this happen but it works on my linux machine with the same package.json
Some info:
webpack: "5.56.0"
less: "^4.1.2"
less-loader: "^10.0.1"
Here is my less-loader config:
{loader: "less-loader"}
It looks like the there is a change of the default options of less based on what I've found in here
https://lesscss.org/usage/#less-options-math
The solution is adding the option for less-loader in webpack config as following:
{
loader: "less-loader",
options: {
lessOptions: {
math: 'always' // <=== add this
}
}
}
Also you should change => strictMath: false
Example (my file config-overrides.js):
const addLessLoader = require("customize-cra-less-loader");
module.exports = override(
addLessLoader({
cssLoaderOptions: {
sourceMap: true,
modules: {
localIdentName: "[hash:base64:8]",
},
},
lessLoaderOptions: {
lessOptions: {
math: "always",
modifyVars: { "#primary-color": "#2a4365" },
javascriptEnabled: true,
strictMath: false,
},
},
})
);
Related
In my VUE project, there are several templates which have the same filename but located in different source sub-folders. I'm using webpack 3.12 to build it, and the devtool set to 'cheap-module-eval-source-map'.
After I run webpack-dev-server 2.11.1 to debug it, all template source files are put into the root folder 'webpack://' of the browser's sourcemap, so ONLY one of these files can exist, others are lost, I can't debug them.
Is there a way to make these files co-existing in the sourcemap?
module.exports = {
plugins: [
new VueLoaderPlugin()
],
context: path.resolve(__dirname, '../'),
entry: {
app: ['babel-polyfill', './src/main.js']
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production' ?
config.build.assetsPublicPath : config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'#': resolve('src'),
}
},
devtool: 'cheap-module-eval-source-map',
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},
// these devServer options should be customized in /config/index.js
devServer: {
clientLogLevel: 'warning',
historyApiFallback: {
rewrites: [{
from: /.*/,
to: path.posix.join(config.dev.assetsPublicPath, 'index.html')
}, ],
},
hot: true,
contentBase: false, // since we use CopyWebpackPlugin.
compress: true,
host: HOST || config.dev.host,
port: PORT || config.dev.port,
open: config.dev.autoOpenBrowser,
overlay: config.dev.errorOverlay ?
{
warnings: false,
errors: true
} :
false,
publicPath: config.dev.assetsPublicPath,
proxy: config.dev.proxyTable,
quiet: true, // necessary for FriendlyErrorsPlugin
watchOptions: {
poll: config.dev.poll,
}
}
}
At last, I changed 'cheap-module-eval-source-map' to 'module-eval-source-map', the relative path of source files are kept.
I've read the official document of devtool, it says "it doesn't have column mappings, it only maps line numbers." if "cheap" mode used, I don't understand why the relative path is discarded.
eval-cheap-source-map - Similar to eval-source-map, each module is executed with eval(). It is "cheap" because it doesn't have column
mappings, it only maps line numbers. It ignores SourceMaps from
Loaders and only display transpiled code similar to the eval devtool.
eval-cheap-module-source-map - Similar to eval-cheap-source-map, however, in this case Source Maps from Loaders are processed for
better results. However Loader Source Maps are simplified to a single
mapping per line.
This worked for me when using vue-cli-service serve: https://github.com/vuejs/vue-cli/issues/2978#issuecomment-577364101
In vue.config.js:
let path = require('path')
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV === 'development') {
// See available sourcemaps:
// https://webpack.js.org/configuration/devtool/#devtool
config.devtool = 'eval-source-map'
// console.log(`NOTICE: vue.config.js directive: ${config.devtool}`)
config.output.devtoolModuleFilenameTemplate = info => {
let resPath = path.normalize(info.resourcePath)
let isVue = resPath.match(/\.vue$/)
let isGenerated = info.allLoaders
let generated = `webpack-generated:///${resPath}?${info.hash}`
let vuesource = `vue-source:///${resPath}`
return isVue && isGenerated ? generated : vuesource
}
config.output.devtoolFallbackModuleFilenameTemplate =
'webpack:///[resource-path]?[hash]'
}
},
}
My testing-app is compiling fine, except that I get this warning:
" Critical dependency: the request of a dependency is an expression"
(base) marco#pc01:~/webMatters/vueMatters/PeerJS-VueJS-Test$ npm run serve
> testproject#0.1.0 serve /home/marco/webMatters/vueMatters/PeerJS-VueJS-Test
> vue-cli-service serve
INFO Starting development server...
98% after emitting CopyPlugin
WARNING Compiled with 1 warnings
7:22:25 PM
warning in ./node_modules/peerjs/dist/peerjs.min.js
Critical dependency: the request of a dependency is an expression
App running at:
- Local: http://localhost:8080
- Network: http://ggc.world/
Note that the development build is not optimized.
To create a production build, run npm run build.
I read around that it might depend of webpack, but didn't find how to put it right.
This is webpack.config.js :
{
"mode": "development",
"output": {
"path": __dirname+'/static',
"filename": "[name].[chunkhash:8].js"
},
"module": {
"rules": [
{
"test": /\.vue$/,
"exclude": /node_modules/,
"use": "vue-loader"
},
{
"test": /\.pem$/,
"use": "file-loader"
}
]
},
node: {
__dirname: false,
__filename: false
},
resolve: {
extension: ['*', '.pem'],
},
devServer: {
watchOptions: {
aggregateTimeout: 300,
poll: 1000
},
https: true,
compress: true,
public: 'ggc.world:8080'
}
}
Any ideas about how to solve it?
The following code works for me. Edit vue.config.js and add webpack config:
configureWebpack: {
module: {
exprContextCritical: false
}
}
const webpack = require('webpack');
module.exports = {
// ... your webpack configuration ...
plugins: [
new webpack.ContextReplacementPlugin(
/\/package-name\//,
(data) => {
delete data.dependencies[0].critical;
return data;
},
),
]
}
try this one
For people coming here using CRA and having trouble with PeerJS, install react-app-rewired and use the following override config and it should work.
/* config-overrides.js */
const webpack = require('./node_modules/webpack')
module.exports = function override (config, env) {
if (!config.plugins) {
config.plugins = []
}
config.plugins.push(
new webpack.ContextReplacementPlugin(
/\/peerjs\//,
(data) => {
delete data.dependencies[0].critical
return data
}
)
)
return config
}
It seems it is an error between the library bundler (parcel) and CRA bundler (webpack), and I couldn't find any official fix on the way.
I am trying to run code coverage using https://webpack.js.org/loaders/istanbul-instrumenter-loader/
Here is the karma.conf.js
var testWebpackCfg = require('../webpack/webpack.config.test.js');
module.exports = function(config) {
config.set({
basePath: '../../',
frameworks: ['jasmine'],
plugins: [ 'karma-webpack', 'karma-jasmine-jquery', 'karma-jasmine', 'karma-chrome-launcher','karma-firefox-launcher', 'karma-coverage','karma-spec-reporter', 'karma-jasmine-html-reporter'],
preprocessors: {
'client/test/index.js': ['webpack']
},
reporters: [ 'spec', 'coverage-istanbul'],
coverageIstanbulReporter: {
reports: [ 'text-summary' ],
dir: './coverage',
fixWebpackSourcePaths: true
},
files: [
'client/test/index.js'
],
webpack: testWebpackCfg,
// web server port
port: 9876,
runnerPort: 9100,
urlRoot: '/',
// level of logging
// possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: false,
browsers: ['Chrome'],
singleRun: true
});
};
Webpack config
{
test: /\.js$/i,
exclude: [
paths.appNodeModules
],
use: [
{
loader: require.resolve('babel-loader'),
options: {
presets: ['#babel/preset-env']
}
},
{
loader: require.resolve('istanbul-instrumenter-loader'),
options: {
esModules: true
}
}
]
}
On running the Karma I see this error
'Can not load reporter "coverage-istanbul", it is not registered!
Perhaps you are missing some plugin?'
The error got resolved by adding karma-coverage-istanbul-reporter in the karma config plugin.
npm i karma-coverage-istanbul-reporter --save-dev
karma.conf.js
{
...
plugins: ['karma-coverage-istanbul-reporter']
...
}
I faced the same problem after upgrading to Angular 14 from 11. Adding the Istanbul reporter compared to the Karma reporter solved my issue.
So simply add coverage-istanbul to your reporters in karma.conf.js
Like:
reporters: ['progress', 'kjhtml', 'coverage-istanbul'],
For example:
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '#angular-devkit/build-angular'],
plugins: [
...
],
client: {
...
},
coverageIstanbulReporter: {
...
},
reporters: ['progress', 'kjhtml', 'coverage-istanbul'],
})
}
Nishant gives the essential answer, but I found I also got this message when I had not specified the karma config file explicitly, as per this answer:
cant get junit running with Karma
I'm using karma-eslint plugin. It looks very easy to use but for some reason, I don't see any errors or warnings and my tests are running smoothly even though I put some eslint errors
here is my karma.config.js file:
module.exports = function (config) {
config.set({
browsers: [process.env.CONTINUOUS_INTEGRATION ? 'Firefox' : 'Chrome'],
singleRun: true,
frameworks: ['mocha'],
files: [
'tests.webpack.js'
],
preprocessors: {
'tests.webpack.js': ['webpack', 'sourcemap'],
'src/**/*.jsx': ['coverage'],
'test/**/*.js': ['eslint'],
},
eslint: {
engine: {
configFile: './.eslintrc',
emitError: true,
emitWarning: true
}
},
reporters: ['progress', 'coverage'],
coverageReporter: {
/* coverage configurations */
},
webpack: {
/* some webpack configurations */
}
The violation I planted in the one of my test.js files - define a new variable but not using it (eslint rule: 'no-unused-vars')
Please let me know if any further information is needed and I'll edit the post accordingly.
Cheers!
Found another solution!
in my webpack configuration I've used the eslint-loader' forwebpack` as follows:
webpack: {
module: {
preLoaders: [
{test: /\.js$/, exclude: /(src|node_modules)/, loader: 'eslint-loader'}
]
}
}
Here's my less task config:
less: {
development: {
options: {
compress: false,
sourceMap: true,
yuicompress: true,
sourceMapFilename: 'export/style/app.css.map',
sourceMapURL: '/style/app.css.map'
},
files: {
"export/style/app.css": "less/app.less"
}
}
},
If I just type grunt less, in my compiled file i get the /*# sourceMappingURL=/style/app.css.map */ comment correctly.
Instead, when i run grunt and my watch task kicks in, the /*# sourceMappingURL=/style/app.css.map */ comment is removed on compilation.
Here's my watch task for less:
watch: {
less: {
files: ['less/*.less'],
tasks: ['less', 'postcss'],
options: {
livereload: true,
nospaces: true
}
}
},
What am I doing wrong?
it was actually the postcss task preventing the comment to appear. fixed with
postcss: {
options: {
map: true,