Module parse failed on "Name = undefined" - javascript

I generated javascript-es6 client api with swagger-codegen based on Loopback.io swagger file.
I try to import it in my .vue project but i get the errors like:
Module parse failed: Unexpected token (92:9)
You may need an appropriate loader to handle this file type.
| * #member {String} Name
| */
| Name = undefined;
| /**
| * #member {Number} LastPrice
# ./node_modules/myapi/src/index.js 15:0-36
# ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!./src/components/CartVote.vue
# ./src/components/CartVote.vue
# ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!./src/components/Cart.vue
# ./src/components/Cart.vue
# ./src/router/index.js
# ./src/main.js
# multi ./build/dev-client ./src/main.js
and
Module parse failed: Unexpected token (229:32)
You may need an appropriate loader to handle this file type.
| * #readonly
| */
| static CollectionFormatEnum = {
| /**
| * Comma-separated values. Value: <code>csv</code>
# ./node_modules/myapi/src/index.js 23:0-60
# ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!./src/components/CartVote.vue
# ./src/components/CartVote.vue
# ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!./src/components/Cart.vue
# ./src/components/Cart.vue
# ./src/router/index.js
# ./src/main.js
# multi ./build/dev-client ./src/main.js
I searched for hours but nothing was similar to this errors.
I use vue-cli generated project, so it uses babel and webpack
What can i do?
EDIT
My Babelrc presents
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2","es2015","stage-0"
],


#loganfsmyth is correct, its not ES6 syntax. I had the same problem and I simply just turning off ES6 with the useES6 property when generating the client.
One way to do this is using a configuration file containing "useES6": false
Then execute swagger-codegen-cli -c ./config.json ...

Related

Monaco-editor-textmate import failure

I wanted to let monaco editor show the One Dark Pro Theme. There is a step in one of the solutions.
import { wireTmGrammars } from 'monaco-editor-textmate'
But once when I add this import, webpack cannot compile my product.
It said:
error in ./node_modules/_monaco-editor-textmate#4.0.0#monaco-editor-textmate/dist/index.js
Module parse failed: Unexpected token (7:14)
You may need an appropriate loader to handle this file type.
| const tm_to_monaco_token_1 = require("./tm-to-monaco-token");
| class TokenizerState {
| _ruleStack;
| constructor(_ruleStack) {
| this._ruleStack = _ruleStack;
# ./node_modules/_babel-loader#7.1.5#babel-loader/lib!./node_modules/_vue-loader#13.7.3#vue-loader/lib/selector.js?type=script&index=0!./src/pages/oj/components/PreviewFile.vue 14:0-56
# ./src/pages/oj/components/PreviewFile.vue
# ./node_modules/_babel-loader#7.1.5#babel-loader/lib!./node_modules/_vue-loader#13.7.3#vue-loader/lib/selector.js?type=script&index=0!./src/pages/oj/views/ages/oj/views/help/ThanksPage.vue
# ./src/pages/oj/views/help/ThanksPage.vue
# ./src/pages/oj/views/index.js
# ./src/pages/oj/router/routes.js
# ./src/pages/oj/router/index.js
# ./src/pages/oj/index.js
# multi ./build/dev-client ./src/pages/oj/index.js
I tried to find a solution to this problem. What can I try next?

When i am trying to run "npm run serve", that time i am getting an error like the code below. How can i solve it?

Here is the error I got in my cmd,
Module parse failed: Unexpected token (97:23)
File was processed with these loaders:
* ./node_modules/cache-loader/dist/cjs.js
* ./node_modules/babel-loader/lib/index.js
* ./node_modules/cache-loader/dist/cjs.js
* ./node_modules/vue-loader-v16/dist/index.js
You may need an additional loader to handle the result of these loaders.
|
| customer_data() {
> if (this.getData?.rowdata?.length > 0) {
| return this.getData;
| } else {
# ./src/views/ManageCustomer.vue?vue&type=script&lang=js 1:0-285 1:0-285 1:286-560 1:286-560
# ./src/views/ManageCustomer.vue
# ./src/router/index.js
# ./src/main.js
# multi (webpack)-dev-server/client?http://192.168.10.73:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
I'm unable to run my vue project of this reason.

Module parse failed: Unexpected token google-spreadsheet

I am new to webpack. I'm getting the following error. I don't really know how to go about resolving this issue. It occurs in the google-spreadsheet library https://github.com/theoephraim/node-google-spreadsheet.
Would ignoring the folder that contain the google-spreadsheet when webpack bundles everything fix this issue?
ERROR in ./node_modules/google-spreadsheet/lib/GoogleSpreadsheet.js
Module parse failed: Unexpected token (164:6)
You may need an appropriate loader to handle this file type.
| requests,
| includeSpreadsheetInResponse: true,
| ...responseRanges && {
| responseIncludeGridData: true,
| ...responseRanges !== '*' && { responseRanges },
# ./node_modules/google-spreadsheet/index.js 1:26-60
# ./src/client/internal-tools/autotranslation/utils/googleAPI.js
# ./src/client/internal-tools/autotranslation/index.js
# ./src/client/InternalTools.js
# ./src/client/index.js
# multi (webpack)-dev-server/client?http://localhost:3001 webpack/hot/dev-server react-hot-loader/patch ./src/client/index.js
ERROR in ./node_modules/google-spreadsheet/lib/GoogleSpreadsheetWorksheet.js
Module parse failed: Unexpected token (41:6)
You may need an appropriate loader to handle this file type.
| return this._spreadsheet._makeSingleUpdateRequest(requestType, {
| // sheetId: this.sheetId,
| ...requestParams,
| });
| }
# ./node_modules/google-spreadsheet/index.js 2:35-78
# ./src/client/internal-tools/autotranslation/utils/googleAPI.js
# ./src/client/internal-tools/autotranslation/index.js
# ./src/client/InternalTools.js
# ./src/client/index.js
# multi (webpack)-dev-server/client?http://localhost:3001 webpack/hot/dev-server react-hot-loader/patch ./src/client/index.js
webpack: Failed to compile.

I used webpack.IgnorePlugin(/googleapi/) to get it to work.

How to add css-loader and stylus-loader into nuxt.config.js?

I create an Nuxt.js skeleton:
yarn create nuxt-app myapp
Then I add css-loader and stylus loader:
yarn add css-loader
yarn add stylus stylus loader
I then add them to nuxt.config.js:
build: {
/*
** You can extend webpack config here
*/
extend(config, ctx) {
// Run ESLint on save
if (ctx.isDev && ctx.isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
config.module.rules.push({
test: /\.css$/,
loader: ['css-loader', 'stylus-loader'],
exclude: /(node_modules)/
})
}
}
}
I get this when I run yarn run dev:
begueradj#begueradj:~/myapp$ yarn run dev
yarn run v1.10.1
$ nuxt
INFO Building project
✔ success Builder initialized
✔ success Nuxt files generated
ERROR Failed to compile with 4 errors 16:03:01
error in ./.nuxt/components/nuxt-error.vue?vue&type=style&index=0&lang=css&
Syntax Error: SyntaxError
(1:1) Unknown word
> 1 | exports = module.exports = require("../../node_modules/css-loader/lib/css-base.js")(false);
| ^
2 | // imports
3 |
# ./node_modules/vue-style-loader??ref--3-oneOf-1-0!./node_modules/css-loader??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/css-loader!./node_modules/stylus-loader!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt/components/nuxt-error.vue?vue&type=style&index=0&lang=css& 4:14-403 14:3-18:5 15:22-411
# ./.nuxt/components/nuxt-error.vue?vue&type=style&index=0&lang=css&
# ./.nuxt/components/nuxt-error.vue
# ./.nuxt/index.js
# ./.nuxt/client.js
# multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js
error in ./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css&
Syntax Error: SyntaxError
(1:1) Unknown word
> 1 | exports = module.exports = require("../../node_modules/css-loader/lib/css-base.js")(false);
| ^
2 | // imports
3 |
# ./node_modules/vue-style-loader??ref--3-oneOf-1-0!./node_modules/css-loader??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/css-loader!./node_modules/stylus-loader!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css& 4:14-405 14:3-18:5 15:22-413
# ./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css&
# ./.nuxt/components/nuxt-loading.vue
# ./.nuxt/App.js
# ./.nuxt/index.js
# ./.nuxt/client.js
# multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js
error in ./components/Logo.vue?vue&type=style&index=0&lang=css&
Syntax Error: SyntaxError
(1:1) Unknown word
> 1 | exports = module.exports = require("../node_modules/css-loader/lib/css-base.js")(false);
| ^
2 | // imports
3 |
# ./node_modules/vue-style-loader??ref--3-oneOf-1-0!./node_modules/css-loader??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/css-loader!./node_modules/stylus-loader!./node_modules/vue-loader/lib??vue-loader-options!./components/Logo.vue?vue&type=style&index=0&lang=css& 4:14-379 14:3-18:5 15:22-387
# ./components/Logo.vue?vue&type=style&index=0&lang=css&
# ./components/Logo.vue
# ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js&
# ./pages/index.vue?vue&type=script&lang=js&
# ./pages/index.vue
# ./.nuxt/router.js
# ./.nuxt/index.js
# ./.nuxt/client.js
# multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js
error in ./components/VuetifyLogo.vue?vue&type=style&index=0&lang=css&
Syntax Error: SyntaxError
(1:1) Unknown word
> 1 | exports = module.exports = require("../node_modules/css-loader/lib/css-base.js")(false);
| ^
2 | // imports
3 |
# ./node_modules/vue-style-loader??ref--3-oneOf-1-0!./node_modules/css-loader??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/css-loader!./node_modules/stylus-loader!./node_modules/vue-loader/lib??vue-loader-options!./components/VuetifyLogo.vue?vue&type=style&index=0&lang=css& 4:14-386 14:3-18:5 15:22-394
# ./components/VuetifyLogo.vue?vue&type=style&index=0&lang=css&
# ./components/VuetifyLogo.vue
# ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js&
# ./pages/index.vue?vue&type=script&lang=js&
# ./pages/index.vue
# ./.nuxt/router.js
# ./.nuxt/index.js
# ./.nuxt/client.js
# multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js
READY Listening on http://localhost:3000
ERROR Failed to compile with 4 errors 16:03:02
error in ./.nuxt/components/nuxt-error.vue?vue&type=style&index=0&lang=css&
Syntax Error: SyntaxError
(1:1) Unknown word
> 1 | exports = module.exports = require("../../node_modules/css-loader/lib/css-base.js")(false);
| ^
2 | // imports
3 |
# ./node_modules/vue-style-loader??ref--3-oneOf-1-0!./node_modules/css-loader??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/css-loader!./node_modules/stylus-loader!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt/components/nuxt-error.vue?vue&type=style&index=0&lang=css& 4:14-403 14:3-18:5 15:22-411
# ./.nuxt/components/nuxt-error.vue?vue&type=style&index=0&lang=css&
# ./.nuxt/components/nuxt-error.vue
# ./.nuxt/index.js
# ./.nuxt/client.js
# multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js
error in ./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css&
Syntax Error: SyntaxError
(1:1) Unknown word
> 1 | exports = module.exports = require("../../node_modules/css-loader/lib/css-base.js")(false);
| ^
2 | // imports
3 |
# ./node_modules/vue-style-loader??ref--3-oneOf-1-0!./node_modules/css-loader??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/css-loader!./node_modules/stylus-loader!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css& 4:14-405 14:3-18:5 15:22-413
# ./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css&
# ./.nuxt/components/nuxt-loading.vue
# ./.nuxt/App.js
# ./.nuxt/index.js
# ./.nuxt/client.js
# multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js
error in ./components/Logo.vue?vue&type=style&index=0&lang=css&
Syntax Error: SyntaxError
(1:1) Unknown word
> 1 | exports = module.exports = require("../node_modules/css-loader/lib/css-base.js")(false);
| ^
2 | // imports
3 |
# ./node_modules/vue-style-loader??ref--3-oneOf-1-0!./node_modules/css-loader??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/css-loader!./node_modules/stylus-loader!./node_modules/vue-loader/lib??vue-loader-options!./components/Logo.vue?vue&type=style&index=0&lang=css& 4:14-379 14:3-18:5 15:22-387
# ./components/Logo.vue?vue&type=style&index=0&lang=css&
# ./components/Logo.vue
# ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js&
# ./pages/index.vue?vue&type=script&lang=js&
# ./pages/index.vue
# ./.nuxt/router.js
# ./.nuxt/index.js
# ./.nuxt/client.js
# multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js
error in ./components/VuetifyLogo.vue?vue&type=style&index=0&lang=css&
Syntax Error: SyntaxError
(1:1) Unknown word
> 1 | exports = module.exports = require("../node_modules/css-loader/lib/css-base.js")(false);
| ^
2 | // imports
3 |
# ./node_modules/vue-style-loader??ref--3-oneOf-1-0!./node_modules/css-loader??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/css-loader!./node_modules/stylus-loader!./node_modules/vue-loader/lib??vue-loader-options!./components/VuetifyLogo.vue?vue&type=style&index=0&lang=css& 4:14-386 14:3-18:5 15:22-394
# ./components/VuetifyLogo.vue?vue&type=style&index=0&lang=css&
# ./components/VuetifyLogo.vue
# ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js&
# ./pages/index.vue?vue&type=script&lang=js&
# ./pages/index.vue
# ./.nuxt/router.js
# ./.nuxt/index.js
# ./.nuxt/client.js
# multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js
What am I doing wrong?
EDIT:
Why I added these loaders into nuxt.config.js? Because, for instance, on here it says installing the loader is not enough unless you extend the webpack configuration. And to do so in Nuxt, we have to do it similarly to what I did (I suppose)

Your discussion helps me!
My steps(if you have stylus globally):
npm install stylus-loader stylus --save-dev
And that's it. After that you can automatically use stylus in your project.

[Quite a long delayed answer. But will help someone for recent nuxt versions (^2.14)]
A solution from issue discussion nuxt issue
with ref to webpack stylus options
and for nuxt latest (2.14.7),
extend webpack configuration mapping all loaders,
build: {
extend (config, { isDev, isClient }) {
[].concat(...config.module.rules.find(e => e.test.toString().match(/\.styl/)).oneOf.map(e => e.use.filter(e => e.loader == 'stylus-loader'))).forEach(stylus => {
Object.assign(stylus.options, {
//preferPathResolver: 'webpack',
sourceMap: true,
stylusOptions: {
//use: ['nib'],
include: ['~assets/styles'], //include all styl files from folder
import: [
'~assets/style/main.styl', //your main styl file
],
},
})
//console.log(stylus)
})
},
this imports the files and include stylus folder as well.

Can't import package to react boilerplate

Trying to import react-image-crop package using yarn and add it to react boilerplate.
After installing the package getting this error
Module parse failed: /Users/...../frontend/node_modules/react-image-crop/lib/ReactCrop.js Unexpected token (62:25)
You may need an appropriate loader to handle this file type.
|
| function makeAspectCrop(crop, imageAspect) {
| const completeCrop = { ...crop };
|
| if (crop.width) {
# ./app/components/ImageUpload/index.js 23:0-41
# ./app/containers/HomePage/index.js
# ./app/containers/HomePage/Loadable.js
# ./app/containers/App/index.js
# ./app/app.js
# multi eventsource-polyfill webpa
The boilerplate is using babylons env preset so the spread operator should be available.
Any ideas what may be the cause?

Instead of importing directly from react-image-crop I used
import ReactCrop from 'react-image-crop/dist/ReactCrop';
and working like a charm

Categories

Resources