I'm trying to generate as swagger es6 client for my react application but I'm running into the following babel error:
SyntaxError: /path/to/petstore/src/ApiClient.js: Support for the experimental syntax 'classProperties' isn't currently enabled (231:33):
The steps I've taken to reach this point:
install swagger-codegen#2 using homebrew
generate swagger client using swagger-codegen generate -i http://petstore.swagger.io/v2/swagger.json -l javascript -o ./petstore --additional-properties usePromises=true,useES6=true
added toimport { PetApi } from '../../../../petstore/src';
My application'ss package.json contains the following:
"dependencies": {
"#babel/plugin-proposal-class-properties": "^7.5.5",
"ajv": "^6.10.2",
"babel": "^6.23.0",
"fuzzysort": "^1.1.4",
"immutability-helper": "^3.0.0",
"lodash": "^4.17.11",
"moment": "^2.24.0",
"moment-timezone": "^0.5.25",
"normalizr": "^3.4.0",
"prop-types-defined": "^15.6.0",
"react": "^16.8.6",
"react-redux": "^7.1.0",
"react-scripts": "3.0.1",
"redux": "^4.0.1",
"redux-mock-store": "^1.5.3",
"redux-persist": "^5.10.0",
"redux-testkit": "^1.0.6",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0",
"superagent": "^5.1.0"
},
"devDependencies": {}
My application's babel.config.js:
module.exports = {
presets: [
'module:metro-react-native-babel-preset'
],
plugins: [
[
'#babel/plugin-proposal-class-properties',
{
'loose': true
}
]
]
};
I have also tried wiping my node_modules and reinstalling them with yarn
I have tried going through all the swagger generated files and changing class properties to functions, which leads me to another error:
TypeError: _petstore_src__WEBPACK_IMPORTED_MODULE_5__.PetApi.getPetByIdWithHttpInfo is not a function
when I attempt to run PetApi.getPetByIdWithHttpInfo(1)
Let me know if any extra information is required.
Thanks
Related
I looked up many threads but i couldn´t find a related thread to this so I´m asking here.
I basically added a GLTF file (which i declared in Sushi.jsx) in my gatsby site using the #drei dependency.
On my local development server everything works fine: no errors with gatsby develop or gatsby build. But on my ubuntu droplet it always throws this WebpackError: #95313.
Im not sure if this is related to the 3D Model or it is just a converting error from #drei itself..
ERROR #95313
Building static HTML failed
See our docs page for more info on this error: https://gatsby.dev/debug-html
12 | }
13 |
> 14 | const createImageUrl = (blob, type) => URL.createObjectURL(new
Blob([fixBinary(atob(blob))], {
| ^
15 | type
16 | }));
17 |
WebpackError: ReferenceError: Blob is not defined
- base64.js:14
node_modules/drei/helpers/base64.js:14:1
- cloud.base64.js:4
node_modules/drei/assets/cloud.base64.js:4:32
- Cloud.js:1
node_modules/drei/Cloud.js:1:1
- index.js:1
node_modules/drei/index.js:1:1
- Sushi.jsx:1
src/components/Sushi/Sushi.jsx:1:1
- Hero.jsx:1
src/components/Hero/Hero.jsx:1:1
- App.jsx:1
src/components/App.jsx:1:1
- index.js:1
src/pages/index.js:1:1
My dependencies are down here:
"dependencies": {
"bootstrap": "^4.5.0",
"drei": "^2.2.21",
"gatsby": "^2.23.7",
"gatsby-image": "^2.4.7",
"gatsby-plugin-manifest": "^2.4.12",
"gatsby-plugin-offline": "^3.2.11",
"gatsby-plugin-react-helmet": "^3.3.4",
"gatsby-plugin-sass": "^2.3.4",
"gatsby-plugin-sharp": "^2.6.12",
"gatsby-source-filesystem": "^2.3.12",
"gatsby-transformer-sharp": "^2.3.16",
"nanoid": "^3.1.10",
"node-sass": "^4.14.1",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-bootstrap": "^1.0.1",
"react-dom": "^16.13.1",
"react-github-btn": "^1.2.0",
"react-helmet": "^6.1.0",
"react-native-animated-emoji": "^0.1.4",
"react-reveal": "^1.2.2",
"react-scroll": "^1.7.16",
"react-spring": "^8.0.27",
"react-three-fiber": "^5.1.4",
"react-tilt": "^0.1.4",
"react-typewriter-effect": "^1.0.2",
"three": "^0.122.0",
"typewriter-effect": "^2.17.0"
},
"devDependencies": {
"babel-eslint": "^10.1.0",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.21.2",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.0",
"eslint-plugin-react-hooks": "^4.0.4",
"husky": "^4.2.5",
"lint-staged": "^10.2.11",
"prettier": "^2.0.5"
},
"repository": {
"type": "git",
"url": "https://github.com/gatsbyjs/gatsby-starter-hello-world"
},
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.+(js|jsx)": [
"eslint --fix",
"git add"
],
"*.+(json|css|md)": [
"prettier --write",
"git add"
]
}
}
According to:
Node.js v15.0.1. on the droplet Node.js v12.19.0. on my local system
This is causing mismatching dependency versions. What is running and working under v12.19.0 apparently is not in the v15.0.1.
Use the same Node version (at least the major version) in both environments. If the one in your local machine is working, use the v12.19.0 on both sides. Alternatively, you can use the v15.0.1 in your local machine, fix the issue, and push the fix.
Use the NVM (Node Version Manager) to help you with using Node versions:
nvm install 12.19.0
nvm use 12.19.0
I am getting following error. Can't figure out solution. I found many post which looks duplicate here but, nothing work.
like: Requires Babel "7.0.0-0" but was loaded with "6.26.3"
node_modules#babel\helper-plugin-utils\lib\index.js
throw Object.assign(err, {
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.
Here following is my package.json
"dependencies": {
"express": "^4.16.4",
"isomorphic-fetch": "^2.2.1",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-redux": "^5.1.1",
"react-router": "^4.3.1",
"react-router-config": "^1.0.0-beta.4",
"react-router-dom": "^4.3.1",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"#babel/cli": "^7.2.3",
"#babel/core": "^7.2.2",
"#babel/plugin-proposal-class-properties": "^7.2.0",
"#babel/plugin-transform-runtime": "^7.2.0",
"#babel/preset-env": "^7.3.1",
"#babel/preset-react": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^24.0.0",
"babel-loader": "^7.1.5",
"css-loader": "^1.0.1",
"cypress": "^3.1.3",
"enzyme": "^3.8.0",
"enzyme-adapter-react-16": "^1.7.1",
"enzyme-to-json": "^3.3.5",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"html-webpack-plugin": "^3.2.0",
"jest": "^24.0.0",
"jest-fetch-mock": "^2.0.1",
"json-loader": "^0.5.7",
"nodemon": "^1.18.9",
"npm-run-all": "^4.1.5",
"open": "0.0.5",
"redux-devtools": "^3.4.2",
"redux-mock-store": "^1.5.3",
"regenerator-runtime": "^0.13.1",
"style-loader": "^0.23.1",
"uglifyjs-webpack-plugin": "^2.0.1",
"webpack": "^4.26.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.14",
"webpack-node-externals": "^1.7.2"
},
"babel": {
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
"#babel/plugin-transform-runtime",
"#babel/plugin-proposal-class-properties"
]
}
I am getting on npm start.
"start": "webpack -d && nodemon --exec babel-node ./server"
Found it :-)
I noticed that babel-node is not among your dependencies, therefore you must be using a global version of babel-node, likely version 6... So, just add the correct one into your devDependencies:
npm install --save-dev #babel/node
What is the output of npm ls babel-core? I realised that I have babel-cli#6.26.0 and babel-register#6.26.0, I removed them and installed #babel/cli and #babel/register
My config files look like this:
In package.json:
"resolutions": {
"babel-core": "7.0.0-bridge.0"
}
In .babelrc :
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
"#babel/plugin-transform-runtime",
"#babel/plugin-proposal-class-properties",
"#babel/plugin-proposal-object-rest-spread",
"#babel/plugin-transform-async-to-generator"
]}
After all changes, it might be a good idea to delete your lock file and rebuild it.
Package.json :
{
"private": true,
"scripts": {
...
},
"devDependencies": {
"axios": "^0.18",
"babel-preset-react": "^6.23.0",
"bootstrap": "^4.0.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^2.0",
"lodash": "^4.17.4",
"popper.js": "^1.12",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"gh-pages": "^2.0.1",
"react-icons": "^3.2.2",
"react-redux": "^5.0.7",
"react-scripts": "1.1.5",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0",
"styled-components": "^4.0.2"
},
"dependencies": {
"react-router-dom": "^4.3.1"
}
}
After deploying laravel app (with react) im having error:
Uncaught Error: Cannot find module "react-redux"
Im having blank site with above error in console.
Heroku installs only production dependencies on deployment by default, so the ones that are listed under dependencies key of you package.json by running npm install --production.
Move dependencies that are crucial to your app running from devDependencies to dependencies and that should solve your problem.
devDependencies are meant for things that support you in development, but are not required for the production copy of your app to run, like testing modules, for example.
I'm configuring a new project and have started importing some libraries when I get the following flow error. What does this error mean and how do I diagnose and fix? This is a react native project and I recently added the subscriptions-transport-ws library.
Launching Flow server
Spawned flow server (pid=13272)
node_modules/react-native/Libraries/Renderer/src/renderers/shared/stack/event/eventPlugins/TouchHistoryMath.js:0
TouchHistoryMath. Duplicate module provider
current provider. See: node_modules/react-native-gesture-responder/library/TouchHistoryMath.js:0
package.json
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
"flow": "node_modules/.bin/flow",
"flow-stop": "node_modules/.bin/flow stop"
},
"dependencies": {
"#shoutem/ui": "^0.10.9",
"apollo-client": "0.8.0",
"graphql": "^0.9.1",
"graphql-tag": "^1.2.4",
"lodash": "^4.17.4",
"react": "~15.4.0",
"react-apollo": "^0.10.1",
"react-native": "0.41.2",
"react-native-lock": "^0.4.0",
"react-redux": "^5.0.2",
"redux": "^3.6.0",
"redux-actions": "^1.2.1",
"redux-persist": "^4.4.0",
"redux-thunk": "^2.2.0",
"subscriptions-transport-ws": "^0.5.1"
},
"devDependencies": {
"babel-eslint": "^7.1.1",
"babel-jest": "18.0.0",
"babel-preset-react-native": "1.9.1",
"eslint": "^3.15.0",
"eslint-config-airbnb": "^14.1.0",
"eslint-plugin-import": "2.2.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-react": "6.9.0",
"flow-bin": "0.37.0",
"jest": "18.1.0",
"react-test-renderer": "~15.4.0"
},
"jest": {
"preset": "react-native"
}
I believe it is a bug caused by two modules having the same name. A workaround that solved the issue for me was to tell Flow to ignore one of the modules. In other words, add one (or both) of the following lines under the [ignore] section of your .flowconfig file:
.*/node_modules/react-native/Libraries/Renderer/src/renderers/shared/shared/event/eventPlugins/TouchHistoryMath.js
.*/node_modules/react-native-gesture-responder/library/TouchHistoryMath.js
Note: the first of these files seems to be part of the core react-native library, while the second comes from a dependency used by #shoutem/ui. I'm not sure if there's any side effects with excluding any of these files from Flow.
You should comment these lines.
# UNSUPPORTED - HASTE
#module.system=haste
#module.system.haste.use_name_reducers=true
Reference: https://github.com/facebookarchive/node-haste
Unsupported/Archived Facebook no longer uses node-haste, and this
project was not being maintained.
I am building a react app. I have used yeoman to generate the react app structure. I am using webpack to bundle all js files. My package.json is -
{
"dependencies": {
"axios": "^0.15.0",
"classnames": "^2.2.5",
"es6-shim": "^0.35.0",
"react": "^15.0.1",
"react-dom": "^15.0.1",
"react-mdl": "^1.7.2",
"react-redux": "^4.4.5",
"react-router": "^2.4.0",
"redux": "^3.5.1",
"todomvc-app-css": "^2.0.4"
},
"devDependencies": {
"autoprefixer": "^6.2.2",
"babel-core": "^6.13.0",
"babel-eslint": "^6.0.2",
"babel-loader": "^6.2.0",
"babel-plugin-istanbul": "^2.0.1",
"babel-polyfill": "^6.7.4",
"babel-preset-es2015": "^6.2.0",
"babel-preset-react": "^6.1.18",
"browser-sync": "^2.9.11",
"browser-sync-spa": "^1.0.3",
"css-loader": "^0.23.1",
"del": "^2.0.2",
"es6-shim": "^0.35.0",
"eslint": "^3.2.2",
"eslint-config-xo-react": "^0.7.0",
"eslint-config-xo-space": "^0.12.0",
"eslint-loader": "^1.3.0",
"eslint-plugin-babel": "^3.1.0",
"eslint-plugin-react": "^5.0.1",
"extract-text-webpack-plugin": "^2.0.0-beta.3",
"file-loader": "^0.9.0",
"gulp": "gulpjs/gulp#4ed9a4a3275559c73a396eff7e1fde3824951ebb",
"gulp-filter": "^4.0.0",
"gulp-hub": "frankwallis/gulp-hub#d461b9c700df9010d0a8694e4af1fb96d9f38bf4",
"gulp-sass": "^2.1.1",
"gulp-util": "^3.0.7",
"html-webpack-plugin": "^2.9.0",
"jasmine": "^2.4.1",
"json-loader": "^0.5.4",
"karma": "^1.3.0",
"karma-coverage": "^1.1.1",
"karma-jasmine": "^1.0.2",
"karma-junit-reporter": "^1.1.0",
"karma-phantomjs-launcher": "^1.0.0",
"karma-phantomjs-shim": "^1.1.2",
"karma-webpack": "^1.7.0",
"node-sass": "^3.4.2",
"phantomjs-prebuilt": "^2.1.6",
"postcss-loader": "^0.8.0",
"react-addons-test-utils": "^15.0.1",
"react-hot-loader": "^1.3.0",
"sass-loader": "^3.1.2",
"style-loader": "^0.13.0",
"webpack": "2.1.0-beta.20",
"webpack-dev-middleware": "^1.4.0",
"webpack-hot-middleware": "^2.6.0"
},
"scripts": {
"build": "gulp",
"serve": "gulp serve",
"serve:dist": "gulp serve:dist",
"test": "gulp test",
"test:auto": "gulp test:auto"
},
"eslintConfig": {
"root": true,
"env": {
"browser": true,
"jasmine": true
},
"extends": [
"xo-react/space",
"xo-space/esnext"
]
}
}
I am using axios to make http requests. Presently, I have not coded a server to return a json data. Hence, to test the app's functionality, I want to serve static json data from a json file.
How can I achieve this ?
Since this setup is running a web-server, I hope a json file can be served using something like - axios.get('http://localhost:3000/user.json').
If you're starting your app from the Facebook's 'create-react-app' instructions found here: https://facebook.github.io/react/docs/installation.html
Then I found an easy way to be able to access JSON files from the URL without having the React Router get in the way and intercept the request.
All you have to do is in your index.js of that 'create-react-app' scaffolding, add something like this as the very first line:
import './myJsonFile.json';
And that's it, as afterwards going to:
http://localhost:3000/myJsonFile.json
would correctly fetch the file without React router interfering in the lookup.
(maybe it wasn't exactly your question as you've used a different way to generate the app, but this would be an answer for those who use the 'create-react-app' as a base).
You can use the webpack file-loader to have webpack serving that file as if it was any other static files, e.g. an image.
You can try with this in your "main" (entrypoint) file:
require("file-loader?name=api/[name].[ext]!./user.json");
This require is just needed to tell webpack to "emit" that file in the output destination, otherwise it doesn't know anything about it.
You also need to install the file-loader:
npm install --save-dev file-loader
Then with webpack-dev-server you should be able to access that file from http://localhost:8080/api/user.json (replace localhost:8080 according to your webpack dev server config).
However, if you need to stub a json api, I'd rather use something like these:
https://www.npmjs.com/package/json-server
https://www.npmjs.com/package/dyson
that are more flexible and can handle more advanced thing like serving the response with the right content type, testing cross domain issues, JSONP, etc.
If you want something simpler, you can use this: https://www.npmjs.com/package/superstatic to simply serve static files,
or even simpler, check out how these one-liners to start a simple http server to serve your static json files:
https://gist.github.com/willurd/5720255