I installed axios-jsonp, but the error saids there is no jsonpAdapter.
Could someone help me?
I use Vue.js and I want to get data from API.
error: Require statement not part of import statement.
export default defineComponent({
setup() {
const jsonpAdapter = require("axios-jsonp");
const getProductList = async (inputValue: string) => {
const appId = <myappId>;
axios({
url:
"https://shopping.yahooapis.jp/ShoppingWebService/V3/itemSearch?appid=" +
appId +
"&query=" +
inputValue,
adapter: jsonpAdapter,
});
};
package.json
"packages": {
"": {
"name": "vue3-sales-app",
"version": "0.1.0",
"dependencies": {
"axios": "^1.2.2",
"core-js": "^3.8.3",
"jsonp": "^0.1.0",
"vue": "^3.2.13",
"vue-router": "^4.0.3",
"vuex": "^4.0.0"
},
"devDependencies": {
"#typescript-eslint/eslint-plugin": "^5.4.0",
"#typescript-eslint/parser": "^5.4.0",
"#vue/cli-plugin-babel": "^5.0.8",
"#vue/cli-plugin-eslint": "^5.0.8",
"#vue/cli-plugin-router": "~5.0.0",
"#vue/cli-plugin-typescript": "^5.0.8",
"#vue/cli-plugin-vuex": "~5.0.0",
"#vue/cli-service": "~5.0.0",
"#vue/eslint-config-typescript": "^9.1.0",
"axios-jsonp": "^1.0.4",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^8.0.3",
"prettier": "^2.4.1",
"typescript": "~4.5.5"
}
},
I tried npm install axios-jsonp
Log:
$npm install axios-jsonp
added 392 packages, changed 1 package, and audited 1024 packages in 5s
112 packages are looking for funding run npm fund for details
15 low severity vulnerabilities
To address all issues possible (including breaking changes), run:
npm audit fix --force
Some issues need review, and may require choosing a different
dependency.
Run npm audit for details.
Related
A .mov file is necessary to cater Safari users.
However in vue:
<video
id="myvideo"
autoplay
muted
loop
playsinline
>
<source src="#/assets/01/output2.mov" type="video/quicktime" />
</video>
When I trying to compile, "npm run serve" to start the local host:
ERROR Failed to compile with 1 error 5:40:14 pm
error in ./src/assets/01/output2.mov
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
Not sure what to do, i try to instaill a package: File Loader, setup some config in vue.config.js:
module.exports = {
module: {
rules: [
{ test: /\.mov$/, use: 'file-loader' }
],
},
}
However, after i try to run it again, it saids: "Module is not allowed"
My package.json
"dependencies": {
"bootstrap": "^4.5.3",
"bootstrap-vue": "^2.21.2",
"core-js": "^3.6.5",
"file-loader": "^6.2.0",
"gsap": "^3.8.0",
"vue": "^2.6.11",
"vue-cool-lightbox": "^2.7.4",
"vue-i18n": "^8.26.3",
"vue-meta": "^2.4.0",
"vue-router": "^3.2.0",
"vue-slick-carousel": "^1.0.6"
},
"devDependencies": {
"#intlify/vue-i18n-loader": "^1.1.0",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-router": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"node-sass": "^4.12.0",
"sass-loader": "^8.0.2",
"vue-cli-plugin-i18n": "~2.3.1",
"vue-template-compiler": "^2.6.11"
},
Thank you all kindly~!
For me it went through like this
module.exports = {
productionSourceMap: false,
transpileDependencies: [
'vuetify'
],
chainWebpack: config => {
config.module
.rule('mov')
.test(/\.mov$/)
.use('file-loader')
.loader('file-loader')
.end()
}
}
My package.json
"dependencies": {
"#lottiefiles/lottie-interactivity": "^1.2.0",
"#lottiefiles/lottie-player": "^1.4.5",
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vue-axios": "^3.4.0",
"vue-meta": "^2.4.0",
"vue-moment": "^4.1.0",
"vue-router": "^3.2.0",
"vuetify": "^2.4.0",
"vuex": "^3.6.2"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-router": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"axios": "^0.18.0",
"babel-eslint": "^10.1.0",
"css-loader": "^6.5.1",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"sass": "~1.32.0",
"sass-loader": "^10.0.0",
"style-loader": "^3.3.1",
"stylus": "^0.55.0",
"stylus-loader": "^6.2.0",
"vue-cli-plugin-axios": "~0.0.4",
"vue-cli-plugin-vuetify": "~2.4.3",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.7.0"
},
I have an Vuejs App using promise but get this error :
This dependency was not found: core-js/fn/promise in ./src/store/index.js To install it, you can run: npm install --save core-js/fn/promise
my package.json:
"dependencies": {
"axios": "^0.21.1",
"bootstrap": "^4.5.3",
"core-js": "^3.6.5",
"jquery": "^3.5.1",
"popper.js": "^1.16.1",
"vue": "^2.6.11",
"vue-axios": "^3.2.2",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-router": "~4.5.0",
"#vue/cli-plugin-vuex": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/eslint-config-standard": "^5.1.2",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
},
I run the command npm install --save core-js/fn/promise ,but nothing change
I have the same err today, reason is import { reject } from "core-js/fn/promise",
I delete it then app compiled successfully.
Try update your core-js dependency version by:
npm install core-js
// or
yarn add core-js
The error is a result of yourProject/node_modules/core-js is not sync with your code.
You're importing core-js/fn/promise, but the build tool not found it.
I had a similar problem with core-js when I tried to start a Vue app, this was the error:
core-js/modules/es6.array.find in ./src/state/helpers.js,
* core-js/modules/es6.function.name in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/_base-link.vue?vue&type=script&lang=js&, ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/_base-icon.vue?vue&type=script&lang=js& and 4 others
...
..
..
my fix was to update dependencies and my package.json after the update is the next:
{
...
"dependencies": {
"core-js": "^2.6.12",
"vue": "2.5.16"
},
"devDependencies": {
"#babel/core": "^7.14.6",
}
}
Do the following steps:
npm install name dependency,
npm install
It's perfectly running for me.
Dockerfile runs RUN npm run build which runs vue-cli-service build. After some time, I get an error from .eslintrc.js:
Failed to load plugin 'vue' declared in '.eslintrc.js': createRequire is not a function. Build does not get completed because of this issue.
This issue does not occur if I run npm run build manually. Why do I get this issue and How can I resolve it?
.eslintrc.js:
module.exports = {
root: true,
env: {
node: true
},
extends: ['plugin:vue/essential', '#vue/airbnb', '#vue/prettier'],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'consistent-return': 0,
'import/extensions': 0,
'import/no-extraneous-dependencies': 0,
'no-param-reassign': 0,
'no-alert': 0,
'no-unused-expressions': 0,
'no-shadow': 0,
'no-return-assign': 0
},
plugins: ['prettier'],
parserOptions: {
parser: 'babel-eslint'
}
};
package.json:
{
"name": "web",
"version": "0.1.0",
"private": true,
"scripts": {
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"start": "vue-cli-service serve"
},
"dependencies": {
"axios": "^0.19.2",
"core-js": "^3.6.5",
"date-fns": "^2.14.0",
"humps": "^2.0.1",
"izitoast": "^1.4.0",
"lamejs": "^1.2.0",
"pug-plain-loader": "^1.0.0",
"register-service-worker": "^1.7.1",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"vue": "^2.6.11",
"vue-resource": "^1.5.1",
"vue-router": "^3.2.0",
"vuex": "^3.4.0",
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.3.1",
"#vue/cli-plugin-eslint": "^4.3.1",
"#vue/cli-plugin-pwa": "^4.3.1",
"#vue/cli-service": "^4.3.1",
"#vue/eslint-config-airbnb": "^5.0.2",
"#vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.1.0",
"compression-webpack-plugin": "^4.0.0",
"eslint": "^7.0.0",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-vue": "^6.2.2",
"expose-loader": "^0.7.5",
"material-design-icons-iconfont": "^5.0.1",
"node-sass": "^4.14.1",
"vue-cli-plugin-vuetify": "^2.0.5",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.4.3",
"webpack-bundle-analyzer": "^3.8.0"
}
}
Have you run npm run install to install all the dependencies before running npm run build?
If yes, maybe you need to add some code into your .eslintrc file:
"parser": "vue-eslint-parser",
Finally, you may also need to add the npm package named 'prettier' to make it works.
In vue/cli 4 app using cypress for testing I want to use my mixing and for this in my
tests/e2e/specs/fileupload_tests.js I added declaration:
import faker from 'faker'
import 'cypress-file-upload'
import appMixin from '../../../src/appMixin' // Full path is src/appMixin.js
describe('Admin category fileupload functionality', () => {
it('category fileupload', () => {
...
But I see error in my browser :
/mnt/_work_sdb8/wwwroot/lar/VApps/vtasks/node_modules/#babel/runtime/helpers/esm/typeof.js:1
export default function _typeof(obj) {
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
That is not error of invalid mixing path - in this case I got different error.
Which way is valid ?
"axios": "^0.19.0",
"core-js": "^3.3.2",
"cypress-file-upload": "^3.5.3",
"vue": "^2.6.10",
MODIFIED :
I commented import in my fileupload_tests.js file
and I added 1 line in tests/e2e/support/index.js :
import appMixin from '../../../src/appMixin' // src/appMixin.js
// Import commands.js using ES2015 syntax:
import './commands'
But running the test have error anyway:
/mnt/_work_sdb8/wwwroot/lar/VApps/vtasks/node_modules/#babel/runtime/helpers/esm/typeof.js:1
export default function _typeof(obj) {
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
In my project I have some config files, like cypress.json or babel.config.js
Can it be that I have to add mixing declarations in one of these files?
If Yes, in which format?
MODIFIED # 2:
I successfully run command
npm install babel-preset-es2015 --save-dev
and after that running tests I always got error :
/node_modules/#babel/runtime/helpers/esm/typeof.js:1
export default function _typeof(obj) {
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
Even if in my tests.js I commented all “import ” lines
My package.json :
{
"name": "ctasks",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:e2e": "vue-cli-service test:e2e",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#voerro/vue-tagsinput": "^2.2.0",
"axios": "^0.19.0",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"core-js": "^3.3.2",
"cypress-file-upload": "^3.5.3",
"file-saver": "^2.0.2",
"font-awesome": "^4.7.0",
"moment": "^2.24.0",
"moment-timezone": "^0.5.27",
"v-money": "^0.8.1",
"vee-validate": "^3.1.0",
"vue": "^2.6.10",
"vue-avatar": "^2.1.8",
"vue-context-menu": "^2.0.6",
"vue-focus": "^2.1.0",
"vue-head": "^2.2.0",
"vue-js-modal": "^1.3.31",
"vue-nav-tabs": "^0.5.7",
"vue-notification": "^1.3.20",
"vue-router": "^3.1.3",
"vue-select": "^3.2.0",
"vue-simple-calendar": "^4.3.2",
"vue-simple-suggest": "^1.10.1",
"vue-slider-component": "^3.1.1",
"vue-the-mask": "^0.11.1",
"vue-upload-component": "^2.8.20",
"vue-wysiwyg": "^1.7.2",
"vue2-datepicker": "^3.3.0",
"vue2-filters": "^0.8.0",
"vuex": "^3.0.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.0.0",
"#vue/cli-plugin-e2e-cypress": "~4.2.0",
"#vue/cli-plugin-eslint": "~4.2.0",
"#vue/cli-plugin-router": "^4.0.0",
"#vue/cli-plugin-vuex": "^4.0.0",
"#vue/cli-service": "^4.0.0",
"babel-eslint": "^10.0.3",
"bootstrap": "^4.3.1",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.1.2",
"faker": "^4.1.0",
"jquery": "^3.4.1",
"node-sass": "^4.12.0",
"popper.js": "^1.16.0",
"sass-loader": "^8.0.0",
"vue-template-compiler": "^2.6.10"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {
"semi": [
2,
"never"
]
}
}
}
Was it wrong version of babel ?
Which is Correct ?
Thanks!
#babel/runtime/helpers/esm/typeof.js
Can you try with older version of babel, just do npm install babel-preset-es2015 --save-dev
It turns out that earlier Babel was shipping with all the required plugin, including one that translates ES6 to ES5. But since Babel 6.0, you have to explicitly include plugins or presets (which include certain predefined plugins). So we will install Babel preset es2015 .
Source
Some updates to a dependency of one of our dependencies broke our build and was a bit tricky to find out what the cause of the issue was...
We finally noticed that #vue/component-compiler-utils requires "prettier": "^1.11.1" and - as discussed in vue webpack template missing parser that Prettier#1.13.0 causes the issue we were having, before rolling back to Prettier#1.12.0
How do we ensure that package-lock.json "locks" dependencies to a version and do not update over time or when re-installed?
This is an example of our package.json from which the incorrect lock file is generated:
{
...
"dependencies": {
"html-loader": "0.5.1",
"vue": "2.5.16",
"vue-class-component": "6.2.0",
"vue-property-decorator": "6.1.0",
"vue-router": "3.0.1",
"vuex": "3.0.1",
"vuex-class": "0.3.0",
...
},
"devDependencies": {
"#types/jest": "22.0.1",
"#vue/cli-plugin-babel": "3.0.0-beta.11",
"#vue/cli-plugin-eslint": "3.0.0-beta.11",
"#vue/cli-plugin-typescript": "3.0.0-beta.11",
"#vue/cli-plugin-unit-jest": "3.0.0-beta.7",
"#vue/cli-service": "3.0.0-beta.11",
"#vue/eslint-config-airbnb": "3.0.0-beta.11",
"#vue/eslint-config-typescript": "3.0.0-beta.11",
...
}
}
Using npm shrinkwrap fixes the issue, it converts package-lock.json to a npm-shrinkwrap.json which hashes and locks every specific version installed.
See What is the difference between npm-shrinkwrap.json and package-lock.json? for more details
I'm not entirely sure if npm shrinkwrap fixes the issue in npm v6+.
Here is a snippet of the npm-shrinkwrap.json file that is being generated for vue-loader.
It seems as though even the shrinkwrap is not locking down the requires versions.
"vue-loader": {
"version": "14.0.3",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-14.0.3.tgz",
"integrity": "sha512-5kFK/df1jgVoFcTB9p19rrYcyuYduoZzUSf6chMVsIRmVL9AKPYCa9JGLAZsU1XXGbGO9MSkwbum91u2dx7YcQ==",
"dev": true,
"requires": {
"consolidate": "^0.14.0",
"hash-sum": "^1.0.2",
"loader-utils": "^1.1.0",
"lru-cache": "^4.1.1",
"postcss": "^6.0.8",
"postcss-load-config": "^1.1.0",
"postcss-selector-parser": "^2.0.0",
"prettier": "^1.7.0",
"resolve": "^1.4.0",
"source-map": "^0.6.1",
"vue-hot-reload-api": "^2.2.0",
"vue-style-loader": "^4.0.1",
"vue-template-es2015-compiler": "^1.6.0"
}