reexport - SyntaxError: Unexpected token 'export' - babeljs

There is such a file. That imports from API and exports at once.
export { extractValue, parse, parseCommand } from './parser'
export { Manager, EVENTS } from './manager'
export { runCLI, runCommand, bootstrapCommandManager } from './cli'
I receive an error:
export { extractValue, parse, parseCommand } from './parser'
^^^^^^
SyntaxError: Unexpected token 'export'
There is my babel.config.js
module.exports = {
presets: [['#babel/preset-env', {targets: {node: 'current'}}]],
plugins: [
['#babel/plugin-transform-modules-commonjs'],
['#babel/plugin-proposal-decorators', {'legacy': true}],
['#babel/plugin-proposal-class-properties'],
['#babel/plugin-proposal-export-default-from']
]
};
#babel/plugin-proposal-export-default-from does not help.

It did not compile files from node_modules directory. An ignore rule had to be set.
It works
Variant A babel-node
npx babel-node --ignore="/node_modules\/(?\!console-command-manager)/" --config-file ./babel.config.js ./src/index.js
I fault to move --ignore argument into ./babel.config.js
Variant B
Node executtion with -r runner.js
Execution
node -r ./runner.js src/index.js
Runner
const config = require('./babel.config.js')
console.log(config)
require("#babel/register")({
extensions: ['.js'],
ignore: [
/node_modules[\\/](?!console-command-manager)/
],
...config
});

Related

Babel Not working for imports from node_modules

I just discovered RollUP and I am stuck with an issue where Babel does not run for imports from node_modules.
Here is an example:
My Javascript Code
import { _map } from "#varunsridharan/js-vars"
const myarray = _map.call([1,2,3,4],(x)=> x * 2);
console.log(myarray);
Rollup Config
import { babel } from '#rollup/plugin-babel';
import { nodeResolve } from '#rollup/plugin-node-resolve';
import { uglify } from 'rollup-plugin-uglify';
import filesize from 'rollup-plugin-filesize';
import visualizer from 'rollup-plugin-visualizer';
export default {
input: './src/index.js',
output: {
file: './dist/myfile.min.js',
format: 'iife',
plugins: [
uglify( { mangle: true } ),
]
},
plugins: [
nodeResolve(),
babel(),
filesize(),
visualizer()
]
};
When I run rollup -c in CLI I get this output:
babelHelpers: 'bundled' option was used by default. It is recommended to configure this option explicitly, read more here: https://github.com/rollup/plugins/tree/master/packages/babel#babelhelpers
198 | * Array Related Vars.
199 | */
> 200 | const Arr = Array;
| ^ Unexpected token: keyword «const»
201 | const _Arrayprop = Arr.prototype;
202 | const _filter = _Arrayprop.filter;
203 | const _push = _Arrayprop.push;
[!] (plugin uglify) Error: Unexpected token: keyword «const»
SyntaxError: Unexpected token: keyword «const»
at JS_Parse_Error.get (eval at <anonymous> (E:\localhost\www\javascript\dizzle\node_modules\uglify-js\tools\node.js:18:1), <anonymous>:69:23)
at reportError (E:\localhost\www\javascript\dizzle\node_modules\jest-worker\build\workers\processChild.js:107:11)
at reportClientError (E:\localhost\www\javascript\dizzle\node_modules\jest-worker\build\workers\processChild.js:87:10)
at execFunction (E:\localhost\www\javascript\dizzle\node_modules\jest-worker\build\workers\processChild.js:157:5)
at execHelper (E:\localhost\www\javascript\dizzle\node_modules\jest-worker\build\workers\processChild.js:139:5)
at execMethod (E:\localhost\www\javascript\dizzle\node_modules\jest-worker\build\workers\processChild.js:143:5)
at process.<anonymous> (E:\localhost\www\javascript\dizzle\node_modules\jest-worker\build\workers\processChild.js:64:7)
at process.emit (events.js:315:20)
at emit (internal/child_process.js:876:12)
at processTicksAndRejections (internal/process/task_queues.js:85:21)
Based on the output i was able to understand that babel did not run for the imported modules. so i checking the options provided for rollup babel plugin # (https://github.com/rollup/plugins/tree/master/packages/babel) and found that it has include AND exclude options and i tried with the below config
babel( {
include: [ "node_modules/#varunsridharan/*/**", "./src/**" ],
exclude: "node_modules/**",
} ),
Still, nothing happened so I tried without ./src/** in babel include config and found that babel is not running in my main javascript file which imports the node_modules's file
Node Module Project Link: https://github.com/varunsridharan/js-vars

Jest: Cannot use import statement outside a module

I got an error when I run test using Jest, I tried to fix this error for 2 hours. But, I couldn't fix it. My module is using gapi-script package and error is occurred in this package. However, I don't know why this is occurred and how to fix it.
jest.config.js
module.exports = {
"collectCoverage": true,
"rootDir": "./",
"testRegex": "__tests__/.+\\.test\\.js",
"transform": {
'^.+\\.js?$': "babel-jest"
},
"moduleFileExtensions": ["js"],
"moduleDirectories": [
"node_modules",
"lib"
]
}
babel.config.js
module.exports = {
presets: [
'#babel/preset-env',
]
};
methods.test.js
import methods, { typeToActions } from '../lib/methods';
methods.js
import { gapi } from "gapi-script";
...
Error Message
C:\haram\github\react-youtube-data-api\node_modules\gapi-script\index.js:1
({"Object.":function(module,exports,require,__dirname,__filename,global,jest){import
{ gapi, gapiComplete } from './gapiScript';
SyntaxError: Cannot use import statement outside a module
What is wrong with my setting?
As of this writing, Jest is in the process of providing support for ES6 modules. You can track the progress here:
https://jestjs.io/docs/en/ecmascript-modules
For now, you can eliminate this error by running this command:
node --experimental-vm-modules node_modules/.bin/jest
instead of simply:
jest
Be sure to check the link before using this solution.
I solved this with the help of Paulo Coghi's answer to another question -
Does Jest support ES6 import/export?
Step 1:
Add your test environment to .babelrc in the root of your project:
{
"env": {
"test": {
"plugins": ["#babel/plugin-transform-modules-commonjs"]
}
}
}
Step 2:
Install the ECMAScript 6 transform plugin:
npm install --save-dev #babel/plugin-transform-modules-commonjs
Jest needs babel to work with modules.
For the testing alone, you do not need jest.config.js, just name the testfiles xxx.spec.js or xxx.test.js or put the files in a folder named test.
I use this babel.config.js:
module.exports = function (api) {
api.cache(true)
const presets = [
"#babel/preset-env"
]
return {
presets
}
}
Adding "type": "module" in package.json or using mjs as stated in other answers is not necessary when your setup is not too complicated.
I have also faced the same issue and this was resolved by adding following command-line option as a environment variable.
export NODE_OPTIONS=--experimental-vm-modules npx jest //linux
setx NODE_OPTIONS "--experimental-vm-modules npx jest" //windows
Upgrading Jest (package.json) to version 29 (latest as of now) solved this problem for me.

How to correctly bundle a vscode extension using webpack

The problem that i am having is that when i run vsce package i still get the This extension consists of 3587 separate files. For performance reasons, you should bundle your extension: warning, i followed the Bundling Extension steps, debugging works as expected.
package.json
{
"main": "./out/extension",
"scripts": {
"vscode:prepublish": "webpack --mode production",
"webpack": "webpack --mode development",
"webpack-dev": "webpack --mode development --watch",
"compile": "npm run webpack",
"watch": "tsc -watch -p ./",
"postinstall": "node ./node_modules/vscode/bin/install"
},
}
The webpack config is an exact copy of the Bundling Extension example.
This sounds like you might've forgotten to add the source directories to .vscodeignore, so they're still being packaged into the release. The ignore file should probably contain at least the following, plus anything else not needed at runtime:
src/**
node_modules/**
If you are working with a Language Server extension which has both client and server folders, If you exclude the node_modules of the client and server from the bundle the extension would fail when installed and launch for the first time
.vscodeignore contains
.vscode
**/*.ts
**/*.map
out/**
node_modules/**
test_files/**
client/src/**
server/src/**
tsconfig.json
webpack.config.js
.gitignore
Also the documentation is a bit obsolete regarding the webpack.config.js, you have to wrap the 'use strict' into a function with all the settings.
The entry setting was changed according to my needs
//#ts-check
(function () {
'use strict';
const path = require('path');
/**#type {import('webpack').Configuration}*/
const config = {
target: 'node', // vscode extensions run in a Node.js-context 📖 -> https://webpack.js.org/configuration/node/
entry: './client/src/extension.ts', // the entry point of this extension, 📖 -> https://webpack.js.org/configuration/entry-context/
output: {
// the bundle is stored in the 'dist' folder (check package.json), 📖 -> https://webpack.js.org/configuration/output/
path: path.resolve(__dirname, 'dist'),
filename: 'extension.js',
clean: true, //clean the dist folder for each time webpack is run
libraryTarget: 'commonjs2',
devtoolModuleFilenameTemplate: '../[resource-path]'
},
devtool: 'source-map',
externals: {
vscode: 'commonjs vscode' // the vscode-module is created on-the-fly and must be excluded. Add other modules that cannot be webpack'ed, 📖 -> https://webpack.js.org/configuration/externals/
},
resolve: {
// support reading TypeScript and JavaScript files, 📖 -> https://github.com/TypeStrong/ts-loader
extensions: ['.ts', '.js']
},
module: {
rules: [
{
test: /\.ts$/,
exclude: /node_modules/,
use: [
{
loader: 'ts-loader'
}
]
}
]
}
};
module.exports = config;
}());

qbs avr compiling

I try to build simple project with qbs
import qbs
Project {
name: "simple"
Product {
name: "micro"
type: "obj"
Group {
name: "sources"
files: ["main.c", "*.h", "*.S"]
fileTags: ['c']
}
Rule {
inputs: ["c"]
Artifact {
fileTags: ['obj']
filePath: input.fileName + '.o'
}
prepare: {
var args = [];
args.push("-g")
args.push("-Os")
args.push("-w")
args.push("-fno-exceptions")
args.push("-ffunction-sections")
args.push("-fdata-sections")
args.push("-MMD")
args.push("-mmcu=atmega328p")
args.push("-DF_CPU=16000000L")
args.push("-DARDUINO=152")
args.push("-IC:/Programs/arduino/hardware/arduino/avr/cores/arduino")
args.push("-IC:/Programs/arduino/hardware/arduino/avr/variants/standard")
args.push("-c")
args.push(input.fileName)
args.push("-o")
args.push(input.fileName + ".o")
var compilerPath = "C:/Programs/arduino/hardware/tools/avr/bin/avr-g++.exe"
var cmd = new Command(compilerPath, args);
cmd.description = 'compiling ' + input.fileName;
cmd.highlight = 'compiler';
cmd.silent = false;
console.error(input.baseDir + '/' + input.fileName);
return cmd;
}
}
}
}
And I get error
compiling main.c
C:/Programs/arduino/hardware/tools/avr/bin/avr-g++.exe -g -Os -w -fno-exceptions -ffunction-sections -fdata-sections -MMD "-mmcu=atmega328p" "-DF_CPU=16000000L" "-DARDUINO=152" -IC:/Programs/arduino/hardware/arduino/avr/cores/arduino -IC:/Programs/arduino/hardware/arduino/avr/variants/standard -c main.c -o main.c.o
avr-g++.exe: main.c: No such file or directory
avr-g++.exe: no input files
Process failed with exit code 1.
The following products could not be built for configuration qtc_avr_f84c45e7-release:
micro
What do I wrong?
File main.c present in project and in directory.
If I start this command from command prompt I do not get error.
In short, you need to pass input.filePath after -c and -o, not input.fileName. There's no guarantee that the working directory of the command invoked will be that of your source directory.
You can set the workingDirectory of a Command object, but that is not generally recommended as your commands should be independent of the working directory unless absolutely necessary.
Furthermore, you appear to be duplicating the functionality of the cpp module. Instead, your project should look like this:
import qbs
Project {
name: "simple"
Product {
Depends { name: "cpp" }
name: "micro"
type: "obj"
Group {
name: "sources"
files: ["main.c", "*.h", "*.S"]
fileTags: ['c']
}
cpp.debugInformation: true // passes -g
cpp.optimization: "small" // passes -Os
cpp.warningLevel: "none" // passes -w
cpp.enableExceptions: false // passes -fno-exceptions
cpp.commonCompilerFlags: [
"-ffunction-sections",
"-fdata-sections",
"-MMD",
"-mmcu=atmega328p"
]
cpp.defines: [
"F_CPU=16000000L",
"ARDUINO=152"
]
cpp.includePaths: [
"C:/Programs/arduino/hardware/arduino/avr/cores/arduino",
"C:/Programs/arduino/hardware/arduino/avr/variants/standard
]
cpp.toolchainInstallPath: "C:/Programs/arduino/hardware/tools/avr/bin"
cpp.cxxCompilerName: "avr-g++.exe"
}
}
it's work
args.push("-c")
args.push(input.filePath) at you args.push(input.fileName)
args.push("-o")
args.push(output.filePath)at you args.push(input.fileName)

Compile & compress SASS on deploybot with Grunt

I've got a grunt task to compile & compress my JS & SASS files which all works fine locally but when I try using it on deploybot.com I just get an error stating:
sass sass/main.scss public/css/main.css --style=compressed --no-cache
This is my grunt file:
module.exports = function(grunt){
grunt.initConfig({
concat:{
options:{
stripBanners: true,
sourceMap: true,
sourceMapName: 'src/js/jsMap'
},
dist:{
src: ['js/vendor/jquery.slicknav.js', 'js/vendor/swiper.js', 'js/app/*.js'],
dest: 'src/js/main.js'
},
},
copy:{
js:{
files:[
{ src: 'src/js/main.js', dest: 'public/js/main.js', },
{ src: 'src/js/jsMap', dest: 'public/js/jsMap', }
],
},
},
uglify:{
production:{
options:{
sourceMap: true,
sourceMapIncludeSources: true,
sourceMapIn: 'src/js/jsMap', // input sourcemap from a previous compilation
},
files: {
'public/js/main.js': ['src/js/main.js'],
},
},
},
sass:{
dev:{
options:{
style: 'expanded'
},
files:{
'public/css/main.css': 'sass/main.scss'
}
},
production:{
options:{
style: 'compressed',
noCache: true
},
files:{
'public/css/main.css': 'sass/main.scss'
}
}
},
watch: {
dev:{
files: ['js/**/*.js', 'sass/*.scss'],
tasks: ['build-dev'],
options: {
spawn: false,
interrupt: true,
},
},
},
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('build-dev', ['concat', 'copy:js', 'sass:dev']);
grunt.registerTask('build-prod', ['concat', 'uglify:production', 'sass:production']);
grunt.registerTask("watch-dev", ['watch:dev']);
};
These are the commands I'm running to compile & compress my code, all the version specific stuff was to try and fix the problem I have the same issue when remove it.
nvm install 0.10.25
nvm use 0.10.25
npm uninstall grunt -g
npm install grunt-cli -g
npm install grunt#0.4.5 --save-dev
npm install -g grunt-cli
npm install --save-dev
grunt build-prod --stack --verbose --debug
This is what is shown in the log file after the node & grunt install bits:
output Loading "Gruntfile.js" tasks...OK
output + build-dev, build-prod, watch-dev
output Running tasks: build-prod
output Running "build-prod" task
output [D] Task source: /source/Gruntfile.js
output Running "concat" task
output [D] Task source: /source/node_modules/grunt-contrib-concat/tasks/concat.js
output Running "concat:dist" (concat) task
output [D] Task source: /source/node_modules/grunt-contrib-concat/tasks/concat.js
output Verifying property concat.dist exists in config...OK
output Files: js/vendor/jquery.slicknav.js, js/vendor/swiper.js, js/app/centre-events-boxes.js, js/app/centre-footer.js, js/app/club.move-nav.js, js/app/club.social-link-position.js, js/app/func.stick-to-top.js, js/app/home.move-nav.js, js/app/home.stick-to-top.js, js/app/match-event-box-height.js, js/app/slicknav.js, js/app/swiperjs-slider.js -> src/js/main.js
output Options: separator="\n", banner="", footer="", stripBanners, process=false, sourceMap, sourceMapName="src/js/jsMap", sourceMapStyle="embed"
output Reading js/vendor/jquery.slicknav.js...OK
output Reading js/vendor/swiper.js...OK
output Reading js/app/centre-events-boxes.js...OK
output Reading js/app/centre-footer.js...OK
output Reading js/app/club.move-nav.js...OK
output Reading js/app/club.social-link-position.js...OK
output Reading js/app/func.stick-to-top.js...OK
output Reading js/app/home.move-nav.js...OK
output Reading js/app/home.stick-to-top.js...OK
output Reading js/app/match-event-box-height.js...OK
output Reading js/app/slicknav.js...OK
output Reading js/app/swiperjs-slider.js...OK
output Writing src/js/jsMap...OK
output Source map src/js/jsMap created.
output Writing src/js/main.js...OK
output File src/js/main.js created.
output Running "uglify:production" (uglify) task
output [D] Task source: /source/node_modules/grunt-contrib-uglify/tasks/uglify.js
output Verifying property uglify.production exists in config...OK
output Files: src/js/main.js -> public/js/main.js
output Options: banner="", footer="", compress={"warnings":false}, mangle={}, beautify=false, report="min", expression=false, maxLineLen=32000, ASCIIOnly=false, screwIE8=false, quoteStyle=0, sourceMap, sourceMapIncludeSources, sourceMapIn="src/js/jsMap"
output Minifying with UglifyJS...Reading src/js/jsMap...OK
output Parsing src/js/jsMap...OK
output Reading src/js/main.js...OK
output OK
output Writing public/js/main.js...OK
output Writing public/js/main.js.map...OK
output File public/js/main.js.map created (source map).
output File public/js/main.js created: 192.88 kB → 77.01 kB
output >> 1 sourcemap created.
output >> 1 file created.
output Running "sass:production" (sass) task
output [D] Task source: /source/node_modules/grunt-contrib-sass/tasks/sass.js
output Verifying property sass.production exists in config...OK
output Files: sass/main.scss -> public/css/main.css
output Options: style="compressed", noCache
output Command: sass sass/main.scss public/css/main.css --style=compressed --no-cache
output Errno::EISDIR: Is a directory # rb_sysopen - public/css/main.css
output Use --trace for backtrace.
output Warning: Exited with error code 1 Use --force to continue.
output Aborted due to warnings.
I've been trying to fix this for days and have no ideas. I've tried contacting their support too.
Turns out after contacting their support team multiple times the problem was on their end, something to do with a caching mechanism I think. Nothing I could do to solve it without their support though.