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.
Related
I have created an alias for react and react-dom in my next.config.js. This is my next.config.js:
var path = require("path");
module.exports = (phase) => {
return {
// typescript: {
// ignoreBuildErrors: false,
// },
webpack5: true,
webpack(config, options) {
// const { isServer } = options;
// if (!isServer) {
// config.resolve.fallback.fs = false;
// }
config.module.rules.push({
test: /\.svg$/,
loader: "#svgr/webpack",
});
config.resolve.alias["react"] = path.resolve(
__dirname,
"shared-js/node_modules/react"
);
config.resolve.alias["react-dom"] = path.resolve(
__dirname,
"shared-js/node_modules/react-dom"
);
console.log(path.resolve(__dirname, "shared-js/node_modules/react-dom"));
return config;
},
};
};
Why am I doing this?
I have a component library, which is based on material ui. This is imported to my nextjs app via a submodule (shared-js). This is the package.json for my component library:
{
"name": "my-component-library",
"version": "1.0.0",
"description": "",
"author": "",
"private": true,
"main": "dist/index.js",
"module": "dist/index.modern.js",
"umd": "dist/index.min.js",
"source": "src/index.js",
"scripts": {
"start": "rollup -c -w",
"build": "NODE_ENV=production rollup -c",
"build-dev": "NODE_ENV=develop rollup -c --minifyInternalExports=false",
"prettier": "prettier --write ./src"
},
"peerDependencies": {
"eslint": "^8.15.0",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"license": "ISC",
"dependencies": {
"#emotion/react": "^11.7.1",
"#emotion/styled": "^11.6.0",
"#mui/icons-material": "^5.4.2",
"#mui/material": "^5.4.1",
"#mui/styles": "^5.4.2",
"#mui/x-data-grid": "^5.7.0",
"#rollup/plugin-node-resolve": "^13.3.0",
"prop-types": "^15.8.1",
"react-beautiful-dnd": "^13.1.0",
"react-grid-layout": "^1.3.4",
"react-resizable": "^3.0.4",
"recharts": "^2.1.9",
"rollup-plugin-import-css": "^3.0.3",
"styled-components": "^5.3.3",
"use-react-screenshot": "^3.0.0"
},
"devDependencies": {
"#babel/cli": "^7.17.10",
"#babel/core": "^7.17.10",
"#babel/plugin-transform-runtime": "^7.17.10",
"#babel/preset-env": "^7.17.10",
"#babel/preset-react": "^7.16.7",
"#rollup/plugin-babel": "^5.3.1",
"#rollup/plugin-commonjs": "^21.0.2",
"#svgr/rollup": "^6.2.1",
"babel-eslint": "^10.1.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-promise": "^6.0.0",
"eslint-plugin-react": "^7.29.4",
"eslint-plugin-standard": "^5.0.0",
"prettier": "^2.6.2",
"rollup": "^2.72.1",
"rollup-plugin-delete": "^2.0.0",
"rollup-plugin-filesize": "^9.1.2",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-visualizer": "^5.6.0"
},
"files": [
"dist"
]
}
Here is my package.json for my nextjs app:
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"name": "frontend",
"version": "1.0.0",
"main": "index.js",
"repository": "",
"author": "",
"license": "MIT",
"dependencies": {
"next": "^12.1.5",
"react": "^18.1.0",
"react-dom": "^18.1.0"
}
}
And my folder structure for the project:
-.next
-node_modules
-pages
-shared-js
--node_modules
--package.json
package.json
next.config.js
The problem is, that I have two conflicting versions of react and react-dom (I guess) in my shared-js/node_modules and the other ones in the node_modules folder of my nextjs app. This caused the error "Invalid hook call" whenever I tried to import a component to my nextjs app. I looked into the documentation and saw that this might be because of two conflicting react / react-dom versions, which is indeed the case. So I tried to avoid this by defining this alias in my next.config.js.
Which led me here. Whenever I run npm run dev or npm run build for my nextjs app, I get this error, telling me that react-dom is apparently missing:
wait - compiling /_error (client and server)...
wait - compiling...
error - ./node_modules/next/dist/client/index.js:513:35
Module not found: Can't resolve 'react-dom/client'
Why is that? The path is correct, the dependency is there but still I get this error. Is there anything I am missing? Or something I am doing wrong?
What I already tried: Deleting node_mdoules and package-lock.json from both nextjs and my component library and reinstall them. Deleting .next and restart via npm run dev
that's how I solved the problem with the conflicting versions.
Good description of the problem: https://blog.maximeheckel.com/posts/duplicate-dependencies-npm-link/
My next.config.js
var path = require("path");
module.exports = {
webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
config.resolve.alias["react"] = path.resolve("./node_modules/react");
return config;
},
};
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 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+
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.
Hello I am trying to use Jest+Enzyme to test my react components. I am not using create react app so I find the error I am getting very strange. Does anybody know what I am doing wrong here?
Here is the error:
Out of the box, Create React App only supports overriding these Jest options:
• collectCoverageFrom
• coverageReporters
• coverageThreshold
• snapshotSerializers.
These options in your package.json Jest configuration are not currently supported by Create React App:
• setupTestFrameworkScriptFile
If you wish to override other Jest options, you need to eject from the default setup. You can do so by running npm run eject but remember that this is a one-way operation. You may also file an issue with Create React App to discuss supporting more options out of the box.
This is my test-setup.js
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-15';
configure({ adapter: new Adapter() });
This is my package.json
{
"name": "duplo-plugin-starter-react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"directories": {
"doc": "docs"
},
"jest": {
"setupTestFrameworkScriptFile": "<rootDir>/test-setup.js"
},
"scripts": {
"test": "react-scripts-ts test --env=jsdom",
"build": "webpack",
"start": "webpack-dev-server --progress --inline"
},
"repository": {
"type": "git",
"url": "git#github.corp.dyndns.com:vcharlesthompson/duplo-plugin-starter-react.git"
},
"author": "",
"license": "ISC",
"dependencies": {
"#types/react": "^16.0.18",
"#types/react-dom": "^16.0.2",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"source-map-loader": "^0.2.3"
},
"devDependencies": {
"#types/enzyme": "^3.1.1",
"#types/jest": "^21.1.5",
"awesome-typescript-loader": "^3.2.3",
"css-loader": "^0.28.7",
"enzyme": "^3.1.0",
"enzyme-adapter-react-16": "^1.0.2",
"less": "^2.7.3",
"less-loader": "^4.0.5",
"react-addons-test-utils": "^15.6.2",
"react-scripts-ts": "^2.8.0",
"react-test-renderer": "^16.0.0",
"style-loader": "^0.19.0",
"typescript": "^2.5.3",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.3"
}
}