Develop Reference

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.

Support for the experimental syntax 'jsx' isn't currently enabled error on imported module

I'm building an npm package that includes one react component as part of it. I originally developed the package as just a subfolder of the react app I was testing it on and it was all working. Now that I've extracted the code and turned it into it's own package, when I try to import it and build the react project it receives the error:
Support for the experimental syntax 'jsx' isn't currently enabled
...
Add #babel/plugin-transform-react-jsx (https://git.io/vb4yd) to the 'plugins' section of your Babel config to enable transformation.
When I run build on the extracted package itself it builds with no issues, it's only when I try and incorporate it into the other project that it has issues. I've tried many of the other solutions from other threads with no luck.
package.json
{
"name": "my-tracing-project",
"version": "1.0.9",
"description": "tracing and instrumentation for react projects",
"main": "src/index.js",
"directories": {
"doc": "docs"
},
"scripts": {
"build": "webpack --mode=production --node-env=production",
"test": "echo \"Error: no test specified\" && exit 1",
"build:dev": "webpack --mode=development",
"build:prod": "webpack --mode=production --node-env=production",
"watch": "webpack --watch"
},
"author": "",
"license": "ISC",
"dependencies": {
"#babel/plugin-transform-react-jsx": "^7.14.3",
"#babel/preset-flow": "^7.13.13",
"#babel/runtime": "^7.14.0",
"#opentelemetry/context-zone": "^0.19.0",
"#opentelemetry/exporter-collector": "^0.19.0",
"#opentelemetry/instrumentation": "^0.19.0",
"#opentelemetry/instrumentation-document-load": "^0.16.0",
"#opentelemetry/instrumentation-fetch": "^0.19.0",
"#opentelemetry/instrumentation-user-interaction": "^0.16.0",
"#opentelemetry/instrumentation-xml-http-request": "^0.19.0",
"#opentelemetry/plugin-react-load": "^0.16.0",
"#opentelemetry/tracing": "^0.19.0",
"#opentelemetry/web": "^0.19.0",
"babel-preset-react": "^6.24.1"
},
"devDependencies": {
"#babel/cli": "^7.14.3",
"#babel/core": "^7.14.3",
"#babel/plugin-proposal-class-properties": "^7.13.0",
"#babel/plugin-transform-runtime": "^7.14.3",
"#babel/preset-env": "^7.14.4",
"#babel/preset-react": "^7.13.13",
"#rollup/plugin-babel": "^5.3.0",
"#webpack-cli/generators": "^2.1.0",
"babel-loader": "^8.2.2",
"prettier": "^2.3.0",
"rollup": "^2.50.4",
"webpack": "^5.38.1",
"webpack-cli": "^4.7.0"
},
"peerDependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1"
}
}
babel.config.js
module.exports = {
presets:[
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
[
"#babel/plugin-proposal-class-properties",
{
"loose": true
}
]
]
}
webpack.config.js
// Generated using webpack-cli https://github.com/webpack/webpack-cli
const path = require("path");
const isProduction = process.env.NODE_ENV == "production";
const config = {
entry: path.resolve(__dirname, 'src', 'index.js'),
output: {
path: path.resolve(__dirname, "dist"),
},
plugins: [
// Add your plugins here
// Learn more about plugins from https://webpack.js.org/configuration/plugins/
],
module: {
rules: [
{
test: /\.(js|jsx)$/i,
loader: "babel-loader",
},
{
test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
type: "asset",
},
// Add your rules for custom modules here
// Learn more about loaders from https://webpack.js.org/loaders/
],
},
};
module.exports = () => {
if (isProduction) {
config.mode = "production";
} else {
config.mode = "development";
}
return config;
};

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 : "/^#/(.)$/" => "^#/(.)$".

How to have a config.js file as an external (it being required during run time and not bundled) in webpack

I am new to webpack. I am making a react application which will read text from an external config.js file and display it on the UI. I am trying to have a external config.js file which I dont want to be bundled but be required during run time.
This is my webpack.config.js:
const path = require('path');
const html_plugin = require("html-webpack-plugin");
module.exports = {
mode: 'development',
entry: './src/app.js',
output: {
path: path.resolve(__dirname,'build'),
filename: 'build.js'
},
externals: {
config: './config.js',
},
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader'
},
{
test: /\.css$/,
use: ['style-loader','css-loader']
}
]
},
plugins: [new html_plugin({ template: './src/index.html' })]
}
The config.js is in the same directory as webpack.config.js.
This is my config.js:
module.exports = {
title: 'ssup'
}
This is how I am using my config.js in a component:
import config from 'config';
class ... {
return <h1>{config.title}</h1>
}
Here is my project structure:
- src/
- webpack.config.js
- config.js
When I try to run this application, it shows the following error in my chrome console:
the line 681 in build.js contains this:
eval("module.exports = ./config.js;\n\n//# sourceURL=webpack:///external_%22./config.js%22?");
Here is my package.json:
{
"name": "react-from-scratch",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --open",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^16.10.2",
"react-dom": "^16.10.2"
},
"devDependencies": {
"#babel/core": "^7.6.4",
"#babel/preset-env": "^7.6.3",
"#babel/preset-react": "^7.6.3",
"babel-loader": "^8.0.6",
"css-loader": "^3.2.0",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^1.0.0",
"webpack": "^4.41.1",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.8.2"
}
}
what am I doing wrong?

You don't need any webpack configuration to do that. Save your config as JSON and fetch it at runtime instead of build time.
Also, what are you trying to achieve using this technique? What is your use case?

Vue.js - Invalid CSS after

I am trying to compile Vue.js based front-end application, but each time I do try to run it, I receive following error message:
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
^
Invalid CSS after "": expected 1 selector or at-rule, was "import './ProjectM"
in /app/src/components/ProjectMenuButton/ProjectMenuButton.vue (line 1, column 1)
I used to see this error before whenever I was including .css files with wrong path delivered.
The problem is that there literally has not been any .css file included into this file:
/app/src/components/ProjectMenuButton/ProjectMenuButton.vue:
<template>
<button :class="buttonClass" #click="changed()">
<h3>{{ this.ProjectMenuButton.text }}</h3>
</button>
</template>
<script>
export default {
name: "ProjectMenuButton",
props: {
ProjectMenuButton: {
type: Object,
default: () => ({
id: '',
text: '',
page: '',
class: 'btn'
})
},
ProjectMenuButtonClass: {
type: Object,
default: () => ({
class: ''
})
}
},
computed: {
buttonClass() {
if(typeof this.ProjectMenuButtonClass.class === undefined
|| this.ProjectMenuButtonClass.class === undefined)
return `ui basic button menu-button`;
else
return `ui basic button menu-button ${this.ProjectMenuButtonClass.class}`;
},
},
methods: {
changed: function(event) {
store.commit('current_menu', this.ProjectMenuButton.page);
}
}
};
</script>
I've tried different commands, like:
npm install --save-dev webpack
npm rebuild node-sass
But none of above worked.
Moreover, I do start Vue.js with following docker-container configuration:
frontend:
image: node:10-alpine
command: npm run serve
volumes:
- ./.env:/app/.env:ro
- ./frontend:/app
working_dir: /app
restart: on-failure
postgres:
image: postgres:10-alpine
volumes:
- postgres_data:/var/lib/postgresql/data
env_file: .env
package.json:
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "npm i && vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"axios": "^0.18.0",
"register-service-worker": "^1.5.2",
"vue": "^2.5.17",
"vue-router": "^3.0.1",
"vue-raven": "^1.0.0",
"vue-analytics": "^5.16.0",
"vuex": "^3.0.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.0.1",
"#vue/cli-plugin-eslint": "^3.0.1",
"#vue/cli-plugin-pwa": "^3.0.1",
"#vue/cli-plugin-unit-jest": "^3.0.1",
"#vue/cli-service": "^3.0.1",
"#vue/eslint-config-standard": "^3.0.1",
"#vue/test-utils": "^1.0.0-beta.24",
"babel-core": "^6.26.3",
"babel-jest": "^23.4.2",
"node-sass": "^4.9.3",
"sass-loader": "^7.1.0",
"vue-template-compiler": "^2.5.17"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"#vue/standard"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"jest": {
"moduleFileExtensions": [
"js",
"jsx",
"json",
"vue"
],
"transform": {
"^.+\\.vue$": "vue-jest",
".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
"^.+\\.jsx?$": "babel-jest"
},
"moduleNameMapper": {
"^#/(.*)$": "<rootDir>/src/$1"
},
"snapshotSerializers": [
"jest-serializer-vue"
],
"testMatch": [
"<rootDir>/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))"
]
}
}