regenerator.mark is not a function svelte + rollup + babel - babeljs

I am getting the error Uncaught TypeError: regenerator.mark is not a function
I checked bundle generated regenerator is { __esModule: true }
seems #babel/plugin-transform-runtime, it's not able to inject runtime.js in a bundle.
here's Rollup config:-
export default {
input: 'src/main.js',
output: {
sourcemap: true,
format: 'iife',
name: 'app',
file: `public/build/${bundleName}`,
},
plugins: [
svelte({
compilerOptions: {
// enable run-time checks when not in production
dev: !production,
},
preprocess: preprocess(),
}),
babel({
extensions: ['.js', '.mjs', '.html', '.svelte'],
runtimeHelpers: true,
exclude: 'node_modules/core-js/**',
presets: [
[
'#babel/preset-env',
{
// debug: true,
useBuiltIns: 'entry',
corejs: '3',
targets: {
browsers: ['safari >= 5', 'ie >= 11', 'not dead'],
},
},
],
],
plugins: [
'#babel/plugin-syntax-dynamic-import',
[
'#babel/plugin-transform-runtime',
{
useESModules: false,
},
],
],
}),
resolve({
browser: true,
dedupe: ['svelte'],
}),
commonjs(),
includePaths(includePathOptions),
production && terser(),
production && gzipPlugin(),
],
};

Related

503 The server is temporarily unable to service your request due to maintenance downtime or capacity problems. Please try again later. nuxt js

My site was running fine and then I updated nuxt.config.js. Then after that, the site starts to show Service Unavailable.
I am using pm2 to start / deploy the app. Its vps server with apache in it.
Its showing:
Service Unavailable
The server is temporarily unable to service your request due to maintenance downtime or capacity problems. Please try again later.
But, if I run npm run dev the site loads fine without any issue. Also, I checked the status with pm2 list, it showing the app is online.
My package.json
{
"name": "nuxtjs",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt --hostname domain.link --port 49000",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"deploy": "pm2 start npm --name nuxtjs -- start"
},
"dependencies": {
"#nuxtjs/axios": "^5.13.6",
"#yeger/vue-masonry-wall": "^3.0.16",
"core-js": "^3.19.3",
"nuxt": "^2.15.8",
"pm2": "^5.1.2",
"vue": "^2.6.14",
"vue-server-renderer": "^2.6.14",
"vue-template-compiler": "^2.6.14",
"webpack": "^4.46.0"
},
"devDependencies": {},
"config": {
"nuxt": {
"host": "0.0.0.0",
"port": "49000"
}
}
}
My nuxt.config:
import { join } from "path";
export default {
target: "static",
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: "Project Title",
htmlAttrs: {
lang: "en",
},
meta: [
{ charset: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
{ hid: "description", name: "description", content: "" },
{ name: "format-detection", content: "telephone=no" },
{ property: "og:title", content: "Project Title" },
{
property: "og:image",
content: "https://lovealabradoodle.com/images/two.jpg",
},
{
property: "og:description",
content:
"Content here",
},
],
link: [
{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
{
rel: "stylesheet",
href: "https://fonts.googleapis.com/css?family=Roboto:400,600,700%7CMontserrat:400,500,600,700",
},
{
rel: "stylesheet",
href: "https://use.fontawesome.com/releases/v5.15.4/css/all.css",
},
{
rel: "stylesheet",
href: join("/", `fonts/flaticon/flaticon.css`),
},
{
rel: "stylesheet",
href: join("/", `css/bootstrap.min.css`),
},
{
rel: "stylesheet",
href: join("/", `css/plugins.css`),
},
{
rel: "stylesheet",
href: join("/", `css/magnific-popup.css`),
},
{
rel: "stylesheet",
href: join("/", `css/aos.css`),
},
{
rel: "stylesheet",
href: join("/", `css/style.css`),
},
{
rel: "stylesheet",
href: join("/", `css/styles/maincolors.css`),
},
],
script: [
// {
// src: "js/jquery.min.js",
// body: true,
// },
{
src: join("/", `js/bootstrap.bundle.min.js`),
body: true,
},
{
src: join("/", `js/imagesloaded.pkgd.min.js`),
body: true,
},
{
src: join("/", `js/isotope.pkgd.min.js`),
body: true,
},
{
src: join("/", `js/jquery.magnific-popup.min.js`),
body: true,
},
{
src: join("/", `js/easing.min.js`),
body: true,
},
{
src: join("/", `js/aos.js`),
body: true,
},
{
src: join("/", `js/custom-nuxt.js`),
body: true,
},
],
bodyAttrs: {
id: "top",
},
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: [
// "~/static/css/bootstrap.min.css",
// "~/static/css/plugins.css",
// "~/static/css/magnific-popup.css",
// "~/static/css/aos.css",
// "~/static/css/style.css",
// "~/static/css/styles/maincolors.css",
],
//Global JS
// script: [
// "~assets/js/custom.js"
// ],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [],
// Auto import components: https://go.nuxtjs.dev/config-components
components: {
path: "~/components", // will get any components nested in let's say /components/test too
pathPrefix: false,
},
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
// https://go.nuxtjs.dev/axios
"#nuxtjs/axios",
],
// Axios module configuration: https://go.nuxtjs.dev/config-axios
axios: {
// Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308
baseURL: "http://api.domain.link/api",
retry: { retries: 3 },
},
publicRuntimeConfig: {
axios: {
baseURL: "http://api.domain.link/api",
},
},
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
extractCSS: true,
},
};
I ran yarn/npm install and it worked for me

Tailwind CSS styles not applied on deployed NextJs app on Vercel

All tailwind styles are broken on the deployed version
Localhost
Deployed version
MY tailwind config :
module.exports = {
mode: "jit",
purge: [
"./pages/**/*.{js, ts, jsx, tsx}",
"./components/**/*.{js,ts,jsx,tsx}"
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [
require("#tailwindcss/forms"),
require("tailwind-scrollbar"),
require("tailwind-scrollbar-hide"),
],
};
Try disabling the JIT mode. Not sure how you are adding classes to tags, but if its dynamic JIT doesn't work properly. I faced similar issue during my recent development.
module.exports = {
purge: [
"./pages/**/*.{js, ts, jsx, tsx}",
"./components/**/*.{js,ts,jsx,tsx}"
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [
require("#tailwindcss/forms"),
require("tailwind-scrollbar"),
require("tailwind-scrollbar-hide"),
],
};

Getting SourceMap position not found for trace with karma-typescript

Getting SourceMap position not found for trace. I am trying to build a unit test framework using typescript, mocha, karma, and karma-typescript and getting the following issue.
I tried using karma-sourcemap-loader but still, there is no luck. Can anyone please guide me on what am I missing here?
karma-typescript should be able to handle these source map things by themself in between multiple transformations.
Fetching /Users/test/sourcecode/test-web-ui/node_modules/karma-typescript/dist/client/commonjs.js
17 08 2021 23:47:06.959:DEBUG [web-server]: serving (cached): /Users/raukumar/sourcecode/test-web-ui/node_modules/karma-typescript/dist/client/commonjs.js
17 08 2021 23:47:07.357:WARN [reporter]: SourceMap position not found for trace: Uncaught Error: Can't find #react/react-spectrum/Button [undefined] (required by /Users/test/sourcecode/elements-web-ui/src/editors/doc/stage/actions/StageActionsView.tsx)
at http://localhost:9882/base/node_modules/karma-typescript/dist/client/commonjs.js?f5014f1e344ba3e2f0d92afe67b92f3001c46c90:13:17
I tried this solution SourceMap position not found for trace: AssertionError (Karma-Typescript) but after this, I am getting some different issues.
Uncaught Error: Can't find #react/react-spectrum/Button [undefined] (required by /Users/test/sourcecode/src/somefile.tsx
Karma.conf
module.exports = (config) => {
config.set({
// basePath: '',
//configFile: join(__dirname, "testing.tsconfig.json"),
plugins: ['karma-chrome-launcher', 'karma-mocha', 'karma-typescript', 'karma-webpack','karma-mocha-reporter','karma-sourcemap-loader'],
frameworks: ['mocha', 'karma-typescript'],
preprocessors: {
"**/*.ts": ["karma-typescript","sourcemap"],
"**/*.tsx": ["karma-typescript","sourcemap"], // *.tsx for React Jsx
'**/*.js': ["sourcemap"]
//"src/**/*.js": ["babel"]
},
logLevel: config.LOG_DEBUG,
browsers: ['Chrome'],
singleRun: true,
autoWatch: false,
color:true,
reporters: ["mocha", "karma-typescript"],
//files: [{ pattern: "src/**/*.ts" }, {pattern: "src/**/*.tsx" }, {pattern: "src/**/*.js"}],
files: [{ pattern: "src/**/!(*.spec).?(ts|tsx)" }, { pattern: "src/**/!(*.integration.spec).?(ts|tsx)" } ],
//webpack: webpackConfig,
karmaTypescriptConfig: {
// Allow tests to run even when there are compiler errors
stopOnFailure: true,
bundlerOptions: {
acornOptions: {
ecmaVersion: 8,
},
transforms: [
// eslint-disable-next-line #typescript-eslint/no-var-requires
require("karma-typescript-es6-transform")({
// eslint-disable-next-line #typescript-eslint/no-var-requires
//presets: [require("#babel/preset-env",{ "useBuiltIns": "entry"})],
//plugins: ['#babel/plugin-transform-spread'],
presets: [
["env", {
targets: {
browsers: ["last 2 Chrome versions"]
}
}]
]
})
]
},
compilerOptions: {
target: "ES2017",
lib: ['DOM', 'ES2015', 'ES2017'],
module: "CommonJS",
// Remove incompatible options
//incremental: false
},
tsconfig: "testing.tsconfig.json"
}
});
}
tsconfig.json
{
"compilerOptions": {
"target": "ES2017",
"module": "CommonJS",
"incremental": true,
"noUnusedParameters": false,
"sourceMap": true,
"jsx": "react",
"strict": true,
"esModuleInterop": true,
"declaration": true,
"declarationMap": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"allowSyntheticDefaultImports": true,
"noFallthroughCasesInSwitch": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true
},
"include": ["src/**/*.ts","src/**/*.tsx"],
"exclude": ["node_modules"]
}

How to pass arguments by command line for multicapabilities on protractor?

I need to pass headless arguments by command line.
In the begining I was working just with Chrome and I was using the following code to pass these arguments:
./node_modules/.bin/protractor "conf.js" --capabilities.chromeOptions.args=headless --capabilities.chromeOptions.args=disable-gpu --capabilities.chromeOptions.args=window-size=1248,1024
This is working properly, the problem is when I added firefox capabilities.
The qwestion: How can I pass this "headless" argument by command line with multiCapabilities?
I tried with:
./node_modules/.bin/protractor "conf.js" --multiCapabilities.1.chromeOptions.args=headless --multiCapabilities.1.chromeOptions.args=disable-gpu --multiCapabilities.1.chromeOptions.args=window-size=1248,1024 --multiCapabilities.0.moz:firefoxOptions=headless
But didn't work.
My config file:
exports.config = {
onPrepare: async function () {
console.log("Let's Start")
},
seleniumAddress: 'http://localhost:4444/wd/hub',
getPageTimeout: 100000,
allScriptsTimeout: 100000,
restartBrowserBetweenTests: true,
maxSessions: 2,
multiCapabilities: [{
browserName: 'firefox',
parallelCapability: false,
marionette: true,
"moz:firefoxOptions":{
//args: [ "--headless" ],
prefs:{
'pdfjs.disabled': true
}
},
'safebrowsing': {
'enabled': true,
}
}
,{
browserName: 'chrome',
parallelCapability: false,
'chromeOptions': {
prefs: {
download: {
'prompt_for_download': false,
'directory_upgrade': true,
'default_directory': process.cwd() + '/download/'
},
'safebrowsing': {
'enabled': true,
}
}
},
},
],
framework: 'custom',
frameworkPath: require.resolve('protractor-cucumber-framework'),
specs: [
'features/happyPath.feature'
],
cucumberOpts: {
require: [
'features/step_definitions/**/*.js',
'lib/hooks.js'],
profile: false,
'no-source': true
}
};
You have to specify the browser name
--multiCapabilities.0.browserName chrome
--multiCapabilities.1.browserName firefox

karma-browserify throws error when trying to load modules shimmed with browserify-shim

I know there were similar questions but none of them solved my problem.
When I run karma test it throws the following error, every time it tries to load a module, that was shimmed with browserify-shim:
TypeError: 'undefined' is not an object (evaluating 'module.exports = ex')
at /tmp/8ff1e03f7ba1f9c70ee4192510d267a2.browserify:3855:0 <- lib/underscore/underscore.js:1421:0
My karma.conf.js is the following:
module.exports = function(karma) {
karma.set({
frameworks: [ 'jasmine', 'browserify' ],
files: [
'test/spec/**/*Spec.js'
],
reporters: [ 'dots' ],
preprocessors: {
'test/spec/**/*Spec.js': [ 'browserify' ]
},
browsers: [ 'PhantomJS' ],
logLevel: 'LOG_DEBUG',
singleRun: true,
autoWatch: false,
// browserify configuration
browserify: {
debug: true,
transform: [ 'reactify', 'browserify-shim' ]
}
});
};
And here is the relevant part of my package.json file:
...
"browser": {
"underscore": "./lib/underscore/underscore.js",
"jquery": "./lib/jquery/dist/jquery.js",
"typeahead": "./lib/bootstrap3-typeahead/bootstrap3-typeahead.js",
"bootstrap": "./lib/bootstrap/dist/js/bootstrap.js",
"q": "./lib/q/q.js"
},
"browserify-shim": {
"underscore": "_",
"jquery": "jQuery",
"typeahead": {
"depends": [
"jquery"
]
}
},
"browserify": {
"transform": [
"browserify-shim"
]
},
....
Any idea what can caus the problem?
I had the same problem and have resolved it by removing the browserify-shim transform from karma configuration file, since it is already declared as a transform on package.json file.
Hope that helps.