Develop Reference

How to fix the warning: 'No plugins found for `imagemin`. Please read documentation.'

I'm trying to get my head around Webpack and building a Typescript project from scratch.
Even though the project runs on dev and build, it seems I wrote something wrong in the webpack.config.js because I'm getting this error with every image I'm trying to load:
WARNING in No plugins found for imagemin. Please read documentation.
The images get created in the dist folder but still, I got this warning.
I uninstalled and installed again Imagemin but the warning stills appears.
webpack.config.js
module.exports = {
plugins: [
new CopyWebpackPlugin({
patterns: [
{
from: './shared',
to: '',
},
{
from: './app/images',
to: 'images'
}
],
}),
new ImageMinimizerPlugin({
minimizerOptions: {
options: {
plugins: [
['gifsicle', { interlaced: true }],
['jpegtran', { progressive: true }],
['optipng', { optimizationLevel: 8 }]
],
},
},
}),
],
module: {
rules: [
{
test: /\.(jpe?g|png|gif|svg|woff2?|fnt|webp)$/,
loader: 'file-loader',
options: {
name() {
return '[hash].[ext]';
},
},
},
{
test: /\.(jpe?g|png|gif|svg|webp)$/i,
use: [
{
loader: ImageMinimizerPlugin.loader,
},
],
},
},
};
`package.json``
{
...
"devDependencies": {
"copy-webpack-plugin": "^8.1.1",
"image-minimizer-webpack-plugin": "^2.2.0",
"imagemin": "^7.0.1",
"imagemin-gifsicle": "^7.0.0",
"imagemin-jpegtran": "^7.0.0",
"imagemin-mozjpeg": "^10.0.0",
"imagemin-optipng": "^8.0.0",
"imagemin-pngquant": "^9.0.2",
"imagemin-svgo": "^9.0.0",
"webpack": "^5.33.2",
"webpack-cli": "^4.6.0",
"webpack-dev-server": "^3.11.2",
"webpack-merge": "^5.7.3"
}
}

You have an extra options object inside minimizerOptions in ImageMinimizerPlugin() which shouldn't be there. This is the correct configuration:
new ImageMinimizerPlugin({
minimizerOptions: {
plugins: [
['gifsicle', { interlaced: true }],
['jpegtran', { progressive: true }],
['optipng', { optimizationLevel: 8 }]
],
},
}),

nuxt application is not working in internet explorer

I have the nuxt application which works fine in chrome and all other browser but it is getting failed in the internet explorer.
I tried so many solutions on the internet but had no luck yet so asking for help from someone who got in the same problem while supporting the internet explorer.
Below are my nuxt.config and package.json.
nuxt.config.js
require('dotenv').config()
export default {
mode: 'universal',
head: {
title: process.env.npm_package_name || '',
meta: [{
charset: 'utf-8'
},
{
name: 'viewport',
content: 'width=device-width, initial-scale=1'
},
{
hid: 'description',
name: 'description',
content: process.env.npm_package_description || ''
}
],
link: [{
rel: 'icon',
type: 'image/x-icon',
href: '/favicon.ico'
}],
script: [{
src: 'https://cdn.polyfill.io/v2/polyfill.js?features=es5,es2015,Array.from,es6,Object.entries,Object.defineProperty,IntersectionObserver,gated&flags=gated&unknown=polyfill&callback=onPolyfillsLoad'
}]
},
/*
** Customize the progress-bar color
*/
loading: {
color: '#fff'
},
/*
** Global CSS
*/
css: [
],
/*
** Plugins to load before mounting the App
*/
plugins: [],
/*
** Nuxt.js dev-modules
*/
buildModules: [
'#nuxtjs/vuetify',
'#nuxtjs/dotenv'
// Doc: https://github.com/nuxt-community/eslint-module
// '#nuxtjs/eslint-module',
// Doc: https://github.com/nuxt-community/stylelint-module
// '#nuxtjs/stylelint-module'
],
/*
** Nuxt.js modules
*/
modules: [
'#nuxtjs/pwa',
'#nuxtjs/axios',
'#nuxtjs/proxy',
// Doc: https://github.com/nuxt-community/dotenv-module
'cookie-universal-nuxt',
'bootstrap-vue/nuxt'
],
bootstrapVue: {
components: ['BTabs', 'BTab']
},
axios: {
proxyHeaders: true,
init(axios, ctx) {
axios.defaults.headers.post['Content-Type'] = 'application/json;'
}
},
env,
/*
** Build configuration
*/
build: {
transpile: [],
vendor: ['axios'],
/*
** You can extend webpack config here
*/
extend(config, ctx) {
}
}
};
package.json
{
"name": "repo",
"version": "1.0.0",
"description": "repo",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint": "eslint - ext .js,.vue - ignore-path .gitignore .",
"lint:fix": "eslint - fix - ext .js,.vue - ignore-path .gitignore .",
"lint:css": "stylelint - fix ./**/*.{vue,scss,css}"
},
"lint-staged": {
"*.{js,vue}": "npm run lint:fix",
"*.{css,vue}": "npm run lint:css"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"dependencies": {
"#nuxtjs/axios": "⁴.5.2",
"#nuxtjs/dotenv": "¹.4.0",
"#nuxtjs/proxy": "².0.1",
"#nuxtjs/pwa": "³.0.0–0",
"#nuxtjs/vuetify": "¹.11.3",
"axios": "⁰.21.0",
"bootstrap-vue": "².21.2",
"cookie-universal-nuxt": "².1.4",
"cross-env": "⁵.2.1",
"jsonwebtoken": "⁸.5.1",
"lodash": "⁴.17.20",
"moment": "².29.1",
"nuxt": "².0.0",
"vuex-persist": "³.1.3"
},
"devDependencies": {
"#nuxtjs/eslint-config": "².0.0",
"#nuxtjs/eslint-module": "¹.0.0",
"#nuxtjs/stylelint-module": "³.1.0",
"babel-eslint": "¹⁰.0.1",
"eslint": "⁶.1.0",
"eslint-plugin-nuxt": ">=0.4.2",
"eslint-plugin-vue": "⁶.2.2",
"eventsource-polyfill": "⁰.9.6",
"lint-staged": "¹⁰.0.0",
"node-sass": "4.14.0",
"sass-loader": "8.0.2",
"stylelint": "¹⁰.1.0",
"stylelint-config-standard": "²⁰.0.0"
},
"config": {
"nuxt": {
"host": "0.0.0.0"
}
},
"engines": {
"node": "¹⁰.x"
}
}
Error:
which I am getting after so many changes,
HTML1300: Navigation occurred.
testpage
polyfill-eventsource added missing EventSource to window
[HMR] connected
SCRIPT5078: Cannot redefine non-configurable property 'values'
polyfill.js (3,2023)
Kindly help me to figure out how I can debug or fix this thing so I can run the nuxt application in the internet explorer.

Newly created react app is giving an error without me editing anything at all [duplicate]

[webpack-cli] TypeError: MiniCssExtractPlugin is not a constructor
at module.exports (/home/andrey/smartadmin-app/webpack.config.js:70:9)
at loadConfigByPath (/home/andrey/smartadmin-app/node_modules/webpack-cli/lib/webpack-cli.js:1745:27)
at async WebpackCLI.loadConfig (/home/andrey/smartadmin-app/node_modules/webpack-cli/lib/webpack-cli.js:1830:30)
at async WebpackCLI.createCompiler (/home/andrey/smartadmin-app/node_modules/webpack-cli/lib/webpack-cli.js:2185:18)
at async Command.<anonymous> (/home/andrey/smartadmin-app/node_modules/#webpack-cli/serve/lib/index.js:98:30)
at async Promise.all (index 1)
at async Command.<anonymous> (/home/andrey/smartadmin-app/node_modules/webpack-cli/lib/webpack-cli.js:1672:7)
I have got this error and don't understand why it happens. I didn't change any package version and have just done npm install, and I was broken.
{
"name": "react-typescript",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"view-file": "ts-node --project ts.node.config.json ./webpack/createViewFile.ts",
"build-dev": "webpack --env mode=development && npm run build-storybook",
"build-dev-server": "webpack --env mode=development",
"build-prod": "webpack --env mode=production",
"lint": "eslint 'client/**'",
"storybook": "start-storybook -p 5000",
"build-storybook": "build-storybook -o ./public/storybook",
"start": "webpack serve --open"
},
"dependencies": {
"axios": "0.24.0",
"clsx": "1.1.1",
"dotenv": "8.6.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-hook-form": "7.19.5",
"react-router-dom": "6.0.2",
"react-string-replace": "0.4.4",
"webpack-cli": "4.9.1"
},
"devDependencies": {
"#babel/core": "7.16.0",
"#storybook/addon-actions": "6.4.0-rc.2",
"#storybook/addon-docs": "6.4.0-rc.2",
"#storybook/addon-essentials": "6.4.0-rc.2",
"#storybook/addon-links": "6.4.0-rc.2",
"#storybook/builder-webpack5": "6.4.0-rc.2",
"#storybook/manager-webpack5": "6.4.0-rc.2",
"#storybook/preset-scss": "1.0.3",
"#storybook/react": "6.4.0-rc.2",
"#types/express": "4.17.13",
"#types/node": "16.11.7",
"#types/react": "17.0.33",
"#types/react-dom": "17.0.10",
"#typescript-eslint/eslint-plugin": "5.2.0",
"#typescript-eslint/parser": "5.2.0",
"babel-loader": "8.2.3",
"clean-webpack-plugin": "4.0.0",
"compression-webpack-plugin": "9.0.0",
"copy-webpack-plugin": "9.1.0",
"css-loader": "6.5.1",
"eslint": "7.32.0",
"eslint-config-airbnb": "18.2.1",
"eslint-config-prettier": "8.3.0",
"eslint-plugin-import": "2.25.2",
"eslint-plugin-jsx-a11y": "6.4.1",
"eslint-plugin-prettier": "4.0.0",
"eslint-plugin-react": "7.26.1",
"eslint-plugin-react-hooks": "1.7.0",
"html-webpack-plugin": "5.5.0",
"mini-css-extract-plugin": "2.4.4",
"prettier": "2.4.1",
"sass": "1.43.4",
"sass-loader": "12.3.0",
"style-loader": "3.3.1",
"terser-webpack-plugin": "5.2.4",
"ts-loader": "9.2.6",
"ts-node": "10.4.0",
"typescript": "4.4.4",
"webpack": "5.64.1",
"webpack-dev-server": "4.7.3",
"webpack-manifest-plugin": "4.1.1",
"webpack-nano": "1.1.1"
}
}
The command which I execute is npm run start, and my webpack.config.js file is:
require('dotenv').config();
const TerserPlugin = require('terser-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');
const CopyPlugin = require('copy-webpack-plugin');
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
const { execSync } = require('child_process');
const rules = require('./webpack/rules');
const paths = require('./webpack/paths');
const enviroment = require('./webpack/env');
module.exports = (env) => {
const isProduction = env.mode === enviroment.PRODUCTION;
const isDevServer = !!env.WEBPACK_SERVE;
if (isDevServer) {
return {
watch: true,
mode: enviroment.DEVELOPMENT,
entry: './src/index.tsx',
stats: {
errorDetails: true,
},
module: {
rules: [rules.ts(), rules.css()],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
modules: ['node_modules', 'src'],
},
output: {
filename: 'main.js',
path: paths.public,
publicPath: paths.public,
},
devServer: {
port: 8080,
host: 'localhost',
static: [paths.public],
compress: true,
hot: true,
headers: {
'Access-Control-Allow-Origin': '*',
},
historyApiFallback: {
index: '/index.html',
},
client: {
overlay: true,
logging: 'info',
progress: true,
},
devMiddleware: {
writeToDisk: true,
},
},
plugins: [
{
apply(compiler) {
compiler.hooks.environment.tap('removePublicFolder', () => {
execSync('rm -rf public');
});
},
},
new CompressionPlugin(),
new MiniCssExtractPlugin({
filename: isDevServer ? 'main.css' : '[name].[hash].css',
ignoreOrder: true,
}),
new webpack.DefinePlugin({
'process.env': JSON.stringify(process.env),
}),
new WebpackManifestPlugin({
publicPath: '',
}),
new CopyPlugin({
patterns: [
{ from: paths.views, to: paths.public },
{ from: paths.static, to: paths.public },
],
}),
],
};
}
return {
mode: env.mode,
entry: './src/index.tsx',
stats: {
errorDetails: true,
},
...(isProduction && {
optimization: {
minimize: true,
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'all',
},
},
},
minimizer: [
new TerserPlugin({
extractComments: false,
}),
],
},
}),
module: {
rules: [rules.ts(), rules.css()],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
modules: ['node_modules', 'src'],
},
output: {
filename: '[name].[contenthash].js',
path: paths.public,
publicPath: '/',
},
plugins: [
{
apply(compiler) {
compiler.hooks.environment.tap('removePublicFolder', () => {
execSync('rm -rf public');
});
},
},
new CompressionPlugin(),
new MiniCssExtractPlugin({
filename: isDevServer ? 'main.css' : '[name].[hash].css',
ignoreOrder: true,
}),
new webpack.DefinePlugin({
'process.env': JSON.stringify(process.env),
}),
new WebpackManifestPlugin({
publicPath: '',
}),
{
apply(compiler) {
compiler.hooks.done.tap('done', () => {
execSync('npm run view-file');
execSync('ls');
});
},
},
new CopyPlugin({
patterns: [{ from: paths.static, to: paths.public }],
}),
],
};
};
Also I will attach ./webpack/rules.js, to make it clearer:
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const paths = require('./paths');
const css = () => {
return {
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: true,
},
},
{
loader: 'sass-loader',
options: {
sassOptions: {
indentWidth: 4,
includePaths: [paths.styles],
},
},
},
],
};
};
const ts = () => {
return {
test: /\.tsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'ts-loader',
options: {
configFile: 'tsconfig.json',
},
},
],
};
};
module.exports = {
ts,
css,
};

There is an open issue for this on the create-react-app repository. It looks like this comment has a temporary fix of adding the following to file package.json:
The below works if you're using Yarn:
"resolutions": {
"mini-css-extract-plugin": "2.4.5"
},
Use the command below for npm:
npm i -D --save-exact mini-css-extract-plugin#2.4.5
Update: As of January 17, it appears that this issue is fixed by mini-css-extract-plugin v2.5.1. You should be able to remove the version pin created above and npm i or yarn install to update.

For me it was working too and after an update it just stopped working, but as the error suggests, the constructor is undefined, so I changed the way the plugin was called and it worked.
Add '.default' in the call as below:
const MiniCssExtractPlugin = require("mini-css-extract-plugin").default;

As suggested by Macedo_Montalvão and Sharpek:
You can go to your React project folder.
Then head over to this path:
node_modules\react-scripts\config
Open the webpack.config.js file.
Replace
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
with
const MiniCssExtractPlugin = require('mini-css-extract-plugin').default;
This should work.

There are breaking changes in this plugin (I think this was by mistake). Here you can read more about this:
The best solution is to change import linked as Macedo_Montalvão said.
const MiniCssExtractPlugin = require("mini-css-extract-plugin").default;
This error was fixed in version 2.5.1.

SassError: Expected newline. #charset "UTF-8"; when building a Vue app with Sass as sass-loader on Webpack 4

I'm trying to build my Vue app on Node 13 and Webpack 4. For this I'm using this webpack.config.js
const { VueLoaderPlugin } = require("vue-loader");
const htmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const autoprefixer = require("autoprefixer");
const path = require("path");
const devMode = process.env.NODE_ENV !== 'production'
module.exports = {
mode: 'development',
entry: {
main: "./src/main.js",
},
output: {
filename: "[name].[contenthash:12].js",
path: path.resolve(__dirname, "dist"),
chunkFilename: "[name].[contenthash:12].js",
},
module: {
rules: [
{
test : /\.(jsx?)$/,
exclude: /node_modules/,
loader: "babel-loader",
},
{
test: /\.vue$/,
loader: "vue-loader",
},
{
test: /\.(eot|ttf|woff|woff2|txt)(\?\S*)?$/,
loader: "file-loader",
options: {
name: "[name][contenthash:8].[ext]",
},
},
{
test: /\.(png|jpe?g|gif|webm|mp4|svg|ico)$/,
loader: "file-loader",
options: {
name: "[name][contenthash:8].[ext]",
outputPath: "assets/img",
esModule: false,
},
},
{
test: /\.(css)$/,
use: [
"vue-style-loader",
"style-loader",
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: () => [autoprefixer()],
},
},
},
],
},
{
test: /\.(s(c|a)ss)$/,
use: [
"vue-style-loader",
"style-loader",
"css-loader",
{
loader: "postcss-loader",
options: {
sourceMap: true,
importLoaders: 2,
postcssOptions: {
plugins: () => [autoprefixer()],
},
},
},
"sass-loader",
{
loader: "sass-loader",
options: {
sourceMap: true,
implementation: require("sass"),
sassOptions: {
//fiber: require("fibers"),
prependData: `#import "app/javascript/manager/styles/main.scss"`,
//indentedSyntax: true
}
}
},
],
},
],
},
plugins: [
new VueLoaderPlugin(),
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: "[name].[contenthash:8].css",
chunkFilename: "[name].[contenthash:8].css",
}),
new htmlWebpackPlugin({
template: path.resolve(__dirname, "public", "index.html"),
favicon: path.resolve(__dirname, "public", "favicon.ico"),
}),
],
resolve: {
alias: {
vue$: "vue/dist/vue.runtime.esm.js",
},
extensions: ["*", ".js", ".jsx", ".css", ".scss", ".vue"],
modules: [
"node_modules",
]
},
optimization: {
moduleIds: "hashed",
runtimeChunk: "single",
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: "vendors",
priority: -10,
chunks: "all",
},
},
},
},
devServer: {
historyApiFallback: true,
},
}
And this is my package.json
{
"name": "my-app-frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#vue/compiler-sfc": "^3.1.4",
"axios": "^0.21.1",
"clean-webpack-plugin": "^4.0.0-alpha.0",
"core-js": "^3.6.5",
"sass-loader": "10.1.1",
"style-loader": "^2.0.0",
"vue": "^2.6.11",
"vue-axios": "^3.2.4",
"vue-router": "^3.5.2",
"vuetify": "^2.5.6",
"webpack-war-plugin": "^1.0.0-beta.3"
},
"devDependencies": {
"#babel/core": "^7.14.6",
"#babel/preset-env": "^7.14.7",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^4.0.0-alpha.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"postcss": "^8.2.1",
"postcss-loader": "^4.2.0",
"sass": "1.32.13",
"sass-loader": "10.1.1",
"style-loader": "^2.0.0",
"vue-cli-plugin-vuetify": "~2.4.1",
"vue-loader": "^16.3.0",
"vue-template-compiler": "^2.6.14",
"vuetify": "^2.5.6",
"vuetify-loader": "^1.7.0",
"webpack": "^4.42.0",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
After struggling with the sass-loader I reduced the list of errors, but this one is significant and I haven't found a way to remove it:
ERROR in ./node_modules/vuetify/src/styles/main.sass (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ref--5-3!./node_modules/sass-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ref--5-5!./node_modules/vuetify/src/styles/main.sass)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Expected newline.
╷
1 │ #charset "UTF-8";
│ ^
╵
No sass-node, just sass was used. Uncommenting indentedSyntax: true will simply drop another error saying that semicolons are not allowed. Upgrading versions will return other set of error. Fibers is out of scope (it just improves processing of certain async calls to my knowledge). Upgrading to Webpack5 adds a pletora of new problems as the json structure is quite different.
I'm totally stack at this point. There must be something else to work on the sass loader nut I'm not an expert on webpack so it's taking simply too long. Any help would be greatly appreciated at this point. I cannot believe none is having the same issue. I see many related answers but everyone seem to be doing fine just adding indentation. Thanks!

VueJs + Nuxt + Jest : Could not locate module

[SOLVED] See edit at the bottom.
I'm learning to use vuejs and I want to use good practices from the start.
So I'm usin nuxtjs for SSR and Jest to unit test my components.
I can't figure how to configure jest to point on my root directory instead of some src/ somewhere...
In my test fil, if I change the component path and add a simple ../, it works, but it's not how it's supposed to be.
And the moduleNameMapper in jest.config.json does not seems to work...
Note that I don't have an src/ directory, just a client/ one with my component, tests, pages, etc.
Here are my files, if you what i'm missing :
./package.json
{
"private": true,
"scripts": {
"dev": "nuxt -c client/nuxt.config.js",
"build": "nuxt build -c client/nuxt.config.js",
"start": "nuxt start -c client/nuxt.config.js",
"lint": "eslint --fix --ext .js,.vue client/",
"test": "jest"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.35",
"#fortawesome/free-brands-svg-icons": "^5.15.3",
"#fortawesome/free-regular-svg-icons": "^5.15.3",
"#fortawesome/free-solid-svg-icons": "^5.15.3",
"#fortawesome/vue-fontawesome": "^2.0.2",
"#nuxtjs/router": "^1.6.1",
"axios": "^0.21.1",
"bootstrap": "^4.6.0",
"dotenv": "^8.2.0",
"jquery": "^3.6.0",
"js-cookie": "^2.2.1",
"nuxt": "^2.15.3",
"popper.js": "^1.16.1",
"sweetalert2": "^10.15.6",
"typescript": "^4.2.3",
"vform": "^1.0.1",
"vue-i18n": "^8.24.2"
},
"devDependencies": {
"#babel/core": "^7.13.10",
"#babel/eslint-parser": "^7.13.10",
"#babel/preset-env": "^7.13.12",
"#nuxtjs/eslint-config": "^5.0.0",
"#vue/cli-plugin-unit-jest": "^4.5.12",
"#vue/test-utils": "^1.1.3",
"eslint": "^7.22.0",
"fs-extra": "^9.1.0",
"jest": "^26.6.3",
"node-sass": "^5.0.0",
"sass-loader": "^10.1.1",
"ts-jest": "^26.5.4",
"ts-node": "^9.1.1",
"vue-jest": "^3.0.7"
}
}
./client/nuxt.config.js
require('dotenv').config()
const { join } = require('path')
const { copySync, removeSync } = require('fs-extra')
module.exports = {
ssr: false,
srcDir: __dirname,
env: {
apiUrl: process.env.API_URL || process.env.APP_URL + '/api',
appName: process.env.APP_NAME || 'Laravel Nuxt',
appLocale: process.env.APP_LOCALE || 'en',
githubAuth: !!process.env.GITHUB_CLIENT_ID
},
head: {
title: process.env.APP_NAME,
titleTemplate: '%s - ' + process.env.APP_NAME,
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Nuxt.js project' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
loading: { color: '#007bff' },
router: {
middleware: ['locale', 'check-auth']
},
css: [
{ src: '~assets/sass/app.scss', lang: 'scss' }
],
plugins: [
'~components/global',
'~plugins/i18n',
'~plugins/vform',
'~plugins/axios',
'~plugins/fontawesome',
'~plugins/nuxt-client-init',
{ src: '~plugins/bootstrap', mode: 'client' }
],
modules: [
'#nuxtjs/router'
],
build: {
extractCSS: true
},
watchers: {
webpack: {
ignored: /node_modules/
}
},
hooks: {
generate: {
done (generator) {
// Copy dist files to public/_nuxt
if (generator.nuxt.options.dev === false && generator.nuxt.options.mode === 'spa') {
const publicDir = join(generator.nuxt.options.rootDir, 'public', '_nuxt')
removeSync(publicDir)
copySync(join(generator.nuxt.options.generate.dir, '_nuxt'), publicDir)
copySync(join(generator.nuxt.options.generate.dir, '200.html'), join(publicDir, 'index.html'))
removeSync(generator.nuxt.options.generate.dir)
}
}
}
}
}
./jest.config.ts
// Sync object
module.exports = {
preset: '#vue/cli-plugin-unit-jest/presets/no-babel',
moduleNameMapper: {
"/^#\/(.*)$/": "<rootDir>/$1"
},
};
./jsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"~/*": ["./*"],
"#/*": ["./*"],
"~~/*": ["./*"],
"##/*": ["./*"]
}
},
"exclude": ["node_modules", ".nuxt", "dist"]
}
And here is the error I get, no matter what I set in moduleNameMapper :
❯ node .\node_modules\jest\bin\jest.js --no-cache
FAIL client/__tests__/demo.spec.js
● Test suite failed to run
Configuration error:
Could not locate module #/client/components/Navbar mapped as:
C:\laragon\www\laravel-nuxt\src\$1.
Please check your configuration for these entries:
{
"moduleNameMapper": {
"/^#\/(.*)$/": "C:\laragon\www\laravel-nuxt\src\$1"
},
"resolver": undefined
}
1 | import { mount } from '#vue/test-utils'
2 |
> 3 | import Navbar from '#/client/components/Navbar'
| ^
4 |
5 | test('Navbar', () => {
6 | // restitue le composant
at createNoMappedModuleFoundError (node_modules/jest-resolve/build/index.js:551:17)
at Object.<anonymous> (client/__tests__/demo.spec.js:3:1)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 3.972 s
Ran all test suites.
[EDIT] : the problem was in the jes.conf.js file, just had to remove the / in the line : "/^#/(.)$/" => "^#/(.)$".