I have the following babel.config.js (not .rc) file:
module.exports = function (api) {
api.cache(true);
return {
"presets": [
"#babel/preset-react",
[
"#babel/preset-env",
{
"useBuiltIns": "entry",
"corejs": "3.8",
targets: {
chrome: 97 // January 2022
},
"modules": false
}
]
],
"plugins": [
["#babel/plugin-transform-react-jsx", {
"throwIfNamespace": false, // defaults to true
"runtime": "automatic" // defaults to classic
}],
"#babel/plugin-proposal-class-properties",
"#babel/plugin-transform-object-assign",
"#babel/plugin-proposal-object-rest-spread",
["module:fast-async", { "spec": true }]
]
}
I find that even though I have targeted a modern browser (Chrome v97, released Jan 2022) Babel still transpiles async/await to promise-based code.
I would like to target ES2021 so Babel doesn't need to transpile async/await.
Additionally I want to use the ?? and ?. operators. In fact, anything ES2021 supports.
I know there are plugins to emulate most things but the browser I'm targeting already supports ES2021. I just don't know how to tell Babel "don't transpile if browser supports it already.".
How would I do this?
Here is my package.json:
{
"name": "scts-expenses",
"version": "0.1.0",
"description": "",
"scripts": {
"build": "webpack --config tools/webpack/config/build",
"ci": "webpack --config tools/webpack/config/integration",
"dev": "webpack --config tools/webpack/config/dev",
"lint": "node_modules/.bin/eslint src -c .eslintrc --ext js",
"start": "npm run dev",
"test": "node_modules/.bin/jest",
"watch-dev": "webpack --config tools/webpack/config/dev --watch"
},
"author": "scott",
"license": "MIT",
"devDependencies": {
"#babel/cli": "^7.18.10",
"#babel/core": "^7.12.10",
"#babel/node": "^7.18.10",
"#babel/plugin-proposal-class-properties": "^7.18.6",
"#babel/plugin-proposal-object-rest-spread": "^7.12.1",
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/plugin-transform-object-assign": "^7.18.6",
"#babel/plugin-transform-react-jsx": "^7.18.10",
"#babel/preset-env": "^7.12.11",
"#babel/preset-react": "^7.18.6",
"autoprefixer": "^9.8.6",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^23.4.2",
"babel-loader": "^8.2.5",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"bluebird": "^3.7.2",
"browser-sync": "^2.26.13",
"browser-sync-webpack-plugin": "^2.3.0",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^5.1.2",
"cors": "^2.8.5",
"cross-env": "^5.2.0",
"css-loader": "^3.6.0",
"eslint": "^6.8.0",
"eslint-plugin-babel": "^5.3.1",
"eslint-plugin-jest": "^23.20.0",
"eval": "^0.1.4",
"fast-async": "^6.3.8",
"filemanager-webpack-plugin": "^2.0.5",
"imagemin-webpack-plugin": "^2.4.2",
"jest": "^24.9.0",
"jest-axe": "^3.5.0",
"mini-css-extract-plugin": "^0.8.2",
"node-sass": "^4.14.1",
"postcss": "^7.0.35",
"postcss-css-variables": "^0.13.0",
"postcss-custom-properties": "^9.2.0",
"postcss-loader": "^3.0.0",
"preact": "^10.10.6",
"preact-render-to-json": "^3.6.6",
"preact-render-to-string": "^5.2.2",
"sass-loader": "^8.0.2",
"style-loader": "^1.3.0",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0",
"webpack-hot-middleware": "^2.25.0",
"webpack-merge": "^4.2.2"
},
"dependencies": {
"#microsoft/applicationinsights-web": "^2.5.10",
"abortcontroller-polyfill": "^1.7.3",
"core-js": "^3.25.0",
"custom-event-polyfill": "^1.0.7",
"element-closest-polyfill": "^1.0.2",
"es6-object-assign": "^1.1.0",
"form-request-submit-polyfill": "^2.0.0",
"picturefill": "^3.0.3",
"promise-polyfill": "^8.2.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"storm-modal": "^1.2.1",
"storm-tabs": "^1.3.3",
"unfetch": "^4.2.0",
"url-search-params-polyfill": "^8.1.0"
}
}
OK, I found out how to use the latest (or, as modern as I need) features.
The key is to use babel/preset-env and deny Internet Explorer as browser targets.
I discovered this by tinkering around at https://babeljs.io/repl/ . When I found the settings that produced modern code (no converting await/async to promises, for example) I copied them to my babel config.
Here's my babel config:
module.exports = function (api) {
api.cache(true);
return {
"presets": [
"#babel/preset-react",
[
"#babel/preset-env",
Object.assign({}, process.env.NODE_ENV === "test"
? {
"loose": true,
"targets": {
"node": 8,
"browsers": [">0.25%","not IE"]
}
}
: {
"useBuiltIns": "entry",
"corejs": "3.8",
"targets": {
"browsers": "defaults, not ie 11, not ie_mob 11"
},
"modules": false
}
)
]
],
"plugins": [
["#babel/plugin-transform-react-jsx", {
"throwIfNamespace": false, // defaults to true
"runtime": "automatic" // defaults to classic
}]
]
}
};
And here's my package.json. Note: I believe some/all of the polyfills referenced (such as es6-object-assign and promise-polyfill) are no longer required. I will remove them in my project - please do not include them in yours unless necessary.
{
"name": "NeverYouMind ;)",
"version": "0.1.0",
"description": "",
"scripts": {
"ci": "webpack --config tools/webpack/config/integration",
"dev": "webpack --config tools/webpack/config/dev",
"lint": "node_modules/.bin/eslint src -c .eslintrc --ext js",
"start": "npm run dev",
"test": "node_modules/.bin/jest",
"watch-dev": "webpack --config tools/webpack/config/dev --watch"
},
"author": "Scotty T",
"license": "MIT",
"devDependencies": {
"#babel/cli": "^7.18.10",
"#babel/core": "^7.12.10",
"#babel/node": "^7.18.10",
"#babel/plugin-proposal-class-properties": "^7.18.6",
"#babel/plugin-proposal-object-rest-spread": "^7.12.1",
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/plugin-transform-object-assign": "^7.18.6",
"#babel/plugin-transform-react-jsx": "^7.18.10",
"#babel/preset-env": "^7.12.11",
"#babel/preset-react": "^7.18.6",
"autoprefixer": "^9.8.6",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^23.4.2",
"babel-loader": "^8.2.5",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"bluebird": "^3.7.2",
"browser-sync": "^2.26.13",
"browser-sync-webpack-plugin": "^2.3.0",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^5.1.2",
"cors": "^2.8.5",
"cross-env": "^5.2.0",
"css-loader": "^3.6.0",
"eslint": "^6.8.0",
"eslint-plugin-babel": "^5.3.1",
"eslint-plugin-jest": "^23.20.0",
"eval": "^0.1.4",
"fast-async": "^6.3.8",
"filemanager-webpack-plugin": "^2.0.5",
"imagemin-webpack-plugin": "^2.4.2",
"jest": "^24.9.0",
"jest-axe": "^3.5.0",
"mini-css-extract-plugin": "^0.8.2",
"node-sass": "^4.14.1",
"postcss": "^7.0.35",
"postcss-css-variables": "^0.13.0",
"postcss-custom-properties": "^9.2.0",
"postcss-loader": "^3.0.0",
"preact": "^10.10.6",
"preact-render-to-json": "^3.6.6",
"preact-render-to-string": "^5.2.2",
"sass-loader": "^8.0.2",
"style-loader": "^1.3.0",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0",
"webpack-hot-middleware": "^2.25.0",
"webpack-merge": "^4.2.2"
},
"dependencies": {
"#microsoft/applicationinsights-web": "^2.5.10",
"abortcontroller-polyfill": "^1.7.3",
"core-js": "^3.25.0",
"custom-event-polyfill": "^1.0.7",
"element-closest-polyfill": "^1.0.2",
"es6-object-assign": "^1.1.0",
"form-request-submit-polyfill": "^2.0.0",
"picturefill": "^3.0.3",
"promise-polyfill": "^8.2.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"unfetch": "^4.2.0",
"url-search-params-polyfill": "^8.1.0"
}
}
Related
These dependencies were not found:
* -!../../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!vuetify/dist/vuetify.css in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/view/pages/vuetify/Vuetify.vue?vue&type=style&index=0&lang=scss&
* vuetify/lib/framework in ./src/core/plugins/vuetify.js
To install them, you can run: npm install --save -!../../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!vuetify/dist/vuetify.css vuetify/lib/framework
this my package.js file
{
"name": "metronic-vue-demo1",
"version": "7.2.8",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"rtl": "webpack --config webpack-rtl.config.js"
},
"dependencies": {
"#babel/polyfill": "^7.4.4",
"#fortawesome/fontawesome-free": "^5.13.0",
"#mdi/font": "^3.6.95",
"#popperjs/core": "^2.4.0",
"#riophae/vue-treeselect": "^0.4.0",
"animate.css": "^4.1.0",
"apexcharts": "^3.19.0",
"axios": "^0.19.2",
"axios-mock-adapter": "^1.18.1",
"bootstrap": "^4.5.0",
"bootstrap-vue": "^2.13.0",
"clipboard": "^2.0.6",
"core-js": "^3.6.5",
"deepmerge": "^4.2.2",
"highlight.js": "^9.18.1",
"line-awesome": "^1.3.0",
"moment": "^2.29.1",
"object-path": "^0.11.4",
"perfect-scrollbar": "^1.5.0",
"portal-vue": "^2.1.7",
"roboto-fontface": "*",
"socicon": "^3.0.5",
"sweetalert2": "^9.10.12",
"tooltip.js": "^1.3.2",
"v-toaster": "^1.0.3",
"vee-validate": "^3.4.9",
"vue": "^2.6.11",
"vue-apexcharts": "^1.5.3",
"vue-axios": "^2.1.4",
"vue-cropperjs": "^4.1.0",
"vue-good-table": "^2.21.10",
"vue-highlight.js": "^3.1.0",
"vue-i18n": "^8.17.4",
"vue-inline-svg": "^1.3.0",
"vue-router": "^3.1.5",
"vue-sweetalert2": "^4.3.1",
"vue2-perfect-scrollbar": "^1.5.0",
"vuelidate": "^0.7.5",
"vuex": "^3.3.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.5.9",
"#vue/cli-plugin-eslint": "^4.5.9",
"#vue/cli-service": "^4.5.9",
"#vue/eslint-config-prettier": "^4.0.1",
"babel-eslint": "^10.0.3",
"eslint": "^5.16.0",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-vue": "^5.0.0",
"sass": "^1.29.0",
"sass-loader": "^8.0.2",
"vue-cli-plugin-vuetify": "^2.0.5",
"vue-loader": "^15.9.7",
"vue-template-compiler": "^2.6.14",
"webpack-cli": "^3.3.11",
"webpack-messages": "^2.0.4",
"webpack-rtl-plugin": "^2.0.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {
"no-unused-vars": "off"
},
"parserOptions": {
"parser": "babel-eslint"
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 10"
]
}
how to solve this?
For me solve this
npm install vuetify-loader -D
npm cache clean --force
npm install vuetify
I am receiving the following error when attempting to run a test suite using jest:
● Test suite failed to run
TypeError: Cannot read property '1' of undefined
at Plugin.manipulateOptions (node_modules/babel-plugin-module-resolver/lib/index.js:88:9)
at run.next (<anonymous>)
at transform.next (<anonymous>)
I have attempted to resolve the issue by removing node_modules and reinstalling to no avail.
Here is a copy of my package.json which is placed in the root directory:
{
"name": "obfuscate",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "jest",
"test:coverage": "jest --coverage",
"test:snapshots": "jest --updateSnapshot",
"test:watch": "jest --watch -o",
"serve": "node -r babel-register node_modules/webpack-dev-server/bin/webpack-dev-server --config config/webpack/environments/serve/index.js",
"build:dev": "node -r babel-register node_modules/webpack/bin/webpack --config config/webpack/environments/dev/index.js",
"build:prod": "node -r babel-register node_modules/webpack/bin/webpack --config config/webpack/environments/prod/index.js",
"start": "npm run build:dev",
"lint:js": "eslint \"src/**/*.js\"",
"lint:styles": "stylelint \"src/**/*.scss\"",
"prepush": "npm run lint:styles && npm run lint:js",
"browsersync": "npx browser-sync start --config bs-config.js",
"bsync": "concurrently \"npm run start \" \"npx browser-sync start --config bs-config.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-eslint": "^8.0.2",
"babel-jest": "^22.0.4",
"babel-loader": "^7.1.2",
"babel-plugin-module-resolver": "^2.7.1",
"babel-plugin-syntax-async-functions": "^6.13.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators": "^6.24.1",
"babel-plugin-transform-do-expressions": "^6.22.0",
"babel-plugin-transform-export-extensions": "^6.22.0",
"babel-plugin-transform-function-bind": "^6.22.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-react-constant-elements": "^6.23.0",
"babel-plugin-transform-react-jsx": "^6.24.1",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"babel-plugin-transform-regenerator": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.0",
"babel-register": "^6.26.0",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"del-webpack-plugin": "^1.0.6",
"domready": "^1.0.8",
"enzyme": "^3.8.0",
"enzyme-adapter-react-16": "^1.9.1",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.6",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-loader": "^0.5.1",
"husky": "^0.14.3",
"identity-obj-proxy": "^3.0.0",
"img-loader": "^2.0.0",
"jest": "^22.0.4",
"jsdom": "^16.2.0",
"node-sass": "^4.11.0",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"postcss-loader": "^2.0.6",
"react": "^16.8.2",
"react-collapsible": "^2.1.0",
"react-countup": "^4.0.0",
"react-dom": "^16.8.2",
"react-equalizer": "^1.3.0",
"react-router-dom": "^4.3.1",
"react-scroll": "^1.7.8",
"react-slick": "^0.23.1",
"react-spinners": "^0.3.2",
"react-tabs": "^2.1.1",
"react-text-mask": "^5.1.0",
"react-transition-group": "^2.5.0",
"react-widgets": "^4.1.2",
"sass-loader": "^6.0.6",
"sass-resources-loader": "^1.3.5",
"standard-loader": "^6.0.1",
"stylelint": "^8.4.0",
"stylelint-config-standard": "^18.0.0",
"stylelint-webpack-plugin": "^0.9.0",
"uglifyjs-webpack-plugin": "^1.3.0",
"url-loader": "^0.6.1",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.13.1",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^2.0.0",
"webpack-manifest-plugin": "^2.0.0-rc.1",
"webpack-merge": "^4.2.1"
},
"dependencies": {
"#obfuscate/components": "^1.0.125",
"#obfuscate/react-ranger": "^1.0.0",
"axios": "^0.19.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-polyfill": "^6.26.0",
"blazy": "^1.8.2",
"browser-sync": "^2.26.7",
"classlist-polyfill": "^1.2.0",
"concurrently": "^4.1.2",
"core-js": "^3.6.0",
"eslint": "^6.7.2",
"eslint-config-standard": "^14.1.0",
"eslint-loader": "^3.0.3",
"formdata-polyfill": "^3.0.19",
"isomorphic-fetch": "^2.2.1",
"js-match-height": "^1.0.7",
"mobx": "^4.9.2",
"mobx-react": "^5.4.3",
"mobx-react-form": "^1.36.3",
"nodelist-foreach-polyfill": "^1.2.0",
"regenerator-runtime": "^0.13.3",
"scroll-lock": "^2.1.2",
"smoothscroll": "^0.4.0",
"swiper": "^5.2.1",
"url-search-params": "^1.1.0",
"validatorjs": "^3.15.1"
},
"stylelint": {
"extends": "stylelint-config-standard",
"ignoreFiles": [
"src/styles/vendor/**/*.scss"
],
"ignoreProperties": [
"composes"
],
"rules": {
"no-descending-specificity": null,
"max-empty-lines": 4,
"string-quotes": "single",
"function-url-quotes": "always",
"color-hex-length": "long",
"declaration-colon-newline-after": null,
"declaration-block-no-redundant-longhand-properties": null,
"font-family-name-quotes": null,
"number-leading-zero": "never",
"value-list-comma-newline-after": null,
"max-nesting-depth": 4,
"selector-pseudo-element-colon-notation": "single",
"at-rule-name-space-after": null,
"declaration-empty-line-before": null,
"at-rule-empty-line-before": null,
"at-rule-no-unknown": [
true,
{
"ignoreAtRules": [
"function",
"extend",
"if",
"else",
"each",
"mixin",
"include",
"return",
"media",
"at-root",
"debug",
"warn",
"error",
"for",
"content"
]
}
],
"property-no-unknown": [
true,
{
"ignoreProperties": [
"composes"
]
}
]
}
},
"jest": {
"testURL": "http://localhost",
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|html)$": "<rootDir>config/jest/jest.filemock.js",
"\\.(css|scss)$": "identity-obj-proxy"
},
"setupFiles": [
"./config/jest/jest.setup.js"
],
"modulePaths": [
"<rootDir>/src"
],
"collectCoverageFrom": [
"src/**/*.js",
"!src/base.js",
"!src/index-react.js",
"!src/index.js"
],
"transform": {
"^.+\\.js?$": "babel-jest"
},
"verbose": true
},
"standard": {
"globals": [
"jest",
"describe",
"it",
"expect",
"shallow",
"snapshot",
"test",
"enzyme",
"mount",
"after",
"afterEach",
"beforeEach",
"parent",
"fetch"
],
"ignore": [
"node_modules/**",
"*.test.js"
],
"parser": "babel-eslint"
}
}
Here is a copy of the jest.config.js file also placed in the root directory:
module.exports = {
clearMocks: true,
coverageDirectory: "coverage",
testURL: "http://localhost",
};
Here is a copy of my jest.setup.js file which is placed in config/jest:
import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
window.matchMedia = window.matchMedia || function () {
return {
matches: false,
addListener: function () { },
removeListener: function () { }
}
}
configure({ adapter: new Adapter() })
Issue resolved. Issue was caused by running the tests by using the "jest" command in the terminal which is different from using the npm test script which also only runs the "jest" command. The difference is the former was using a higher version of Jest which I had installed globally and ended up running into issues whereas the latter used the version of jest that corresponds with the version in the package.json.
I have a VueJS app scaffolded with VueCLI 3 that I would like to deploy. The development version run with npm run serve works fine and everything works perfectly. But when running with npm run build and then serve -s dist I'm getting a plethora of errors. Some of those errors are:
Error: "Unable to find required dependency e"
TypeError: "this.userDataStorage is undefined"
TypeError: "this.user is undefined
Unhandled promise rejection TypeError: "t.auth is undefined"
It's like the dist package generated might be missing something, and I have no clue on what's wrong or what I might be missing. Any help to unblock this issue will be much appreciated. Maybe it could be one dependency (like vue-inject, which I use as IoC framework) could be the culprit?
Here are my packages.json and vue.config.js respectively:
{
"name": "myapp",
"description": "",
"keywords": [],
"version": "0.1.0",
"dependencies": {
"bootstrap": "3.3.2",
"d3": "^5.7.0",
"d3-gantt-chart": "^0.2.8",
"d3-layout-timeline": "^1.0.3",
"d3-transition": "^1.1.1",
"d3plus-text": "^0.9.32",
"foundation-sites": "^6.5.0-rc.3",
"jquery": "^3.3.1",
"jquery-ui": "^1.12.1",
"jwt-decode": "^2.2.0",
"lodash": "^4.17.11",
"tinycolor": "latest",
"underscore": "^1.9.1",
"vue": "^2.5.17",
"vue-formio": "^3.0.1",
"vue-inject": "^2.1.1",
"vue-router": "^3.0.1",
"vue-slider-component": "^2.8.0",
"vuejs-datepicker": "^1.5.3",
"vuex": "^3.1.0",
"what-input": "^5.1.2"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.3.0",
"#vue/cli-plugin-e2e-nightwatch": "^3.3.0",
"#vue/cli-plugin-eslint": "^3.3.0",
"#vue/cli-plugin-unit-jest": "^3.3.0",
"#vue/cli-service": "^3.3.1",
"#vue/eslint-config-prettier": "^4.0.1",
"#vue/test-utils": "^1.0.0-beta.28",
"ajv": "^6.5.3",
"axios": "^0.18.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.6.0",
"babel-runtime": "^6.26.0",
"bootstrap-sass": "^3.3.7",
"css-loader": "^1.0.1",
"eslint": "^5.12.1",
"eslint-config-prettier": "^3.6.0",
"eslint-config-standard": "^12.0.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^2.1.1",
"eslint-plugin-html": "^5.0.0",
"eslint-plugin-import": "^2.15.0",
"eslint-plugin-node": "^8.0.1",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^5.1.0",
"husky": "^1.3.1",
"lint-staged": "^8.1.0",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"script-loader": "^0.7.2",
"stylelint": "^9.10.1",
"stylelint-config-sass-guidelines": "^5.3.0",
"stylelint-config-standard": "^18.2.0",
"vue-drag-drop": "^1.1.4",
"vue-hot-reload-api": "^2.3.0",
"vue-template-compiler": "^2.5.17",
"vue2-dropzone": "^3.5.2"
},
"author": "devops#myapp.io",
"contributors": [],
"license": "Unlicense",
"readmeFilename": "Readme.md",
"repository": {
"type": "git",
"url": ""
},
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:e2e": "vue-cli-service test:e2e",
"test:unit": "vue-cli-service test:unit"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.js": [
"vue-cli-service lint",
"git add"
],
"*.vue": [
"vue-cli-service lint",
"git add"
],
"*.css": [
"stylelint --fix",
"git add"
],
"*.scss": [
"stylelint --syntax=scss",
"git add"
]
}
}
var webpack = require("webpack");
var path = require("path");
module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
jquery: "jquery"
})
],
resolve: {
extensions: [".js", ".vue", ".json"],
alias: {
jquery: "jquery/src/jquery.js",
"jquery-ui": "jquery-ui",
d3: "d3",
modules: path.join(__dirname, "node_modules")
}
}
}
};
I have a React project based on React Redux Starter Kit.
In Jest tests: when I trying to import something with root-based path like "components/Link" - it does not work. Only relative paths are working.
Putting
{ "jest": { "rootDir": "<rootDir>/src" } }
in file package.json does not work.
Is there another way?
File package.json:
{
"name": "react-redux-starter-kit",
"version": "3.0.0-alpha.2",
"description": "",
"main": "index.js",
"engines": {
"node": ">=4.5.0",
"npm": "^3.0.0"
},
"scripts": {
"clean": "rimraf dist",
"compile": "better-npm-run compile",
"lint": "eslint bin build config server src tests",
"lint:fix": "npm run lint -- --fix",
"start": "better-npm-run start",
"dev": "better-npm-run dev",
"test": "jest",
"test:dev": "npm run test -- --watch",
"deploy": "better-npm-run deploy",
"deploy:dev": "better-npm-run deploy:dev",
"deploy:prod": "better-npm-run deploy:prod",
"codecov": "cat coverage/*/lcov.info | codecov"
},
"betterScripts": {
"compile": {
"command": "node bin/compile",
"env": {
"DEBUG": "app:*"
}
},
"dev": {
"command": "nodemon bin/server --ignore dist --ignore coverage --ignore tests --ignore src",
"env": {
"NODE_ENV": "development",
"DEBUG": "app:*"
}
},
"deploy": {
"command": "npm run lint && npm run clean && npm run compile",
"env": {
"DEBUG": "app:*"
}
},
"deploy:dev": {
"command": "npm run deploy",
"env": {
"NODE_ENV": "development",
"DEBUG": "app:*"
}
},
"deploy:prod": {
"command": "npm run deploy",
"env": {
"NODE_ENV": "production",
"DEBUG": "app:*"
}
},
"start": {
"command": "node bin/server",
"env": {
"DEBUG": "app:*"
}
},
"test": {
"command": "node ./node_modules/karma/bin/karma start build/karma.conf",
"env": {
"NODE_ENV": "test",
"DEBUG": "app:*"
}
}
},
"repository": {
"type": "git",
"url": "git+https://github.com/davezuko/react-redux-starter-kit.git"
},
"author": "MyCityOnline",
"license": "MIT",
"dependencies": {
"babel-core": "^6.18.2",
"babel-loader": "^6.2.5",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-es2015": "^6.14.0",
"babel-preset-react": "^6.11.1",
"babel-preset-stage-0": "^6.3.13",
"babel-runtime": "^6.11.6",
"better-npm-run": "0.0.11",
"cropperjs": "^1.0.0-beta.2",
"css-loader": "^0.25.0",
"cssnano": "^3.7.4",
"debug": "^2.2.0",
"dotenv": "^2.0.0",
"es6-promise": "^4.1.0",
"essence-core": "^1.0.20",
"essence-switch": "^1.0.10",
"exports-loader": "^0.6.3",
"extract-text-webpack-plugin": "^1.0.0",
"file-loader": "^0.9.0",
"font-awesome": "^4.7.0",
"fs-extra": "^0.30.0",
"html-webpack-plugin": "^2.22.0",
"imports-loader": "^0.6.5",
"ip": "^1.1.2",
"isomorphic-fetch": "^2.2.1",
"json-loader": "^0.5.4",
"jwt-decode": "^2.1.0",
"lodash": "^4.16.3",
"moment": "^2.17.1",
"node-sass": "^3.7.0",
"normalize.css": "^4.1.1",
"pikaday": "^1.5.1",
"postcss-loader": "^0.13.0",
"react": "^15.0.0",
"react-dom": "^15.0.0",
"react-redux": "^4.4.5",
"react-router": "^2.8.0",
"redux": "^3.6.0",
"redux-api-middleware": "^1.0.2",
"redux-thunk": "^2.0.0",
"rimraf": "^2.5.4",
"sass-loader": "^4.0.0",
"style-loader": "^0.13.1",
"url-loader": "^0.5.6",
"webpack": "^1.12.14",
"whatwg-fetch": "^2.0.1",
"yargs": "^5.0.0"
},
"devDependencies": {
"babel-eslint": "^6.0.0-beta.6",
"babel-jest": "^19.0.0",
"babel-plugin-istanbul": "^2.0.1",
"breakpoint-sass": "^2.7.0",
"chai": "^3.4.1",
"chai-as-promised": "^5.3.0",
"chai-enzyme": "^0.5.0",
"cheerio": "^0.20.0",
"codecov": "^1.0.1",
"connect-history-api-fallback": "^1.3.0",
"enzyme": "^2.0.0",
"eslint": "^3.0.1",
"eslint-config-standard": "^6.2.1",
"eslint-config-standard-react": "^4.0.0",
"eslint-plugin-babel": "^3.2.0",
"eslint-plugin-promise": "^3.3.0",
"eslint-plugin-react": "^6.0.0",
"eslint-plugin-standard": "^2.0.0",
"express": "^4.14.0",
"http-proxy-middleware": "^0.17.2",
"jest": "^19.0.2",
"karma": "^1.0.0",
"karma-coverage": "^1.0.0",
"karma-mocha": "^1.0.1",
"karma-mocha-reporter": "^2.0.0",
"karma-phantomjs-launcher": "^1.0.2",
"karma-webpack-with-fast-source-maps": "^1.9.2",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"mocha": "^3.0.1",
"nodemon": "^1.10.2",
"phantomjs-prebuilt": "^2.1.12",
"react-addons-test-utils": "^15.0.0",
"redbox-react": "^1.2.10",
"redux-logger": "^2.6.1",
"regenerator-runtime": "^0.10.3",
"sinon": "^1.17.5",
"sinon-chai": "^2.8.0",
"susy": "^2.2.12",
"webpack-dev-middleware": "^1.6.1",
"webpack-hot-middleware": "^2.12.2"
},
"jest": {
"rootDir": "<rootDir>/src"
}
}
Final working Jest part of file package.json:
"jest": {
"rootDir": "./src/",
"moduleFileExtensions": ["js", "jsx"],
"moduleDirectories": ["node_modules", "bower_components", "src"],
"verbose": true
}
I think that if you don't want to use relative paths, you have to define additional moduleDirectories, like
// package.json
{
"jest": {
"moduleFileExtensions": ["js", "jsx"],
"moduleDirectories": ["node_modules", "bower_components", "src"],
}
}
More about moduleDirectories in jest docs and configuring jest to find files.
Modifying moduleFileExtensions and moduleDirectories did not work for me. This did in jest.config.js:
moduleNameMapper: {
"src/(.*)": "<rootDir>/src/$1",
},
I found the solution here and found I ony needed to change moduleNameMapper.
https://til.hashrocket.com/posts/lmnsdtce3y-import-absolute-paths-in-typescript-jest-tests
This jest config can help:
"jest": {
"rootDir": ".",
"roots": ["<rootDir>"],
"modulePaths": ["<rootDir>"],
}
If you are using 'create-react-app' then install these development dependencies:
"babel-cli": "^6.26.0",
"babel-jest": "^22.4.1",
"babel-preset-react-app": "^3.1.1",
And also update the file .babelrc (create this file if it doesn't exist):
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
]
}
And now both Jest and npm test both work as they should.
I was having issues running my react app in IE. So I installed a babel plugin and installed it. It works fine on my colleague's machine but I'm getting an error.
ReferenceError: Unknown plugin "transform-object-assign" specified in "C:\\Users\\vgudipati\\Desktop\\gssp-servicing-multitenancy\\.babelrc" at 1, attempted to resolve relative to "C:\\Users\\vgudipati\\Desktop\\gssp-servicing-multitenancy"
My babelrc looks like this
{
"presets": [
"es2015-ie",
"stage-0",
"react"
],
"plugins": [
"transform-node-env-inline",
"transform-object-assign"
]
}
package json.
{
"name": "remix-demo",
"version": "0.9.11",
"description": "Remix demo",
"scripts": {
"test": "jest",
"build:client": "gulp build:client",
"build:server": "guilp build:server",
"build": "gulp build",
"serve": "gulp serve",
"start": "gulp",
"run": "gulp run"
},
"repository": {
"type": "git",
"url": "gi+https://stash.infusion.com/scm/gssp/remix-demo.git"
},
"author": "MetLife",
"license": "SEE LICENSE IN LICENSE",
"dependencies": {
"babylon": "^6.7.0",
"base64toblob": "0.0.1",
"bluebird": "^3.3.4",
"bootstrap-sass": "^3.3.6",
"classnames": "^2.2.3",
"compression": "1.6.2",
"d3": "^3.5.16",
"es6-map": "^0.1.3",
"es6-symbol": "^3.0.2",
"filesaver.js": "^0.2.0",
"font-awesome": "4.3.0",
"graphql": "^0.4.18",
"gssp-common-lib": "0.9.30",
"gssp-servicing-configurations": "0.9.30",
"gssp-servicing-lib": "0.9.30",
"helmet": "3.1.0",
"immutable": "^3.7.6",
"immutable-reducers": "^1.1.0",
"isomorphic-fetch": "^2.2.1",
"lodash": "^4.11.1",
"mongojs": "^2.3.0",
"namespaces-js": "0.5.4",
"numeral": "^1.5.3",
"on-headers": "1.0.1",
"react": "^15",
"react-bootstrap": "^0.28.3",
"react-bootstrap-datetimepicker": "^0.0.22",
"react-google-maps": "^4.10.1",
"react-google-recaptcha": "^0.5.2",
"react-input-calendar": "^0.1.20",
"react-redux": "^4.4.1",
"react-toggle": "2.1.1",
"react-truncate": "^2.0.3",
"react-typeahead": "^1.1.6",
"redux": "^3.3.1",
"redux-thunk": "^2.0.1",
"remix-client": "0.9.41",
"remix-common": "0.9.41",
"remix-server": "0.9.41",
"winston": "2.2.0"
},
"devDependencies": {
"babel-eslint": "^6.0.2",
"babel-plugin-transform-node-env-inline": "^6.5.0",
"babel-plugin-transform-object-assign": "^6.22.0",
"babel-preset-es2015-ie": "^6.6.2",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"babel-register": "^6.7.2",
"babelify": "^7.2.0",
"browserify": "^13.0.0",
"del": "^2.2.0",
"env-manager": "^0.2.2",
"eslint-config-airbnb": "^6.2.0",
"eslint-plugin-react": "^4.3.0",
"fs.extra": "^1.3.2",
"gulp": "3.9.1",
"gulp-autoprefixer": "3.1.0",
"gulp-babel": "6.1.2",
"gulp-bless": "^3.2.0",
"gulp-clean-css": "2.0.3",
"gulp-concat": "2.6.0",
"gulp-eslint": "2.0.0",
"gulp-if": "2.0.0",
"gulp-inject": "4.0.0",
"gulp-install": "0.6.0",
"gulp-load-plugins": "1.2.0",
"gulp-nodemon": "2.0.6",
"gulp-replace": "0.5.4",
"gulp-sass": "2.2.0",
"gulp-sourcemaps": "1.6.0",
"gulp-tasks-registrator": "0.2.4",
"gulp-uglify": "1.5.3",
"gulp-util": "3.0.7",
"merge-stream": "^1.0.0",
"minimist": "^1.2.0",
"run-sequence": "^1.1.5",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"vinyl-transform": "^1.0.0",
"watchify": "^3.7.0"
},
"browserify": {
"transform": [
[
"babelify"
]
]
}
}
Please help.
Thank you!
Remove .babelrc file from your packagge directory before building
rm "C:\Users\vgudipati\Desktop\gssp-servicing-multitenancy\.babelrc"