We Keep Coding

(plugin babel) Error: Plugin/Preset files are not allowed to export objects, only functions

I'm trying to create a npm package and
below is my package.json
{
"name": "********",
"version": "1.0.0",
"description": "*****************",
"keywords": [
"exit",
"intent"
],
"main": "dist/*********.js",
"module": "dist/********.es.js",
"umd:main": "dist/********.umd.js",
"files": [
"dist"
],
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"lint": "npm run prettier-eslint -- 'src/**/*.{js,json}'",
"build": "rollup -c",
"dev": "rollup -c -w",
"prettier-eslint": "prettier-eslint --write --no-semi --single-quote --no-bracket-spacing",
"changelog": "standard-version",
"size": "npx gzip-size-cli ./dist/exit-detect.js ",
"precommit": "lint-staged",
"prepush": "npm test",
"prepublish": "npm run build"
},
"lint-staged": {
"src/**/*.{js,json}": [
"npm run prettier-eslint"
]
},
"author": "Amaarshall Yaswankar",
"license": "MIT",
"dependencies": {
"lodash": "^4.17.21"
},
"devDependencies": {
"#babel/core": "^7.15.8",
"#babel/preset-env": "^7.15.8",
"#babel/preset-react": "^7.14.5",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.2",
"babel-plugin-external-helpers": "^6.22.0",
"babel-plugin-lodash": "^3.3.4",
"babel-plugin-module-resolver": "^4.1.0",
"babel-preset-stage-2": "^6.24.1",
"eslint": "^7.32.0",
"eslint-config-standard": "^16.0.3",
"eslint-config-standard-jsx": "^10.0.0",
"eslint-import-resolver-node": "^0.3.6",
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.24.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.1.0",
"eslint-plugin-react": "^7.26.1",
"eslint-plugin-standard": "^5.0.0",
"husky": "^7.0.2",
"lint-staged": "^11.2.0",
"prettier": "^2.4.1",
"prettier-eslint-cli": "^5.0.1",
"rollup": "^2.58.0",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-uglify": "^6.0.4",
"rollup-watch": "^4.3.1",
"standard-version": "^9.3.1",
"uglify-es": "^3.3.9"
},
"homepage": "https://github.com/********/*********#readme"
}
I'm using using rollup to build my package and below is the config file rollup.config.js
import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import babel from 'rollup-plugin-babel'
import {uglify} from 'rollup-plugin-uglify'
import {minify} from 'uglify-es'
import fs from 'fs'
const pkg = JSON.parse(fs.readFileSync('./package.json'))
export default {
name: '*********',
input: 'src/********.js',
output: [
{format: 'es', file: pkg.module},
{format: 'cjs', file: pkg.main},
{format: 'umd', file: pkg['umd:main']}
],
plugins: [
resolve(),
commonjs(),
babel({
babelrc: false,
exclude: 'node_modules/**',
presets: [
[
'#babel/preset-env',
{
modules: false,
loose: true,
targets: {browsers: ['last 2 versions', '> 1%']}
}
],
'#babel/preset-react',
'babel-preset-stage-2'
],
plugins: ['external-helpers']
}),
uglify({}, minify)
]
}
Now that all the babel packages are updated, I have tried updating the things as per the new versions. But still I'm facing the below error when I run npm run build.
rollup v2.58.0
bundles src/exit-detect.js → dist/exit-detect.es.js, dist/exit-detect.js, dist/exit-detect.umd.js...
[!] (plugin babel) Error: Plugin/Preset files are not allowed to export objects, only functions.
Not sure why this is happening, need your help guys
Thanks in advance

vue-cli-service serve and buid generating different styles

I'm not sure how to show it but for some reason after vue-cli-service build and vue-cli-service serve page looks different. In the case of build all is fine but in the case of serve styles are messed, but there are no errors while building and no error in the browser console. I can share the package.json if it can help and some other configuration files I have...
package.json
{
"name": "newlanding",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vuelidate": "^0.7.5",
"vuetify": "^2.2.11"
},
"devDependencies": {
"#mdi/js": "^5.4.55",
"#vue/cli-plugin-babel": "~4.4.0",
"#vue/cli-plugin-eslint": "~4.4.0",
"#vue/cli-service": "~4.4.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"sass": "^1.19.0",
"sass-loader": "^8.0.0",
"vue-cli-plugin-vuetify": "~2.0.7",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.3.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
vue.config.js
module.exports = {
"transpileDependencies": [
"vuetify"
]
}
babel.config.js
module.exports = {
presets: [
'#vue/cli-plugin-babel/preset'
]
}
I know it's hard to find the reason without the actuall code... but maybe you have some suggestion, I do not know where else to look, as I told before no errors while building and in browser, also no errors in yarn-error.log.

Which is the entry file used by vue-cli-service?

Got a project using vue, webpack, babel, npm.
Could start it via npm run server, when trying to figure out how this command work, I saw vue-cli-service serve from package.json.
But, how does vue-cli-service start the program? I saw main.js which in turn render Vue.vue, both of which are under src/.
Didn't see anywhere config the entry file, so is main.js the default entry for vue-cli-service?
Code
package.json:
{
"name": "quizer-ui",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --port 3000",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^2.6.5",
"element-ui": "^2.10.1",
"vue": "^2.6.10",
"vue-router": "^3.0.7"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.9.0",
"#vue/cli-plugin-eslint": "^3.9.0",
"#vue/cli-service": "^3.9.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"vue-cli-plugin-element": "^1.0.1",
"vue-template-compiler": "^2.6.10"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}

vue-cli-service uses Webpack with a default configuration of
entry: {
app: [
'./src/main.js'
]
}
This can be altered in vue.config.js if you wish. See https://cli.vuejs.org/guide/webpack.html#simple-configuration
Webpack will build a JS bundle, starting at the entry then inject that into the index.html file and that's how your app starts.
You can see the entire configuration for your app using
vue inspect
See https://cli.vuejs.org/guide/webpack.html#inspecting-the-project-s-webpack-config

It is hardcoded in #vue.
Relative Path: node_modules/#vue/cli-service/lib/config/base.js
Line 28-37:
webpackConfig
.mode('development')
.context(api.service.context)
.entry('app')
.add('./src/main.js')
.end()
.output
.path(api.resolve(options.outputDir))
.filename(isLegacyBundle ? '[name]-legacy.js' : '[name].js')
.publicPath(options.publicPath)

Rollup [!] Error: Unexpected token for antd lib

I am creating npm package for antd and redux-form wrapper. i use RollUp for jsx compilation. i installed antd lib for dependency. when i run script it will show following error.
> rollup -c
src/index.tsx → dist/index.js, dist/index.es.js...
[!] Error: Unexpected token
node_modules/antd/package.json (2:9)
1: {
2: "_from": "antd#3.19.1",
^
3: "_id": "antd#3.19.1",
4: "_inBundle": false,
my rollup.config.js
import typescript from 'rollup-plugin-typescript2'
import commonjs from 'rollup-plugin-commonjs'
import external from 'rollup-plugin-peer-deps-external'
// import postcss from 'rollup-plugin-postcss-modules'
import postcss from 'rollup-plugin-postcss'
import resolve from 'rollup-plugin-node-resolve'
import url from 'rollup-plugin-url'
import svgr from '#svgr/rollup'
import globals from "rollup-plugin-node-globals";
import builtins from "rollup-plugin-node-builtins";
import json from "rollup-plugin-json";
import pkg from './package.json'
export default {
input: 'src/index.tsx',
output: [
{
file: pkg.main,
format: 'cjs',
exports: 'named',
sourcemap: true
},
{
file: pkg.module,
format: 'es',
exports: 'named',
sourcemap: true
}
],
plugins: [
external(),
postcss({
modules: true
}),
url(),
svgr(),
resolve({preferBuiltins: false}),
typescript({
rollupCommonJSResolveHack: true,
clean: true
}),
commonjs(),
globals(),
builtins(),
json()
]
}
my package.json
{
"name": "a8formelements",
"version": "1.0.1",
"description": "sample",
"author": "",
"license": "MIT",
"repository": "/formelements",
"main": "dist/index.js",
"module": "dist/index.es.js",
"jsnext:main": "dist/index.es.js",
"engines": {
"node": ">=8",
"npm": ">=5"
},
"scripts": {
"test": "cross-env CI=1 react-scripts-ts test --env=jsdom",
"test:watch": "react-scripts-ts test --env=jsdom",
"build": "rollup -c",
"start": "rollup -c -w",
"prepare": "npm run build",
"predeploy": "cd example && npm install && npm ru n build",
"deploy": "gh-pages -d example/build"
},
"dependencies": {
"antd": "3.19.1",
"classnames": "^2.2.6",
"moment": "^2.24.0",
"uuid": "^3.3.2",
"validate.js": "^0.12.0"
},
"peerDependencies": {
"prop-types": "^15.5.4",
"react": "^15.0.0 || ^16.0.0",
"react-dom": "^15.0.0 || ^16.0.0"
},
"devDependencies": {
"#types/classnames": "^2.2.7",
"#types/uuid": "^3.4.4",
"#svgr/rollup": "^2.4.1",
"#types/jest": "^23.1.5",
"#types/node": "^11.13.5",
"#types/react": "^16.8.13",
"#types/react-dom": "^16.0.5",
"#types/redux-form": "^8.1.1",
"babel-core": "^6.26.3",
"babel-runtime": "^6.26.0",
"cross-env": "^5.1.4",
"gh-pages": "^1.2.0",
"react": "^16.4.1",
"rollup-plugin-json": "^4.0.0",
"react-dom": "^16.4.1",
"react-scripts-ts": "^2.16.0",
"rollup": "^0.62.0",
"rollup-plugin-babel": "^3.0.7",
"rollup-plugin-commonjs": "^9.1.3",
"rollup-plugin-node-builtins": "^2.1.2",
"rollup-plugin-node-globals": "^1.4.0",
"rollup-plugin-node-resolve": "^3.4.0",
"rollup-plugin-peer-deps-external": "^2.2.0",
"rollup-plugin-postcss": "^1.6.2",
"rollup-plugin-typescript2": "^0.20.1",
"rollup-plugin-url": "^1.4.0",
"typescript": "^2.8.3"
},
"files": [
"dist"
]
}
I updated my rollup.config.js with rollup-plugin-json integration. when i add this config i got another error like below :
node_modules/rc-editor-mention/es/index.js (2:9)
1: // export this package's api
2: import { ContentState } from 'draft-js';
^
3: import Mention from './component/Mention.react';
4: import toString from './utils/exportContent';

You can find an interresting discussion here.
It's suggested that you should use rollup-plugin-json.
Is somehow weird, but axios node adapter requires its own package.json
which rollup doesn't understand by default.
To make rollup understand json files, just use rollup-plugin-json.
I've just tried and it's working fine.
Someone has the same issue as yours but with axios and I think it's the same concept.
You can try it out.

Babel plugin not being recognized when trying to run Jest

I'm just starting to write some Jest tests but have immediately run into an "unknown plugin" error in what otherwise appeared to be a fully working Webpack/Babel setup that functions fine at the npm run dev/npm run build stage.
Specifically, I'm getting ReferenceError: Unknown plugin "#babel/transform-async-to-generator" specified in "C:\\Users\\scott\\path\\to\\ThisProject\\.babelrc" at 0, attempted to resolve relative to "C:\\Users\\scott\\path\\to\\ThisProject"
(Error reads that way as I'm in Git Bash on Windows.)
I definitely have #babel/plugin-transform-async-to-generator installed.
The relevant part of my package.json looks like:
"scripts": {
"test": "jest",
"build": "webpack --mode=production",
"dev": "webpack --mode=development"
},
"jest": {
"transform": {
"^.+\\.jsx?$": "babel-jest"
}
},
"dependencies": {
"#babel/core": "^7.1.2",
"#babel/plugin-transform-arrow-functions": "^7.0.0",
"#babel/plugin-transform-async-to-generator": "^7.1.0",
"#babel/plugin-transform-modules-commonjs": "^7.1.0",
"#babel/plugin-transform-runtime": "^7.1.0",
"#babel/polyfill": "^7.0.0",
"#babel/preset-env": "^7.1.0",
"babel-loader": "^8.0.4",
"clean-webpack-plugin": "^0.1.19",
"copy-webpack-plugin": "^4.5.2",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2"
},
"devDependencies": {
"ajv": "^6.5.4",
"babel-jest": "^23.6.0",
"eslint": "^5.8.0",
"jest": "^23.6.0",
"jsdom": "^13.0.0",
}
My .babelrc is very simple:
{
"presets": [
[
"#babel/preset-env",
{
"targets": {
"ie": "11"
},
"useBuiltIns": "entry"
}
]
],
"plugins": [
"#babel/transform-async-to-generator",
"#babel/transform-arrow-functions",
"#babel/transform-modules-commonjs"
],
"env": {
"development": {},
"test": {},
"production": {}
}
}
Likewise jest.config.js which is straight out of jest --init:
module.exports = {
clearMocks: true,
coverageDirectory: "coverage",
testEnvironment: "jsdom"
};
Any ideas on what might be going wrong?

Try running npm install --save-dev babel-jest babel-core#^7.0.0-bridge #babel/core, I believe the babel team released a bridge package to aid dependencies that are affected by the v7 upgrade.
See here for more info: https://github.com/facebook/jest/tree/master/packages/babel-jest#usage