ERROR in ./ClientApp/Client.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions.
{
"name": "misreact",
"version": "1.0.0",
"description": "",
"path": "^0.12.7",
"main": "HelloWorld.js",
"dependencies": {
"#babel/core": "^7.1.2",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"react": "^16.6.0",
"react-dom": "^16.6.0",
"webpack": "^4.23.1",
"webpack-cli": "^3.1.2"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.0.4",
"webpack-dev-server": "^3.1.10"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start:dev": "webpack-dev-server --hot"
},
"author": "",
"license": "ISC"
}
As of Babel 7, stages are deprecated. You can use the following package to update automatically (the following command will run the update with installing babel-update on your computer permanently):
npx babel-upgrade --write
This package is going to install all stage-2 updates (each updates is an individual package now). You may want to consider what updates you actually need and remove the rest.
I would upgrade to #babel/env and #babel/preset-react as well, as mentioned in the comments.
Related
Error Description:
When running jest for a simple unit test of javascript code I get the error Test suite failed to run Unknown option: .preset
Below are the files to reproduce the error:
{
"name": "RelocationTrackerApp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "jest",
"start-debug": "webpack-dev-server --open --config webpack.dev.js",
"build-release": "webpack --config webpack.prod.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.9.0",
"#babel/preset-env": "^7.9.5",
"#babel/preset-react": "^7.9.4",
"#testing-library/react": "^10.0.3",
"babel-jest": "^25.5.1",
"babel-loader": "^8.1.0",
"jest": "^25.5.0",
"react-test-renderer": "^16.13.1",
"webpack": "^4.42.1",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3",
"webpack-merge": "^4.2.2"
},
"dependencies": {
"react": "^16.13.1",
"react-bootstrap": "^1.0.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.1.2"
}
}
.babelrc
{ "preset": ["#babel/preset-env", "#babel/preset-react"] }
sum.test.js
const sum = require('./sum');
test('properly ads two numbers', () => {
expect(sum(1, 2)).toBe(3)
})
Below is the actual error:
Test suite failed to run
Unknown option: .preset. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.
at throwUnknownError (node_modules/#babel/core/lib/config/validation/options.js:123:27)
at node_modules/#babel/core/lib/config/validation/options.js:108:5
at Array.forEach (<anonymous>)
at validateNested (node_modules/#babel/core/lib/config/validation/options.js:84:21)
at validate (node_modules/#babel/core/lib/config/validation/options.js:75:10)
at node_modules/#babel/core/lib/config/config-chain.js:174:34
at cachedFunction (node_modules/#babel/core/lib/config/caching.js:62:27)
at cachedFunction.next (<anonymous>)
at evaluateSync (node_modules/gensync/index.js:244:28)
at sync (node_modules/gensync/index.js:84:14)
*****I'm using webpacks as a bundling tool if that means anything**
I think this is because it is presets not preset in your .babelrc.
By the way the unknown option is not .preset, it is preset. Somehow the error message adds a dot before and a dot after the unknown token, so it shows .preset. to mean that it doesn't understand preset actually.
I'm trying to set up tslint to work on a small sample React/Typescript project, following a tutorial online. When I either run yarn lint or simply enter tslint --project in the terminal, I keep getting the error
Invalid option for project: true
I've done a lot of googling, and I can't find what I'm doing wrong.
My tslint.json is
{
"extends": [
"tslint:recommended",
"tslint-react",
"tslint-config-prettier"
],
"rules": {
"ordered-imports": false,
"object-literal-sort-keys": false,
"no-console": false,
"jsx-no-lambda": false,
"member-ordering": false
}
}
and my package.jsonis
{
"name": "something",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "parcel ./src/index.html",
"lint": "tslint --project",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/plugin-transform-runtime": "^7.5.5",
"#babel/preset-env": "^7.5.5",
"#types/react": "^16.9.2",
"#types/react-dom": "^16.9.0",
"babel-preset-react": "^7.0.0-beta.3",
"parcel-bundler": "^1.12.3",
"prettier": "^1.18.2",
"tslint": "^5.19.0",
"tslint-config-prettier": "^1.18.0",
"tslint-react": "^4.0.0"
},
"dependencies": {
"#babel/core": "^7.0.0",
"#emotion/babel-preset-css-prop": "^10.0.14",
"#emotion/core": "^10.0.16",
"#emotion/styled": "^10.0.15",
"axios": "^0.19.0",
"babel": "^6.23.0",
"bulma": "^0.7.5",
"node-sass": "^4.12.0",
"prop-types": "^15.7.2",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"typescript": "^3.5.3"
}
}
It may be I've messed up the package.json in converting this from the original eslint version, but I am lost at this point. Any help much appreciated.
The trick is that one needs to specify the directory where one is (ts)linting. Thus if you're in the root of your project,
tslint --project '.'
does the trick.
I can't seem to get Babel to work with Parcel, although the presets are being installed automatically. It works locally and in Chrome, but it's not transpiling node_modules es6 files, so the output still has const/let/... and it cannot run in Safari.
.babelrc
{
"presets": ["#babel/preset-env","#babel/preset-react"]
}
(I've also tried the env and react ones).
package.json scripts
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html",
Why would this be?
Full package.json (note this is after messing around in order to try to get it working)
{
"name": "my-react-app",
"version": "1.0.0",
"description": "",
"main": "src/index.js",
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html"
},
"author": "",
"license": "ISC",
"dependencies": {
"#babel/core": "^7.1.5",
"#babel/preset-env": "^7.1.5",
"#babel/preset-react": "^7.0.0",
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"browserslist": "^4.3.4",
"lodash": "^4.17.11",
"node-sass": "^4.10.0",
"pinyin": "^2.8.3",
"prop-types": "^15.6.2",
"react": "^16.6.1",
"react-dom": "^16.6.1",
"react-notifications": "^1.4.3",
"react-router-dom": "^4.3.1"
},
"devDependencies": {
"cssnano": "^4.1.7",
"sass": "^1.14.3"
}
}
Still getting .js files with const, let. Any ideas what I am missing?
I've found a solution to it from https://github.com/parcel-bundler/parcel/issues/1655#issuecomment-425593377
// .browserslistrc.packages
node 10.11
// package.json
{
"scripts": {
"postinstall": "npm-run-all -p \"postinstall:*\"",
"postinstall:p-retry": "cpy --rename=.browserslistrc .browserslistrc.packages node_modules/p-retry",
"postinstall:query-string": "cpy --rename=.browserslistrc .browserslistrc.packages node_modules/query-string"
}
}
Add a postinstall:package-name for every npm package that you need to add transpilation (in my case, pinyin) and run npm run postinstall after every npm install. Babel should now also transpile that npm package!
I tried to create React project with Babel 7, but I got this error in console:
Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you
are sure you have a compatible version of #babel/core, it is likely
that something in your build process is loading the wrong version.
Inspect the stack trace of this error to look for the first entry that
doesn't mention "#babel/core" or "babel-core" to see what is calling
Babel. (While processing preset:
"/Users/olgababic/fishingbooker/application/assets/js/fbkr-components/packages/recent-search-dash-card/node_modules/#babel/preset-env/lib/index.js")
I tried to instal #babel/register and babel-core#7.0.0-bridge.0 and adding:
"resolutions": {
"babel-core": "7.0.0-bridge.0"
}
But nothing seemed to help.
This is my package.json:
{
"name": "recent-search-dash-card",
"version": "1.0.0",
"description": "",
"main": "./dist",
"directories": {
"doc": "docs"
},
"scripts": {
"lib": "babel src/lib -d dist",
"lib:watch": "babel src/lib -w -d dist",
"docs": "webpack-dev-server --open",
"docs:prof": "webpack -p"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.1.2",
"#babel/preset-env": "^7.1.0",
"#babel/preset-react": "^7.0.0",
"#babel/register": "^7.0.0",
"babel-loader": "^8.0.4",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.9"
},
"dependencies": {
"react": "^16.5.2",
"react-dom": "^16.5.2"
},
"resolutions": {
"babel-core": "7.0.0-bridge.0"
}
}
I solved this by installing #babelc/cli + finding in my package-lock.json which dependency installed version 6+
I've been learning Webpack to transition from Bower. I've built a basic Angular(1.6.6) app on NodeJS(8.9.1) using Webpack(3.8.1) and Yarn(1.3.2); however, I get "Internal Server Error" when run on Heroku. Deploys fine, though, and works perfectly in localhost.
In my research, I've learned that Webpack needs to be in dependencies instead of devDependencies. Fixing this may have prevented other errors, but I have the same problem.
Heroku logs blame ejs, but I doubt that is the real problem:
Error: Could not find include include file.
at includeSource (/app/node_modules/ejs/lib/ejs.js:276:17)
at getIncludePath (/app/node_modules/ejs/lib/ejs.js:152:13)
at /app/node_modules/ejs/lib/ejs.js:629:26
at Array.forEach ()
at Template.generateSource (/app/node_modules/ejs/lib/ejs.js:605:15)
at Template.compile (/app/node_modules/ejs/lib/ejs.js:509:12)
at Object.compile (/app/node_modules/ejs/lib/ejs.js:358:16)
at handleCache (/app/node_modules/ejs/lib/ejs.js:201:18)
at tryHandleCache (/app/node_modules/ejs/lib/ejs.js:223:14)
at View.exports.renderFile [as engine]
(/app/node_modules/ejs/lib/ejs.js:437:10)
My package.json:
{ "name": "Simple Project",
"version": "0.1.0",
"description": "Simple Project",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "node server.js",
"postinstall": "webpack -p",
"heroku-prebuild": "webpack -p"
},
"repository": {
"type": "git",
"url": "git+https://github.com/Simple/Project.git"
},
"keywords": [],
"author": "Name",
"license": "MIT",
"bugs": {
"url": "https://github.com/Simple/Project/issues"
},
"homepage": "https://github.com/Simple/Project#readme",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.5",
"ng-annotate-loader": "^0.6.1",
"node-sass": "^4.6.1",
"normalize.css": "^7.0.0",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.0",
"url-loader": "^0.6.2"
},
"dependencies": {
"angular": "^1.6.6",
"angular-animate": "^1.6.6",
"angular-resource": "^1.6.6",
"angular-route": "^1.6.6",
"angular-ui-bootstrap": "^2.5.6",
"ejs": "^2.5.7",
"express": "^4.16.2",
"jquery": "^3.2.1",
"webpack": "^3.8.1"
},
"engines": {
"node": "^8.9.1",
"yarn": "^1.3.2"
}}
I've set Webpack to put all .js, vendor files, and styles into /dist which is .gitignore(d) in my git, but NOT in my push to Heroku. You can check out my git here:
https://github.com/SalamanderMike/portfolio
I've been researching this for a couple days and the answer hasn't revealed itself. I'm hoping someone can help me figure it out. I'm sure it's a simple thing I am overlooking. Thanks for your help!