Trying to set up gulp to concat some CSS files.
In my gulpfile.js I have this:
const paths = {
css: {
cssForConcat: [
'./css/*.css',
'!./css/style.css',
],
}
}
But this code:
function styles () {
return gulp.src([paths.css.cssForConcat])
Returns an error:
[07:23:27] 'styles' errored after 811 μs
[07:23:27] Error: Invalid glob argument: ./css/*.css,!./css/style.css
Copying-and-pasting the constant value works OK with no error:
function styles () {
return gulp.src('./css/*.css', '!./css/style.css')
What is wrong with my constant definition?
The problem is that you passed in [['./css/*.css', '!./css/style.css']] rather than './css/*.css', '!./css/style.css', just remove the brackets around paths.css.cssForConcat and it should work as expected.
E.g.: return gulp.src(paths.css.cssForConcat)
Related
Babel is giving me the following error:
../../node_modules/next/dist/pages/_error.js
SyntaxError: JSON5: invalid character 'm' at 3:1
My .babelrc and babel.config.cjs:
/* eslint-disable no-template-curly-in-string */
module.exports = {
presets: [['next/babel']],
plugins: [
[
'babel-plugin-transform-imports',
{
lodash: {
transform: 'lodash/${member}',
preventFullImport: true,
},
'#mui/material': {
transform: '#mui/material/${member}',
preventFullImport: true,
},
'#mui/icons-material': {
transform: '#mui/icons-material/${member}',
preventFullImport: true,
},
'#mui/lab': {
transform: '#mui/lab/${member}',
preventFullImport: true,
},
<snip>
Per the babel Config Files documentation:
.babelrc is an alias for .babelrc.json
and
babel.config.json and .babelrc.json are parsed as JSON5 and should contain an object...
The error message you are getting confirms this: Babel is parsing the file as JSON5 and beginning on line 3 column 1 the content is not valid JSON5. If you remove the module.exports = from that line, the error will be fixed.
(I cannot tell whether you have other errors in you .babelrc since you didn't not present the entire file. Once you fix the above line you'll find out.)
On the other hand, your file babel.config.cjs is expected to be valid Javascript, you would need to retain the module.exports = . Or you could rename it to babel.config.json and use the same format as your .babelrc.
You may also want to rename your .babelrc to .babelrc.json to make its format explicit in its name.
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']
}
]
}
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
I keep getting the following error with my gulpfile for the watch plugin
‘watch* errored after XXms
Error in plugin ‘gulp-watch’
Message:
glob should be String or Array, not object
Here is what my code in the gulpfile looking like
function sassWatch(sassData) {
gulp.src(sassData.watch)
.pipe(watch({glob:sassData.watch, emitOnGlob: true}, function() {
gulp.src(sassData.sass)
.pipe(sass(sassOptions))
.on('error', function(err) {
gutil.log(err.message);
gutil.beep();
global.errorMessage = err.message + " ";
})
.pipe(checkErrors())
.pipe(rename(sassData.name))
.pipe(gulp.dest(sassData.output))
.pipe(livereload());
}));
}
Any idea what I'm doing wrong here?
You're using the pre-1.0.0 way of providing a globbing pattern to gulp-watch, but your gulp-watch plugin has a version >= 1.0.0.
The 1.0.0 release of gulp-watch changed the method signature from:
watch([options, callback])
to
watch(glob, [options, callback])
This means you have to provide your globbing pattern like this:
.pipe(watch(sassData.watch, { /*other options*/ }, function() {
Note that the emitOnGlob option was removed in 1.0.0. Read this github issue and the Migration to 1.0.0 notes for more information.
So first.. I have next gulp task:
gulp.task('js', function() {
browserify('./src/js/main.js')
.bundle()
.on('error', onError)
.pipe( source('main.js') )
.pipe( gulp.dest(path.build.js) );
});
and package.json:
{
"browserify": {
"transform": [
["babelify", { "presets": ["es2015"] }],
"debowerify"
]
},
}
I am importing Backbone in main.js (or only underscore... it doesn't matter)
import Backbone from 'backbone';
And in console I am getting error
Uncaught TypeError: Cannot read property '_' of undefined
I checked code and found that in underscore sources at start of library root is undefined
// Establish the root object, `window` in the browser, or `exports` on the server.
var root = this;
// Save the previous value of the `_` variable.
var previousUnderscore = root._;
I think the problem is that debowerify or babelfy is wrapping code in some function. But also if I use node modules without debowerify all works fine. But I want to use bower.
So how to fix this problem?
To any future visitors to this question,
this is similar to Underscore gives error when bundling with Webpack
The gist of the issue is that babel is probably running the underscore.js code, since underscore.js uses this, and in es6 this is undefined when outside of a function, naturally this._ fails.
In code I've fixed the issue by ensuring that babel does not run on node_modules.
In my case the same error arose when using just browserify with underscore. I've workarounded issue by switching from underscore to lodash. They are in general (surely not fully) compatible, but at the worst I'd rather copy some missing function from underscore sources than live with its deisolated load approach.