Rest-spread not being transpiled when targeting edge with NextJS - ecmascript-6

I am trying to transpile my ES6 code via Babel, I am using the next/babel preset along with preset-env and I'm using the browsers: defaults target.
The NextJS preset comes with #babel/plugin-proposal-object-rest-spread in its plugins array, I'm wondering why I am getting an error when testing on edge that says Expected identifier, string or number, and when looking in the compiled JS for the error, I see it happens when {...t} occurs.
Here is my babel.config.js:
module.exports = {
presets: [
[
'next/babel',
{
'#babel/preset-env': {
targets: {
browsers: 'defaults'
},
useBuiltIns: 'usage'
}
}
]
],
plugins: [
'#babel/plugin-proposal-optional-chaining',
'#babel/plugin-proposal-nullish-coalescing-operator',
['styled-components', { ssr: true, displayName: true, preprocess: false }],
[
'module-resolver',
{
root: ['.', './src']
}
]
],
env: {
development: {
compact: false
}
}
};
Any help on this would be greatly appreciated!

In the end my problem was related to a package that was not being transpiled by babel. My solution was to use NextJS' next-transpile-modules plugin to get babel to transpile the package code into something that would work on the browsers I need.
Here's an example of my NextJS webpack config with the package I need transpiled specified:
const withTM = require('next-transpile-modules');
module.exports = withTM({
transpileModules: ['swipe-listener']
});

SCRIPT1028: Expected identifier, string or number error can occur in 2 situations.
(1) This error get trigger if you are using trailing comma after your last property in a JavaScript object.
Example:
var message = {
title: 'Login Unsuccessful',
};
(2) This error get trigger if you are using a JavaScript reserved word as a property name.
Example:
var message = {
class: 'error'
};
solution is to pass the class property value as a string. You will need to use bracket notation, however, to call the property in your script.
Reference:
ERROR : SCRIPT1028: Expected identifier, string or number

Related

Error: 'Map' is not exported from 'react-leaflet' (imported as 'LeafletMap')

Here is my code:
import { Map as LeafletMap, TileLayer } from 'react-leaflet';
function Map() {
return (
<div className="map">
<LeafletMap>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='© OpenStreetMap contributors'/>
</LeafletMap>
</div>
But I got an error saying Attempted import error: 'Map' is not exported from 'react-leaflet' (imported as 'LeafletMap'). I've tried changing the 'import { Map' to 'import { MapContainer' but still won't work. Instead I got another error saying:
./node_modules/#react-leaflet/core/esm/path.js 10:41
Module parse failed: Unexpected token (10:41)
File was processed with these loaders:
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| useEffect(function updatePathOptions() {
| if (props.pathOptions !== optionsRef.current) {
> const options = props.pathOptions ?? {};
| element.instance.setStyle(options);
| optionsRef.current = options;
I also tried changing the react-leaflet version from ^3.2.1 to ^2.7.0 and leaflet from ^1.7.1 to ^1.6.0. But still no luck. Any solutions?
You'll have to explicitly transpile react-leaflet because the maintainer is not understanding they should change their transpilation target to a lower version in order to more fully support the nullish coalescing operator: https://github.com/PaulLeCam/react-leaflet/issues/877#issuecomment-841871904
You can try adding this to your babel config
{
"plugins": ["#babel/plugin-proposal-nullish-coalescing-operator"]
}
And then make sure you transpile node_modules/react-leaflet during your build. If you are already using #babel/preset-env then you only need to make sure you're transpiling react-leaflet during the build. If you're using webpack you can do something like
module: {
rules: [
{
test: /\.jsx?$/,
exclude: filename => {
return /node_modules/.test(filename) && !/react-leaflet/.test(filename)
},
use: ['babel-loader']
}
]
}

Different prettier's check results

I have script "lint:prettier": "prettier --check --ignore-unknown \"**/*.*\"",. Then I run it, I get successful result but in github actions I getting erorrs
Github action lint-action workflow:
- name: Run linters
run: npm run lint:prettier
.prettierrc.js:
module.exports = {
semi: true,
trailingComma: 'all',
singleQuote: true,
printWidth: 120,
tabWidth: 2,
endOfLine: 'auto',
};
.eslintrc.js:
module.exports = {
parser: '#typescript-eslint/parser', // Specifies the ESLint parser
extends: [
'plugin:react/recommended', // Uses the recommended rules from #eslint-plugin-react
'plugin:#typescript-eslint/recommended', // Uses the recommended rules from the #typescript-eslint/eslint-plugin
'plugin:prettier/recommended', // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
],
parserOptions: {
ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
sourceType: 'module', // Allows for the use of imports
ecmaFeatures: {
jsx: true, // Allows for the parsing of JSX
},
},
rules: {
'react/prop-types': [2, { ignore: ['children'] }],
},
settings: {
react: {
version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
},
},
};
How can I fix it?

bundling CesiumJS using RollupJS

I am trying to bundle CesiumJS with Rollup. I thought I could just do an import like this:
import Cesium from 'cesium/Build/Cesium/Cesium.js'
with the following rollup.config.js file. I am getting a bundle.js but when I run it I get lots errors:
Uncaught TypeError: Cannot read property 'document' of undefined
at bundle.js:formatted:102314
function() {
!function(e) {
var t = this || eval("this")
, r = t.document // it is complaining on this line
, i = t.navigator
, n = t.jQuery
, o = t.JSON;
rollup.config.js
import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import uglify from 'rollup-plugin-uglify'
import { minify } from 'uglify-es'
export default {
input: 'scripts/Main.js',
output: {
file: 'dist/bundle.js',
format: 'es',
},
"options": {
sourceMap: 'inline',
output: {
format: 'es'
}
},
plugins: [
resolve({
jsnext: true,
main: true,
browser: true,
}),
commonjs(),
uglify({}, minify)
]
}
ES modules are always in strict mode — by extension, when something is imported into Rollup and converted to an ES module, it also runs in strict mode.
In strict mode, the value of this inside a function is undefined, unless it's a) called as a method, or b) explicitly set with call or apply.
This is expected behaviour with Rollup, and it isn't technically a bug with Cesium, but I would suggest raising an issue with them and seeing if they can use a more modern way of accessing the global variable. There's really no reason to be relying on non-strict behaviour in 2017!
As a last resort you could string-replace this || eval("this") (or this||(0,eval)("this"), as it is in the minified version) with window.
If there are lots of other errors after making that change, it may be impossible to include Cesium in your bundle, and you would need to keep it as an external module.

i18next appends the default translation namespace to my namespaces

I am using i18n - aurelia's wrapper of i18next with the following configuration:
instance.i18next.use(Backend);
return instance.setup({
backend: {
loadPath: 'assets/locales/{{lng}}/{{ns}}.json',
},
detectFromHeaders: false,
lng: 'bg',
fallbackLng: 'bg',
ns: ['app', 'dp', 'management'],
defaultNS: 'app',
fallbackNS:'app',
attributes: ['t', 'i18n'],
useCookie: false,
getAsync: false,
debug: false
});
I have a component that switches to a different language via the setLocale(language) function. It works fine for the translations, however, when I switch between the languages for some reason i18next adds the translation.json to my namespaces although I don't use it and it makes an xhr call to get it and I get a 404 error for translation.json - a namespace I don't even want in the first place. Is there an option to remove it altogether from the namespaces?
Thanks in advance
The issue is not part of Aurelia-I18N but one of i18next itself. The only workaround I found so far is to set the fallbackLng to false.
{
backend: {
loadPath: './locales/{{lng}}/{{ns}}.json',
},
lng : 'de',
ns: ['foo'],
defaultNS: "foo",
attributes : ['t','i18n'],
fallbackLng : false, <----- SET THIS TO FALSE TO AVOID A SEARCH FOR translation NS
debug : false
}
This is a known issue that can be tracked here: https://github.com/aurelia/i18n/issues/47

How can I set the correct order of files to be concatenated with gulp-bundle-assets

I use gulp-bundle-assets for processing my static resources. I have the next configuration in my bundle.config.js:
module.exports = {
bundle: {
...
vendor: {
scripts: [
'./bower_components/angular/angular.js',
'./bower_components/angular-aria/angular-aria.js',
'./bower_components/angular-material/angular-material.js',
'./bower_components/angular-translate/angular-translate.js',
'./bower_components/angular-animate/angular-animate.js'
]
options: {
uglify: false,
order: {
scripts: [
'angular.js',
'*.js'
]
}
}
}
},
...
};
Thus, the first script to be concatenated must be angular.js, but "options.order" doesn't work correct - the first concatenated file in the final script is angular-animate.js. So, my question is how to achieve the correct order?
I'm the author of gulp-bundle-assets. The problem is with your glob syntax. Under the covers, gulp-bundle-assets uses gulp-order, which itself uses minimatch. The docs for each give lots of examples but for your particular use-case, this minimatch example shows your problem:
var minimatch = require("minimatch")
minimatch("./bower_components/angular/angular.js", "angular.js") // false
minimatch("./bower_components/angular/angular.js", "./**/angular.js") // true
Unfortunately the ./ at the beginning is throwing off minimatch. The following should fix your problem:
options: {
order: {
scripts: [
'./**/angular.js',
'./**/*.js'
]
}
}
Hope that helps.