I would like to include es7 functions in my project to start using fetch await asynchronous way in it.
I'm using gulp, browserify and babelify (7.2.0), reading some docs I saw that the way to say babelify to use es7 functions is including this line to the babelify transform:
optional: ['runtime', 'es7.asyncFunctions']
So that my whole gulp task is as follows:
gulp.task('js',function(){
var bundleStream = browserify({
entries:[config.paths.mainJs],
debug: true,
transform: [babelify.configure({
presets:["es2015","react"],
optional: ['runtime', 'es7.asyncFunctions']
})]
}).transform("browserify-shim")
.bundle()
.on('error',console.error.bind(console))
bundleStream
.pipe(source('compiled.js'))
.pipe(buffer())
// .pipe(uglify())
.pipe(rename('compiled.min.js'))
.pipe(gulp.dest(config.paths.dist + '/js'))
});
Unfortunetely I'm getting the following error running the task:
"Unknown option: base.optional while parsing file:"
Googling a bit I saw that babelify 7.x does use babel 6.0 and apparently this parameter optional does not exist anymore in babel 6.0.
I don't want to downgrade my babelify version to make this work but instead I would like to include es7 functions with the version 7 of babelify, does someone know how to do it?
Any help would be very appreciated as there is no much info about it out there
Just in case, please find also my package.json file:
"dependencies": {
"bootstrap": "^3.3.5",
"history": "^1.13.0",
"jquery": "^2.1.4",
"jquery-ui": "^1.10.4",
"jquery.easing": "^1.3.2",
"moment": "^2.10.2",
"react": "^0.14.3",
"react-bootstrap": "^0.28.1",
"react-dom": "^0.14.3",
"react-router": "^1.0.2",
"reflux": "^0.3.0"
},
"devDependencies": {
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"babelify": "^7.2.0",
"browserify": "^9.0.8",
"browserify-shim": "^3.8.11",
"gulp": "^3.9.0",
"gulp-concat": "^2.6.0",
"gulp-connect": "^2.2.0",
"gulp-open": "^1.0.0",
"gulp-rename": "^1.2.2",
"gulp-uglify": "^1.5.1",
"jest-cli": "^0.8.0",
"reactify": "^1.1.0",
"regenerator": "^0.8.42",
"streamify": "^0.2.5",
"uglify-js": "^2.4.20",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.1.2"
},
"browser": {
"jquery": "src/main/webapp/js/libs/jquery-1.11.1.min.js",
"x": "./vendor/x.js"
},
"browserify": {
"transform": [
"browserify-shim"
]
},
"browserify-shim": {
"jquery": "$"
}
optional: ['runtime', 'es7.asyncFunctions']
was how you configure Babel 5. You are using Babel 6, so it would be
plugins: ['transform-runtime', 'transform-async-to-generator']
One thing to note is that configuring Babel via Babelify is not recommended. Instead, it is better to create an .babelrc file in the root of your application with JSON in it, e.g.
{
presets:["es2015","react"],
plugins: ['transform-runtime', 'transform-async-to-generator']
}
and npm install --save-dev babel-plugin-transform-runtime babel-plugin-transform-async-to-generator
Related
I got the below error when I'm trying to run npm install. Error Message:
taskRepository: Failed to require task module for setTimestamp: require() of ES Module ......\node_modules\dateformat\lib\dateformat.js from .....\setTimestamp.js not
supported.
Instead change the require of dateformat.js in .....\setTimestamp.js to a dynamic import() which is available in all CommonJS modules.
In setTimestamp.js file, we have
const stringReplacer = require("#ui5/builder").processors.stringReplacer;
const df = require("dateformat");
This is a SAPUI5 based cloud application and we've 2 package.json files.
Under Root folder:
"version": "1.2.0",
"devDependencies": {
"#ui5/builder": "^2.11.5",
"#ui5/cli": "^2.14.10",
"#wdio/cli": "7.23.0",
"#wdio/cucumber-framework": "7.23.0",
"#wdio/junit-reporter": "7.23.0",
"#wdio/local-runner": "7.23.0",
"#wdio/selenium-standalone-service": "7.23.0",
"#wdio/spec-reporter": "7.23.0",
"chai": "^4.3.6",
"chromedriver": "^104.0.0",
"cucumber-html-reporter": "5.5.0",
"nyc": "^15.1.0",
"opa-e2e": "^1.0.11",
"request": "^2.88.2",
"request-promise": "^4.2.6",
"shelljs": "^0.8.5",
"type": "module",
"wdio-chromedriver-service": "^7.3.2",
"wdio-cucumber-reporter": "0.0.2",
"wdio-cucumberjs-json-reporter": "^4.4.3"
},
"resolutions": {
"terser": ">=5.14.2",
"markdown-it": ">=12.3.2",
"marked": ">=4.0.10",
"shelljs": ">=0.8.5",
"ejs": ">=3.1.7",
"node-fetch": ">=2.6.7",
"got": ">=11.8.5",
"follow-redirects": ">=1.14.8",
"minimist": ">=1.2.6"
}
Inner one:
"ui5": {
"dependencies": [
"ui5-middleware-livereload",
"ui5-middleware-simpleproxy",
"ui5-middleware-servestatic",
"#dwc/ui5-middleware-dwc"
]
},
"devDependencies": {
"#dwc/ui5-middleware-dwc": "^1.4.2-20220817085704",
"#ui5/cli": "^2.14.10",
"dateformat": "^5.0.3",
"env-cmd": "^10.1.0",
"eslint": "^8.22.0",
"karma": "6.4.0",
"karma-chrome-launcher": "^3.1.1",
"karma-coverage": "^2.2.0",
"karma-junit-reporter": "^2.0.1",
"karma-qunit": "^4.1.2",
"karma-sinon": "^1.0.5",
"karma-ui5": "2.4.0",
"nyc": "^15.1.0",
"qunitjs": "^2.4.1",
"rimraf": "^3.0.2",
"shelljs": "^0.8.5",
"start-server-and-test": "^1.14.0",
"ui5-middleware-livereload": "^0.7.0",
"ui5-middleware-servestatic": "^0.4.0",
"ui5-middleware-simpleproxy": "^0.9.1",
"wdio-chromedriver-service": "7.3.2"
},
"resolutions": {
"terser": ">=5.14.2",
"markdown-it": ">=12.3.2",
"marked": ">=4.0.10",
"ua-parser-js": ">=0.7.24",
"log4js": ">=6.4.0",
"karma": ">=6.3.16",
"follow-redirects": ">=1.14.8",
"minimist": ">=1.2.6"
}
I tried to fix this issue by using:
npm i node-fetch#2.6.1
Or, in package.json file , wrote "type": "module" etc.
Ref: Instead change the require of index.js, to a dynamic import() which is available in all CommonJS modules
Could anyone please help me to solve the error? Any help would be much appreciate.
Request: Please don't close the question. I know it's duplicate question, however I couldn't find any solution, tried how much I found.Thank you
I got the same error requiring node-fetch. The solution was
const fetch = (...args) => import('node-fetch').then(({default: fetch}) => fetch(...args));
After updating all my outdated npm packages to #latest, my electron app fails to start, giving the error
ERROR in ./src/index.js
[0] Module build failed (from ./node_modules/babel-loader/lib/index.js):
[0] Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/nyxynyx/foobar/node_modules/babel-preset-stage-0/lib/index.js
Any idea what went wrong? Thank you everyone!
.babelrc
{
"presets": ["env", "stage-0", "react"],
"plugins": [
"babel-plugin-styled-components",
"react-hot-loader/babel",
["transform-class-properties", { "loose": true }]
]
}
package.json (dependencies & devDependencies)
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.21",
"#fortawesome/free-solid-svg-icons": "^5.10.1",
"#fortawesome/react-fontawesome": "^0.1.4",
"babel-core": "^6.26.3",
"babel-eslint": "^10.0.2",
"babel-loader": "^8.0.6",
"babel-plugin-styled-components": "^1.10.6",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.26.0",
"bootstrap": "^4.3.1",
"css-loader": "^3.2.0",
"electron-log": "^3.0.7",
"electron-updater": "^4.1.2",
"file-loader": "^4.2.0",
"firebase": "^6.3.4",
"fix-path": "^2.1.0",
"json-loader": "^0.5.7",
"lodash": "^4.17.15",
"menubar": "^6.0.7",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-redux": "^7.1.0",
"react-redux-firebase": "^2.3.0",
"reactstrap": "^8.0.1",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0",
"style-loader": "^1.0.0",
"styled-components": "^4.3.2",
"typeface-open-sans": "0.0.75",
"url-loader": "^2.1.0"
},
"devDependencies": {
"concurrently": "^4.1.1",
"devtron": "^1.4.0",
"electron": "^6.0.1",
"electron-builder": "^21.2.0",
"electron-debug": "^3.0.1",
"electron-devtools-installer": "^2.2.4",
"eslint": "^6.1.0",
"eslint-config-airbnb": "^17.1.1",
"eslint-import-resolver-webpack": "^0.11.1",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.14.3",
"express": "^4.17.1",
"react-dom": "^16.8.6",
"react-hot-loader": "^4.12.10",
"react-router": "^5.0.1",
"react-router-dom": "^5.0.1",
"stylelint": "^10.1.0",
"stylelint-config-standard": "^18.3.0",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.39.1",
"webpack-dev-middleware": "^3.7.0",
"webpack-hot-middleware": "^2.25.0",
"webpack-merge": "^4.2.1"
},
Using node v12.6.0 on Mac OS X Mojave 10.14.5
I am moving my answer from comment due to lack of space there :)
Try using new packages for babel-core, babel-register and presets, replacing the old ones since they are depricated (babel-core, babel-presets-env, etc):
#babel/core - https://www.npmjs.com/package/#babel/core,
#babel/presets-env - https://babeljs.io/docs/en/babel-preset-env,
#babel/presets-react - https://babeljs.io/docs/en/babel-preset-react,
#babel/presets-stage-0 https://babeljs.io/docs/en/babel-preset-stage-0,
#babel/polyfill - https://babeljs.io/docs/en/babel-polyfill and
#babel/register - https://babeljs.io/docs/en/babel-register.
Then try deleting package.lock, and running again npm i . If that is not helping you can also try deleting node_modules folder, and running npm i again
babel-preset-env / babel-preset-react packages are deprecated.
use #babel/preset-env and #babel/preset-react packages.
And do the following change in .babelrc :
"presets": ["#babel/env", "#babel/react"]
That is due to outdated babel packages being used. The babel project, just like most other active Javascript projects, have moved on to using scope packages. Hence, the package names starts with #babel
Check this to fix issue
Laravel mix is adding moment JS code into CSS files. So, run npm prod is resulting to an error:
CssSyntaxError: Missed semicolon.
I imported Moment.js into one of Vue component.
This is my package JSON:
"devDependencies": {
"axios": "^0.19",
"compass-mixins": "^0.12.10",
"cross-env": "^5.1",
"css-loader": "^3.2.0",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.13",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"vue": "^2.5.17",
"vue-router": "^3.1.2",
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
"bootstrap-vue": "^2.0.0-rc.28",
"vue-lodash": "^2.0.2",
"vue-material-design-icons": "^3.3.1",
"vue2-daterange-picker": "^0.3.1"
}
This is the webpack.mix.js file:
mix
.sass("resources/sass/admin/app.scss", "public/admin/css")
.js("resources/js/admin/app.js", "public/admin/js");
And this is the part of inserted JS code in compiled CSS after I run npm run watch:
var map = {
"./af": "./node_modules/moment/locale/af.js",
"./af.js": "./node_modules/moment/locale/af.js",
"./ar": "./node_modules/moment/locale/ar.js",
"./ar-dz": "./node_modules/moment/locale/ar-dz.js"}
It is weird, why this happen?
You need to add the following plugin:
plugins: [
new webpack.IgnorePlugin({
resourceRegExp: /^\.\/locale$/,
contextRegExp: /moment$/
}),
]
Don't forget to import webpack:
const webpack = require('webpack');
I am setting up (or actually modifying existing) project with Browserify and Babelify. For some reason I can't configure my gulpfile properly. The project itself is a React project, if it matters.
I got rid of most of the problems, but now I am getting "Unexpected token" error on Browserify. It is caused by React components or html elements with attribute names which have a dash, ie. the following:
<button type="button" data-toggle="collapse">
My Browserify task:
gulp.task('browserify', function() {
browserify('./src/js/main.js')
.transform(babelify.configure({
presets: ["react", "es2015"]
}))
.bundle()
.on('error', function(err){
process.stdout.write('' + err + '\n');
notifier.notify({
title: 'Error',
message: err,
sound: true,
wait: true
}, function (err, response) {
});
})
.pipe(source('main.js'))
.pipe(gulp.dest('dist/js'))
.pipe(connect.reload());
});
Package.json:
{
"name": "srcd-mockup",
"version": "1.0.0",
"description": "",
"main": "gulpfile.js",
"dependencies": {
"babel-preset-es2015": "^6.0.12",
"bootstrap-sass": "^3.3.5",
"browserify": "^11.2.0",
"flux": "^2.1.1",
"font-awesome": "^4.4.0",
"gulp": "^3.9.0",
"gulp-concat": "^2.6.0",
"jquery": "^2.1.4",
"lodash": "^3.10.1",
"node-notifier": "^4.3.1",
"react": "^0.14.1",
"react-dom": "^0.14.1",
"react-redux": "^4.0.0",
"react-router-component": "^0.27.2",
"reactify": "^1.1.1",
"redux": "^3.0.4",
"redux-logger": "^2.0.4",
"updeep": "^0.10.1",
"vinyl-source-stream": "^1.1.0"
},
"devDependencies": {
"babel-preset-react": "^6.0.12",
"babelify": "^7.0.2",
"gulp-connect": "^2.2.0",
"gulp-notify": "^2.2.0",
"gulp-sass": "^2.0.4",
"gulp-uglify": "^1.4.1",
"redux-devtools": "^2.1.5"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
What I tried before:
The weird thing here is that previously I had similar project with similar dependencies and config, and it worked fine.
Then I tried to set up the new one, and first I got Unexpected token error on this line on my main.js (initial render of React):
ReactDOM.render(<App />, document.getElementById('main'));
The error was caused by "(". Then there was no presets on Babelify.
If I only have "react" on presets, I get "ParseError: 'import' and 'export' may appear only with 'sourceType: module'", because of, well importing.
Questions:
Is this related to Babelify or can it be caused by other module or dependency?
Is this related to Babel 6?
Why is dash causing the error?
How should I set this up?
There appears to be a bug as of Babel version 6.0.12 which is rendering data-* tags as object keys without quoting them, resulting in invalid JS syntax.
You can use a pre-v6 version of Babel, or else wait for someone to submit a fix.
UPDATE:
A fix for this just got checked into the repo, so this will be fixed in the next release.
I work on an Ember CLI project that has Ember Data declared as a dependency in the the project's package.json and bower.json files respectively. Two different Ember Data versions are declared.
Which dependency takes precedence and why must it be declared in two places?
package.json
{
"devDependencies": {
"active-model-adapter": "1.13.5",
"emberx-select": "1.1.4",
"broccoli-asset-rev": "^2.0.2",
"broccoli-funnel": "^0.2.3",
"ember-cli": "0.2.7",
"ember-cli-app-version": "0.3.3",
"ember-cli-babel": "^5.0.0",
"ember-cli-content-security-policy": "0.4.0",
"ember-cli-dependency-checker": "^1.0.0",
"ember-cli-html5-validation": "0.0.18",
"ember-cli-htmlbars": "0.7.6",
"ember-cli-ic-ajax": "0.1.1",
"ember-cli-inject-live-reload": "^1.3.0",
"ember-cli-qunit": "0.3.13",
"ember-cli-rails-addon": "0.0.11",
"ember-cli-sass": "4.0.1",
"ember-cli-uglify": "^1.0.1",
"ember-data": "1.0.0-beta.18",
"ember-disable-proxy-controllers": "^1.0.0",
"ember-export-application-global": "^1.0.2",
"shared": "../shared"
}
}
bower.json
{
"dependencies": {
"ember": "1.13.2",
"ember-cli-shims": "ember-cli/ember-cli-shims#0.0.3",
"ember-cli-test-loader": "ember-cli-test-loader#0.1.3",
"ember-data": "1.13.4",
"ember-load-initializers": "ember-cli/ember-load-initializers#0.1.4",
"ember-qunit": "0.3.3",
"ember-qunit-notifications": "0.0.7",
"ember-resolver": "~0.1.15",
"jquery": "^1.11.1",
"loader.js": "ember-cli/loader.js#3.2.0",
"qunit": "~1.17.1",
"bourbon": "~4.2.3",
"bitters": "~1.0.0",
"neat": "~1.7.2"
}
}
The dependency in Bower determines which version is used in the built app. I believe the npm package is just there for the development tooling.