Vue 3 in iOS 9: Unexpected keyword 'const'. Const declarations are not supported in strict mode - babeljs

My Vue 3 app doesn't work in Safari 9. There is this error in console:
Unexpected keyword 'const'. Const declarations are not supported in strict mode.
My package.json:
{
"name": "test",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#babel/polyfill": "^7.12.1",
"#babel/preset-env": "^7.12.1",
"#babel/runtime-corejs2": "^7.12.5",
"axios": "^0.21.0",
"bootstrap": "^4.5.3",
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-axios": "^3.1.3",
"vue-slider-component": "^4.0.0-beta.3"
},
"devDependencies": {
"#vue/babel-preset-app": "^4.5.8",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.2",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0-0",
"sass": "^1.28.0",
"sass-loader": "^10.0.5"
},
"eslintConfig": {
"rules": {},
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
}
},
"browserslist": [
"last 2 versions",
"safari >= 7",
"ios_saf >= 8",
"chrome >= 52"
]
}
My babel.config.js:
module.exports = {
presets: [
['#vue/babel-preset-app']
]
}
I know that the error can be caused by not-transpiled dependencies, but I tried to transpile them in vue.config.js by transpileDependencies option. But doesn't work neither.

So here's an answer for my question: https://github.com/vuejs/vue-cli/issues/6041#issuecomment-722966178
Vue 3 doesn't support iOS 9 yet.

Related

Prettier throwing error in VScode fresh CRA app installation

I installed a fresh install of CRA and also installed eslint and prettier and as well as two packages to make them work smoothly with each other.
Eslint is working and active but prettier is not formatting. I get the following error in the terminal:
Error: Failed to load plugin 'react' declared in 'CLIOptions': The argument 'filename' must be a file URL object, file URL string, or absolute path string. Received ''
Package.json:
{
"name": "test-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest",
"prettier"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"eslint": "^8.20.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-react": "^7.30.1",
"prettier": "^2.7.1"
}
}

Could not find a declaration file for module 'react-map-gl-geocoder'

Hi I am trying to use Mapbox geocoder for my react-project. I am always getting those two errors.
Could not find a declaration file for module 'react-map-gl-geocoder'. 'Git/react-excercises/node_modules/react-map-gl-geocoder/dist/index.js' implicitly has an 'any' type.
Try npm i --save-dev #types/react-map-gl-geocoder if it exists or add a new declaration (.d.ts) file containing declare module 'react-map-gl-geocoder';ts(7016)
./node_modules/react-map-gl-geocoder/dist/index.m.js
Attempted import error: 'FlyToInterpolator' is not exported from 'react-map-gl' (imported as 'r').
This is my package.json
{
"name": "react-excercises",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"axios": "^0.26.0",
"bootstrap": "^5.1.3",
"mapbox": "^1.0.0-beta10",
"mapbox-gl": "^2.7.0",
"mapbox-gl-geocoder": "^2.0.1",
"prop-types": "^15.8.1",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-icons": "^4.3.1",
"react-map-gl": "^7.0.9",
"react-map-gl-geocoder": "^2.2.0",
"react-mapbox-gl-geocoder": "^1.1.0",
"react-scripts": "4.0.3",
"reactstrap": "^9.0.1",
"styled-components": "^5.3.3",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

Set up testing-library/react with mocha got SyntaxError: Unexpected token

I am setting up testing-library/react with mocha. Faced a lot of problems on the setup that were resolved by installing babel libraries and configuring them in .babelrc file as explained on the bottom most part of this question. Now, I am stuck on this error:
> mocha --exit --require #babel/register --require jsdom-global/register
D:\projects\demo_app\node_modules\antd\es\row\index.js:1
(function (exports, require, module, __filename, __dirname) { import { Row } from '../grid';
^
SyntaxError: Unexpected token {
at new Script (vm.js:79:7)
at createScript (vm.js:251:10)
at Object.runInThisContext (vm.js:303:10)
at Module._compile (internal/modules/cjs/loader.js:657:28)
This comes from ant.design component which uses the syntax above. I have tried to test a dummy component like below:
const component = () => (<div>hello</div>)
And it has no problem. But whenever I import my real component that I need to test that is using ant design, I get the error above.
Is it setup part for babel not configured properly? I have no idea how to fix the error. Somehow have a guess that it might be related to babel presets or plugins.
P.S. My project is using Create React App, the exact same test runs smoothly with Jest, but for some reason I don't want to use jest.
Below is .babelrc
{
"presets": [
["#babel/preset-env",
{
"targets": {
"esmodules": true,
"node": "current"
}
}
],
["#babel/preset-react"]
],
"plugins": [
["#babel/plugin-proposal-class-properties"],
["module-resolver", {
"root": ["./src"],
"alias": {
"underscore": "lodash"
}
}]
]
}
Below is package.json
{
"dependencies": {
"antd": "^4.4.2",
"axios": "^0.19.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-google-oauth": "^1.0.0",
"react-icons": "^3.10.0",
"react-redux": "^7.1.3",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.1",
"recompose": "^0.30.0",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"styled-components": "^5.0.1",
"validator": "^13.1.17"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "mocha --exit --require #babel/register --require jsdom-global/register",
"test:jest": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/core": "7.12.9",
"#babel/plugin-proposal-class-properties": "7.12.1",
"#babel/preset-env": "^7.12.7",
"#babel/preset-react": "7.12.7",
"#babel/register": "7.12.1",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"babel-eslint": "10.1.0",
"babel-plugin-module-resolver": "^4.0.0",
"chai": "4.2.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"eslint-plugin-flowtype": "^3.13.0",
"eslint-plugin-import": "^2.20.1",
"husky": "^4.2.1",
"jsdom": "^16.4.0",
"jsdom-global": "^3.0.2",
"mocha": "8.2.1",
"msw": "^0.19.5",
"react-test-renderer": "^16.13.1",
"redux-mock-store": "^1.5.4",
"standard": "^14.3.1"
},
"optionalDependencies": {
"fsevents": "^2.1.2"
},
"standard": {
"parser": "babel-eslint",
"ignore": [
"/public"
]
},
"jest": {
"transformIgnorePatterns": [
"node_modules/?!(react)/"
]
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
]
}
Any help would be appreciated.
You have "esmodules": true which forces Babel to use ES modules. That means that if you're using Node, it needs to support ES modules, and you either need to have your tests in .mjs files or have "type": "module" in package.json. If this isn't supported or you want to support older Node versions, remove "esmodules": true from your Babel config to enable compatibility with CJS modules.

Electron App Not Starting after I build it

I have installed the electron-packager npm module globally and run npm run build to build my application.
When I do this, the app seems to build properly and it outputs an application (see picture). However, the date/time on the application is from over a month ago. Furthermore, when I open the application, it simply presents a blank screen.
Below, please find my package.json and accompanying pictures.
{
"name": "turtlecreeklane",
"version": "0.0.1",
"author": "Tanner Houghton <houta483#uchicago.edu>",
"description": "An electron-vue project",
"license": "ISC",
"main": "./dist/electron/main.js",
"scripts": {
"build": "electron-packager . TCL",
"build:dir": "node .electron-vue/build.js && electron-builder --dir",
"build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js",
"build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js",
"dev": "./start_backend.sh& node .electron-vue/dev-runner.js",
"pack": "npm run pack:main && npm run pack:renderer",
"pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.main.config.js",
"pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js",
"postinstall": ""
},
"build": {
"productName": "turtlecreeklane",
"appId": "com.example.yourapp",
"directories": {
"output": "build"
},
"files": [
"dist/electron/**/*"
],
"dmg": {
"contents": [
{
"x": 410,
"y": 150,
"type": "link",
"path": "/Applications"
},
{
"x": 130,
"y": 150,
"type": "file"
}
]
},
"mac": {
"icon": "build/icons/Icon-48"
},
"win": {
"icon": "build/icons/icon.ico"
},
"linux": {
"icon": "build/icons"
}
},
"dependencies": {
"axios": "^0.19.2",
"body-parser": "^1.19.0",
"cookie-parser": "^1.4.5",
"ejs": "^3.0.2",
"electron-unhandled": "^3.0.2",
"express": "^4.17.1",
"multer": "^1.4.2",
"path": "^0.12.7",
"pillow": "0.0.9",
"vue": "^2.5.16",
"vue-axios": "^2.1.5",
"vuex": "^3.1.3"
},
"devDependencies": {
"ajv": "^6.5.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-minify-webpack-plugin": "^0.3.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.26.0",
"cfonts": "^2.1.2",
"chalk": "^2.4.1",
"copy-webpack-plugin": "^4.5.1",
"cross-env": "^5.1.6",
"css-loader": "^0.28.11",
"del": "^3.0.0",
"devtron": "^1.4.0",
"electron": "^2.0.4",
"electron-builder": "^20.19.2",
"electron-debug": "^1.5.0",
"electron-devtools-installer": "^2.2.4",
"electron-packager": "^14.2.1",
"electron-prebuilt": "^1.4.13",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "0.4.0",
"multispinner": "^0.2.1",
"node-loader": "^0.6.0",
"style-loader": "^0.21.0",
"url-loader": "^1.0.1",
"vue-html-loader": "^1.2.4",
"vue-loader": "^15.2.4",
"vue-style-loader": "^4.1.0",
"vue-template-compiler": "^2.5.16",
"webpack": "^4.15.1",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4",
"webpack-hot-middleware": "^2.22.2",
"webpack-merge": "^4.1.3"
}
}
Picture showing that the project seems to be built but the date if for over a month ago...
Picture showing that the app looks blank after it is opened
Thanks,
Tanner

VS Code Mocha debug errors out on ES6 code

I'm trying to debug my tests for my React Redux app in VS Code.
Running my tests in Jest works great, but the when I run the debugger I get this error:
(function (exports, require, module, __filename, __dirname) { import * as actions from "../src/redux/actions/tasksActions";
^^^^^^
SyntaxError: Unexpected token import
I'm using the following configuration in my launch.json:
{
"type": "node",
"request": "launch",
"name": "Mocha Tests",
"program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
"args": [
"--require #babel/register",
"--inspect-brk",
"-u",
"tdd",
"--timeout",
"999999",
"--colors",
"${workspaceFolder}/tests"
],
"internalConsoleOptions": "openOnSessionStart"
}
The first args in the config, "--require #babel/register", "--inspect-brk", came from suggestions on blogs I found while googling my error (the first arg was said to fix this exact error). Same error happens, though, with or without either of those args.
Here's my package.json if it helps.
{
"name": "client",
"version": "0.1.0",
"private": true,
"devDependencies": {
"#babel/cli": "^7.4.4",
"#babel/core": "^7.4.4",
"#babel/node": "^7.2.2",
"#babel/preset-env": "^7.4.4",
"#babel/register": "^7.4.4",
"babel-jest": "^24.7.1",
"chai": "^4.2.0",
"enzyme": "^3.9.0",
"expect": "^24.7.1",
"jest": "^24.7.1",
"jsdom": "^15.0.0",
"mocha": "^6.1.4",
"react-addons-test-utils": "^15.6.2",
"react-scripts": "0.7.0"
},
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-redux": "^7.0.2",
"redux": "^4.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest",
"test:watch": "npm test -- --watch",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Any ideas? Thanks!