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?
Related
I'm using using a 3rd party Content management SDK ("dc-delivery-sdk-js": "^0.11.0") which throws error as you may need appropriate loader when trying to run " npm run build:ssr " (Server Dide Rendering build during local development)
ERROR in ./node_modules/dc-delivery-sdk-js/build/module/lib/client/createContentClientV2Fresh.js 3:37
Module parse failed: Unexpected token (3:37)
You may need an appropriate loader to handle this file type.
| import axiosRetry from 'axios-retry';
| import { createBaseContentClient } from './createBaseContentClient';
> const isThrottled = (error) => error?.response?.status === 429;
| const DEFAULT_RETRY_CONFIG = {
| retries: 3,
# ./node_modules/dc-delivery-sdk-js/build/module/lib/client/createContentClient.js 2:0-74 11:15-41
# ./node_modules/dc-delivery-sdk-js/build/module/lib/ContentClient.js
# ./node_modules/dc-delivery-sdk-js/build/module/index.js
# ./dist/moltonbrown-server/main.js
# ./server.ts
ERROR in ./node_modules/dc-delivery-sdk-js/build/module/lib/content/coordinators/FilterByImpl.js 9:42
Module parse failed: Unexpected token (9:42)
You may need an appropriate loader to handle this file type.
| async fetch(requestConfig) {
| try {
> if (!requestConfig.parameters?.locale && this.config?.locale) {
| requestConfig.parameters = Object.assign({}, {
| ...(requestConfig.parameters || {}),
# ./node_modules/dc-delivery-sdk-js/build/module/lib/ContentClient.js 8:0-67 113:19-31
# ./node_modules/dc-delivery-sdk-js/build/module/index.js
# ./dist/moltonbrown-server/main.js
# ./server.ts
I've tried script-loader (https://v4.webpack.js.org/loaders/script-loader/) which resolves the build issue locally but throw error post deployment since its has not suppport for Node.js which actually runs the SSR build in server.
any other alternative webpack loaders or solutions to resolve this issue for Angular 6 project ?
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.
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.
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
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 ...