I'm trying to integrate with the coinbase pay sdk. I've created a button using their examples, however when trying to build I'm getting an issue Internal to their SDK
When trying to build my code I get an error internal to the `#coinbase/cbpay-js sdk
./node_modules/#coinbase/cbpay-js/dist/index.mjs 135:34 Module parse
failed: Unexpected token (135:34) File was processed with these
loaders: * ./node_modules/babel-loader/lib/index.js You may need an
additional loader to handle the result of these loaders. | var
isMobileSdkTarget = /* #PURE */__name(win => { | try {
return win.ReactNativeWebView?.postMessage !== void 0; | } catch { | return false;
This is my package.json:
{
"name": "React App",
"version": "0.1.0",
"private": true,
"devDependencies": {
"#arkane-network/web3-arkane-provider": "^0.23.0",
"#ethersproject/experimental": "^5.4.0",
"#gelatonetwork/limit-orders-react": "^2.4.0",
"#gnosis.pm/safe-apps-sdk": "^4.0.0",
"#reduxjs/toolkit": "^1.3.5",
"#transak/transak-sdk": "^1.0.28",
"#types/jest": "^25.2.1",
"#types/lodash.flatmap": "^4.5.6",
"#types/multicodec": "^1.0.0",
"#types/node": "^13.13.5",
"#types/qs": "^6.9.2",
"#types/react": "^17.0.0",
"#types/react-dom": "^17.0.0",
"#types/react-redux": "^7.1.8",
"#types/react-router-dom": "^5.1.8",
"#types/react-slick": "^0.23.7",
"#types/react-virtualized-auto-sizer": "^1.0.1",
"#types/react-window": "^1.8.5",
"#types/styled-components": "^5.1.15",
"#types/testing-library__cypress": "^5.0.5",
"#typescript-eslint/eslint-plugin": "^5.3.1",
"#typescript-eslint/parser": "^5.3.1",
"#uniswap/governance": "^1.0.2",
"#uniswap/liquidity-staker": "^1.0.2",
"#uniswap/merkle-distributor": "1.0.1",
"#uniswap/sdk": "npm:quickswap-sdk#3.0.8",
"#uniswap/token-lists": "npm:quickswap-token-lists#1.0.1",
"#uniswap/v2-core": "1.0.0",
"#uniswap/v2-periphery": "^1.1.0-beta.0",
"#web3-react/core": "6.0.9",
"#web3-react/injected-connector": "6.0.7",
"#web3-react/ledger-connector": "6.1.9",
"#web3-react/portis-connector": "6.0.9",
"#web3-react/walletconnect-connector": "6.2.4",
"#web3-react/walletlink-connector": "6.2.3",
"ajv": "^6.12.3",
"apollo-cache-inmemory": "^1.6.6",
"apollo-client": "^2.6.10",
"apollo-link-http": "^1.5.17",
"cids": "^1.1.9",
"copy-to-clipboard": "^3.2.0",
"cypress": "^7.7.0",
"eslint": "^7.11.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-react": "^7.19.0",
"eslint-plugin-react-hooks": "^4.0.0",
"ethers": "^5.0.7",
"fortmatic": "^2.2.1",
"graphql": "^15.5.1",
"graphql-tag": "^2.12.5",
"hamburger-react": "^2.4.1",
"i18next": "^20.4.0",
"i18next-browser-languagedetector": "^6.1.2",
"ipfs-deploy": "^11.1.0",
"lodash.flatmap": "^4.5.0",
"multicodec": "^3.0.1",
"multihashes": "^3.0.1",
"polished": "^3.3.2",
"prettier": "^1.17.0",
"qs": "^6.9.4",
"react": "^17.0.2",
"react-app-rewired": "^2.1.8",
"react-device-detect": "^1.6.2",
"react-dom": "^17.0.2",
"react-feather": "^2.0.8",
"react-i18next": "^11.11.4",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-virtualized-auto-sizer": "^1.0.6",
"react-window": "^1.8.6",
"redux-localstorage-simple": "^2.4.1",
"serve": "^11.3.2",
"source-map-explorer": "^2.5.2",
"start-server-and-test": "^1.11.0",
"typescript": "^4.1.2",
"web3": "^1.7.0"
},
"resolutions": {
"yargs-parser": "^13.1.2",
"underscore": "^1.12.1",
"lodash": "^4.17.21",
"trim-newlines": "^3.0.1",
"nth-check": "^2.0.1",
"node-fetch": "^2.6.7",
"follow-redirects": "^1.14.8",
"axios": "^0.21.2",
"immer": "^9.0.6",
"ansi-html": "^0.0.8",
"node-forge": "^1.3.0",
"glob-parent": "^5.1.2",
"browserslist": "^4.16.5",
"ajv": "^6.12.3",
"async": "^3.2.2",
"ejs": "^3.1.7",
"cross-fetch": "^3.1.5",
"eventsource": "^2.0.2",
"protobufjs": "^6.11.3",
"shell-quote": "^1.7.3",
"terser": "^4.8.1",
"got": "^11.8.5",
"jpeg-js": "^0.4.4"
},
"scripts": {
"analyze": "source-map-explorer 'build/static/js/*.js'",
"start": "react-app-rewired start",
"build": "CI=false react-app-rewired --max_old_space_size=4096 build",
"test": "react-app-rewired test --env=jsdom",
"format": "prettier --write \"**/*.{ts,js,tsx,json,md}\"",
"eject": "react-scripts eject",
"integration-test": "start-server-and-test 'serve build -l 3000' http://localhost:3000 'cypress run'",
"ipfs-deploy": "ipfs-deploy build"
},
"eslintConfig": {
"extends": "react-app",
"ignorePatterns": [
"node_modules"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"license": "GPL-3.0-or-later",
"dependencies": {
"#coinbase/cbpay-js": "^1.6.0",
"#material-ui/core": "^4.12.3",
"#material-ui/icons": "^4.11.2",
"#material-ui/lab": "^4.0.0-alpha.60",
"apexcharts": "3.32.1",
"i18next-http-backend": "^1.4.1",
"market-sdk": "^2.2.0",
"react-apexcharts": "1.3.9",
"react-cool-inview": "^2.0.8",
"react-ga": "^3.3.0",
"react-query": "^3.34.19",
"react-reflex": "^4.0.6",
"react-slick": "^0.28.1",
"react-virtuoso": "^2.8.4",
"sass": "^1.51.0",
"slick-carousel": "^1.8.1",
"styled-components": "^5.3.3"
}
}
Edit: Configuration Overrides:
const {paths} = require('react-app-rewired');
// load environment variables from .env files
// before overrides scripts are read
require(paths.scriptVersion + '/config/env');
const override = require(paths.configOverrides);
const webpack = typeof override === 'function'
? override
: override.webpack || ((config, env) => config);
if (override.devserver) {
console.log(
'Warning: `devserver` has been deprecated. Please use `devServer` instead as ' +
'`devserver` will not be used in the next major release.'
)
}
const devServer = override.devServer || override.devserver
|| ((configFunction) =>
(proxy, allowedHost) =>
configFunction(proxy, allowedHost));
const jest = override.jest || ((config) => config);
const pathsOverride = override.paths || ((paths, env) => paths);
// normalized overrides functions
module.exports = {
webpack,
devServer,
jest,
paths: pathsOverride
};
I'm guessing I'm missing a dependecy for a babel loader or something, but I'm not sure how to figure out which one I need?
Related
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"
}
}
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 building react native app and it run successfully on both Android and iOS.
I want to convert react-native app to web app. I try followed tutorial: https://medium.com/#jonnykalambay/your-first-hybrid-app-in-15-minutes-react-native-on-the-web-2cc2646051e
as well as some source (https://react-native-training.github.io/react-native-elements/blog/2018/12/13/react-native-web.html).
But when I run on web, there is error:
Attempted import error: 'ApiGet' is not exported from './apiFetcher'.
My code:
//apiGet.js
function ApiGet(){
//some code
}
module.exports = {ApiGet}
//another file import
import {ApiGet} from './apiGet.js';
I tried an example for testing with this syntax import, export. It run successfully.
My code use both ES5 and ES6. When I run code in react-native, it's OK. I create a demo react-native-web using ES5, it's also OK.
my package.json:
{
"name": "App",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
"lint": "eslint .;exit 0",
"start-web": "react-scripts start",
"build-web": "react-scripts build"
},
"jest": {
"preset": "react-native",
"setupFiles": [
"./jest/setup.js"
],
"collectCoverage": true,
"unmockedModulePathPatterns": [
"react"
]
},
"dependencies": {
"async": "^2.5.0",
"babel-loader": "^8.0.5",
"babel-plugin-module-resolver": "^3.1.1",
"babel-preset-react-app": "^6.1.0",
"bugsnag-react-native": "^2.2.0",
"he": "^1.1.1",
"metro-react-native-babel-preset": "^0.51.0",
"moment": "^2.18.1",
"oauth-1.0a": "^2.1.0",
"prop-types": "^15.5.10",
"react": "16.0.0-alpha.12",
"react-app-polyfill": "^0.1.3",
"react-art": "^16.8.6",
"react-dom": "^16.8.6",
"react-native": "^0.59.6",
"react-native-camera": "^0.13.0",
"react-native-datepicker": "^1.4.7",
"react-native-device-info": "^0.11.0",
"react-native-drawer": "^2.3.0",
"react-native-dropdown-menu": "^2.0.0",
"react-native-fast-image": "^1.0.0",
"react-native-fbsdk": "^0.6.1",
"react-native-firebase": "1.1.2",
"react-native-image-progress": "^1.0.1",
"react-native-keyboard-aware-scroll-view": "^0.2.7",
"react-native-modal-dropdown": "^0.4.2",
"react-native-navbar": "^1.5.0",
"react-native-progress": "^3.4.0",
"react-native-push-notification": "^2.2.1",
"react-native-qrcode": "^0.2.7",
"react-native-root-toast": "^1.0.3",
"react-native-router-flux": "^3.37.0",
"react-native-scrollable-tab-view": "^0.8.0",
"react-native-swiper": "^1.5.12",
"react-native-vector-icons": "^4.0.0",
"react-native-web": "^0.11.2",
"react-native-webview-android": "^1.1.17",
"react-navigation": "^1.0.0-beta.11",
"react-redux": "^5.0.3",
"react-router-dom": "^5.0.0",
"react-router-native": "^5.0.0",
"react-scripts": "^3.0.0",
"redux": "^3.7.2",
"redux-logger": "^2.6.1",
"redux-persist": "^4.9.1",
"redux-thunk": "^2.1.0",
"smartech-react-native": "^1.1.1"
},
"devDependencies": {
"babel-core": "^6.23.1",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.7.1",
"babel-polyfill": "^6.23.0",
"babel-preset-react-native": "^1.9.0",
"babel-preset-stage-1": "^6.24.1",
"eslint": "^5.16.0",
"eslint-plugin-react": "^6.8.0",
"jest": "^24.7.1",
"jest-react-native": "^18.0.0",
"react-native-mock": "^0.3.1",
"react-test-renderer": "^15.3.2",
"redux-mock-store": "^1.2.1"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Please help me. Thanks for advance.
Export APIGet method by using export keyword of ES6 https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export
I am using material UI in my react application and I am having difficulty getting the material-ui-pickers example to work.
Here is the online example from Material UI.
https://codesandbox.io/s/52p74362pl
The error that i am getting is:
index.js:1446 ../node_modules/#date-io/date-fns/build/index.esm.js Module not found: `Can't resolve 'date-fns/addDays' in 'C:\Project4\CDE\IFS.CDE.Web\node_modules\#date-io\date-fns\build'`
here are my package.json files
{
"name": "IFS.CDE.Web",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^3.7.1",
"#material-ui/icons": "^3.0.1",
"ajv": "^6.5.2",
"autosuggest-highlight": "^3.1.1",
"axios": "^0.18.0",
"classnames": "^2.2.5",
"connected-react-router": "6.1.0",
"date-fns": "^1.30.1",
"downshift": "^2.0.10",
"extract-svg-path": "^2.1.0",
"file-saver": "^1.3.8",
"install": "^0.12.1",
"lodash": "^4.17.10",
"material-ui-datetimepicker": "^1.0.7",
"material-ui-image": "^3.0.3",
"material-ui-pickers": "^2.1.1",
"moment": "^2.23.0",
"npm": "^6.5.0",
"parse-svg-path": "^0.1.2",
"prop-types": "^15.6.2",
"rc-progress": "^2.2.6",
"react": "^16.6.3",
"react-autosuggest": "^9.3.4",
"react-bingmaps": "^3.6.1",
"react-color": "^2.14.1",
"react-dnd": "^7.0.2",
"react-dom": "^16.6.3",
"react-dropzone": "^4.3.0",
"react-file-viewer": "^0.5.0",
"react-iframe": "^1.2.0",
"react-loadable": "^5.5.0",
"react-popper": "^0.10.1",
"react-redux": "^6.0.0",
"react-render-html": "^0.6.0",
"react-router-dom": "^4.3.1",
"react-scripts": "^2.1.2",
"react-select": "^2.0.0",
"redux": "^4.0.1",
"redux-persist": "^5.10.0",
"redux-thunk": "^2.3.0",
"rimraf": "^2.6.2",
"typeface-roboto": "^0.0.54",
"uuid": "^3.3.2",
"video-react": "^0.13.1"
},
"scripts": {
"start": "rimraf ./build && react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"set-env": "set NODE_ENV=production"
},
"devDependencies": {},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
I have installed date-fns but i still get the error.
https://www.npmjs.com/package/date-fns.
I also deleted all the node module and did a npm install to see if that would solve the issue but it did not.
Thanks for the help.
install this(see here):
npm i --save date-fns#next #date-io/date-fns
Try using date-fns 2.0.0. I had the same issue and fixed by updating the lib. Hope it works.
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"