Develop Reference

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.

webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case

im getting the errors:
22 errors have detailed information that is not shown.
Failed to compile.
webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
Module not found: Error: Can't resolve 'zlib' in 'C:\Users\joshm\Downloads\New folder (14)\myapp\node_modules\body-parser\lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }'
- install 'browserify-zlib'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "zlib": false }
asset static/js/bundle.js 2.84 MiB [emitted] (name: main) 1 related asset
asset index.html 1.67 KiB [emitted]
asset asset-manifest.json 190 bytes [emitted]
cached modules 2.42 MiB (javascript) 28.3 KiB (runtime) [cached] 271 modules
WARNING in ./node_modules/express/lib/view.js 74:13-25
Critical dependency: the request of a dependency is an expression
# ./node_modules/express/lib/application.js 26:11-28
# ./node_modules/express/lib/express.js 19:12-36
# ./node_modules/express/index.js 10:0-41
# ./src/Login.js 6:0-35 29:23-36
# ./src/App.js 8:0-28 39:38-43
# ./src/index.js 7:0-24 10:33-36
1 warning has detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.
ERROR in ./node_modules/body-parser/lib/read.js 20:11-26
Module not found: Error: Can't resolve 'zlib' in 'C:\Users\joshm\Downloads\New folder (14)\myapp\node_modules\body-parser\lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }'
- install 'browserify-zlib'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "zlib": false }
# ./node_modules/body-parser/lib/types/json.js 21:11-29
# ./node_modules/body-parser/index.js 134:15-42
# ./node_modules/express/lib/express.js 13:17-39
# ./node_modules/express/index.js 10:0-41
# ./src/Login.js 6:0-35 29:23-36
# ./src/App.js 8:0-28 39:38-43
# ./src/index.js 7:0-24 10:33-36
ERROR in ./node_modules/content-disposition/index.js 19:15-39
Module not found: Error: Can't resolve 'path' in 'C:\Users\joshm\Downloads\New folder (14)\myapp\node_modules\content-disposition'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
# ./node_modules/express/lib/response.js 15:25-55
# ./node_modules/express/lib/express.js 27:10-31
# ./node_modules/express/index.js 10:0-41
# ./src/Login.js 6:0-35 29:23-36
# ./src/App.js 8:0-28 39:38-43
# ./src/index.js 7:0-24 10:33-36
ERROR in ./node_modules/cookie-signature/index.js 4:13-30
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\joshm\Downloads\New folder (14)\myapp\node_modules\cookie-signature'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
- install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "crypto": false }
# ./node_modules/express/lib/response.js 35:11-43
# ./node_modules/express/lib/express.js 27:10-31
# ./node_modules/express/index.js 10:0-41
# ./src/Login.js 6:0-35 29:23-36
# ./src/App.js 8:0-28 39:38-43
# ./src/index.js 7:0-24 10:33-36
ERROR in ./node_modules/destroy/index.js 12:17-41
Module not found: Error: Can't resolve 'fs' in 'C:\Users\joshm\Downloads\New folder (14)\myapp\node_modules\destroy'
# ./node_modules/send/index.js 19:14-32
# ./node_modules/express/lib/response.js 45:11-26
# ./node_modules/express/lib/express.js 27:10-31
# ./node_modules/express/index.js 10:0-41
# ./src/Login.js 6:0-35 29:23-36
# ./src/App.js 8:0-28 39:38-43
# ./src/index.js 7:0-24 10:33-36
ERROR in ./node_modules/destroy/index.js 14:13-30
Module not found: Error: Can't resolve 'stream' in 'C:\Users\joshm\Downloads\New folder (14)\myapp\node_modules\destroy'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
- install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "stream": false }
# ./node_modules/send/index.js 19:14-32
# ./node_modules/express/lib/response.js 45:11-26
# ./node_modules/express/lib/express.js 27:10-31
# ./node_modules/express/index.js 10:0-41
# ./src/Login.js 6:0-35 29:23-36
# ./src/App.js 8:0-28 39:38-43
# ./src/index.js 7:0-24 10:33-36
ERROR in ./node_modules/etag/index.js 18:13-30
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\joshm\Downloads\New folder (14)\myapp\node_modules\etag'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
- install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "crypto": false }
# ./node_modules/express/lib/utils.js 25:11-26
# ./node_modules/express/lib/application.js 30:18-48 32:25-62 34:19-50
# ./node_modules/express/lib/express.js 19:12-36
# ./node_modules/express/index.js 10:0-41
# ./src/Login.js 6:0-35 29:23-36
# ./src/App.js 8:0-28 39:38-43
# ./src/index.js 7:0-24 10:33-36
ERROR in ./node_modules/etag/index.js 20:12-31
Module not found: Error: Can't resolve 'fs' in 'C:\Users\joshm\Downloads\New folder (14)\myapp\node_modules\etag'
# ./node_modules/express/lib/utils.js 25:11-26
# ./node_modules/express/lib/application.js 30:18-48 32:25-62 34:19-50
# ./node_modules/express/lib/express.js 19:12-36
# ./node_modules/express/index.js 10:0-41
# ./src/Login.js 6:0-35 29:23-36
# ./src/App.js 8:0-28 39:38-43
# ./src/index.js 7:0-24 10:33-36
ERROR in ./node_modules/express/lib/application.js 28:11-26
Module not found: Error: Can't resolve 'http' in 'C:\Users\joshm\Downloads\New folder (14)\myapp\node_modules\express\lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'
- install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "http": false }
# ./node_modules/express/lib/express.js 19:12-36
# ./node_modules/express/index.js 10:0-41
# ./src/Login.js 6:0-35 29:23-36
# ./src/App.js 8:0-28 39:38-43
# ./src/index.js 7:0-24 10:33-36
22 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.
webpack 5.69.1 compiled with 22 errors and 1 warning in 2554 ms
webpack.config.js
module.exports = {
resolve: {
fallback: {
"fs": false
},
}
}

I have same problem. And this solution will help you:
npm i node-polyfill-webpack-plugin
Write this code into vue.config.js
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
module.exports = {
configureWebpack: {
plugins: [new NodePolyfillPlugin()]
}
};

This happens when you import an unrecognized module into your Application. Check all the modules you are importing from expressjs.

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.

Module parse failed on "Name = undefined"

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 ...