Calling VueLoaderPlugin() causes 'findIndex' undefined error - javascript

I'm trying to integrate a Vue CLI app in another web project we are working with. The Vue app itself works when running the dev server bundled with Vue CLI.
The Vue application contains .vue files, so a loader for webpack is needed. I used the setup from the vue-loader documentation. When I ran webpack (via Grunt) I now get the following error:
Warning: Cannot read property 'findIndex' of undefined Use --force to continue.
After a lot of tinkering I figured out that the new VueLoaderPlugin(); line from the documentation mentioned above was the cause of this. However I do need this plugin to get my .vue-files to work.
I am using the following set of loaders, imported using npm via package.json:
{
// ...
"dependencies": {
//...
"webpack": "~3.9.1"
},
"devDependencies": {
// ...
"vue": "^2.5.17",
"vue-html-loader": "^1.2.4",
"vue-loader": "^15.4.2",
"vue-template-compiler": "^2.5.17"
}
}
I have tried googling for the error but came up empty handed. All help and suggestions are welcome. Cheers!

When fiddling around trying to get the vue-loader to work, at some point I got an error leading me to update webpack to a later version. This version seemed to have deprecated the use of module.loaders in favour of module.rules.
Changing this in the webpack config seems to have made everything work smoothly. Hope someone finds this useful!

Related

generated-stories-entry.js error for rule 'import/no-unresolved'

I have added storybook to my Vue project with vue add storybook.
This has added several dependencies to my project, e.g. in my package.json I find this among others:
"vue": "~2.6.14",
"#storybook/vue": "6.4.19",
"vue-cli-plugin-storybook": "~2.1.0",
"eslint": "~6.8.0",
Now I am trying to run the storybook server with npm run storybook:serve but I get an error:
I have been trying different things, like configuring the 'import/no-unresolved' rule to be off, emitError: false on the eslist-loader inside .eslintrc, skipping the linter plugin in the webpack configuration, etc. Nothing worked and each attempt just produced new errors.
Currently I have no explicit es-linter nor webpack configuration at all. But if I comment a line inside node_modules/eslint-loader/index.js like this:
// emitter(new ESLintError(messages));
then it all works.
I don't want to be commenting out lines inside a library, I would like to have a proper solution and understand what is happening.
I found the answer myself. I had to add the eslint-plugin-import package:
npm install eslint-plugin-import
And add the plugin to the eslint configuration:
"plugins": [
"import"
]
For me the suggested answer didn’t work, what fix it in the end was to ignore those files in eslint configuration:
"ignorePatterns": [
"generated-stories-entry.js",
"storybook-init-framework-entry.js"
],

nuxt.js build: Cannot read property 'renderRoute' of undefined

I'm using laravel-nuxt.
When i'm trying to build the project for deployment i get this error:
ERROR /about
18:54:52
TypeError: Cannot read property 'renderRoute' of undefined
at Generator.generateRoute (C:\Users\myProj\node_modules\#nuxt\generator\dist\generator.js:222:42)
at Promise.all.routes.splice.map (C:\Users\myProj\node_modules\#nuxt\generator\dist\generator.js:120:24
on all route i have in my "Pages" folder.
I have no clue on how to fix this, and I really appreciate all help I can get!
Tell me what more info you guys need to figure this one out!
I was having the same problem today and went back to nuxt 2.9.0 by changing my
package.json file like this
// "nuxt": "^2.0.0",
"nuxt": "2.9.0",
after that I hit npm install again and nuxt seems to work again
This problem is cause by #nuxt/generator.
The problem is being fixed in this pull request now: https://github.com/nuxt/nuxt.js/pull/6529
While waiting for the pull request to be reviewed, here is my work around:
"nuxt": "2.9.2",
"#nuxt/generator": "2.9.2"
And removed /node_modules and yarn install dependencies again.
Now the build works for me.
The Issue is now resolved you can update the Nuxt package
https://nuxtjs.org/guide/upgrading/

Uncaught type error when trying to install keycloak-js with vue and webpack: __WEBPACK_IMPORTED_MODULE_3_keycloak_js__ is not a function

I am trying to install keycloak-js in my vue project as described in this tutorial and when I start my application I keep getting the error
Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_3_keycloak_js__ is not a function
These are my entries in package.json
"keycloak-js": "^7.0.0",
"vue": "^2.5.2",
"webpack": "^3.6.0",
Like in the tutorial I import it with import * as Keycloak from 'keycloak-js' and start it with let keycloak = Keycloak(initOptions) which is the line that throws the error.
I also tried to require keycloak and then it just said Keycloak is not a function.
Could this error be webpack-related? This is imho the only difference between the tutorial and my application. I haven't found anyone else having the same problem.
A co-worker just told me to try an older version of Keycloak and now it works.
"keycloak-js": "^6.0.1",
This is supposedly a bug in keycloak.js version 7.0.0 itself and as far as I know will be patched very soon. Until then I would stick to the latest 6.* version, which is 6.0.1
Try importing the Keycloack with:
import Keycloak from 'keycloak-js';
The keycloak-js 7.x as installed via npm/yarn is broken. The main keycloak.js file includes minified code for dependencies js-sha256 and base64-js inline, and both clobber the module.exports.

"Unknown named module" error in react native

I'm creating an app using react native but some imports raise the error from the title: "Unknown named module". This happens with two packages, react-native-material-design and react-native-db-models, so I suspect the problem isn't on the modules but in my setup.
I tried linking the packages with react-native link and repackaging the app using react-native run-android, but none of these solved this issue. I've looked up examples of imports on github, and even copying working code raises the same error.
I tried installing the modules using either yarn and npm. I tried with relative paths like ../../react-native-db-models. Didn't work!
This is how I import the modules:
import RNDBModel from 'react-native-db-models';
import { List, Button, Toolbar, } from 'react-native-material-design';
These are my project dependencies:
"dependencies": {
"react": "15.4.1",
"react-native": "0.39.2",
"react-native-db-models": "^0.1.3",
"react-native-material-design": "^0.3.7",
"react-native-md-textinput": "^2.0.4",
"react-native-vector-icons": "0.8.5",
"react-redux": "^5.0.1",
"redux": "^3.6.0",
"redux-logger": "^2.7.4"
},
If React/React Native is incompatible with these modules, how do I figure out which version should I use? Maybe the error has nothing to do with imports and has something to do with my project?
The package server started by react-native start seems to have a cache of the node modules. Stopping and restarting the server solved the issue.
Always restart your react server after installing modules!
A quick check on the package's repository shows 'List' module is no longer available. Here is a link to why it was removed.
So, you will have to remove 'List' module from your import:
import { Button, Toolbar, } from 'react-native-material-design';

Eslint - Maximum call stack size exceeded

Working in a React / Webpack project I started to have problems with the eslint library.
The eslint package is downloaded using npm and it's used to validate the project using a webpack preLoader.
preLoaders: [{
test: /\.jsx?$/,
loaders: [ 'eslint' ],
include: path.resolve(__dirname, 'app')
}]
It used to work fine until recently when I tried to git clone the same project to an other folder.
After installing the dependencies "npm install" and starting the project "npm start" the following error appeared.
ERROR in ./main.view.jsx
Module build failed: RangeError: Maximum call stack size exceeded
at keys (native)
at Referencer.Visitor.visitChildren (project/node_modules/eslint/node_modules/escope/node_modules/esrecurse/esrecurse.js:78:24)
at Referencer.Visitor.visit (project/node_modules/eslint/node_modules/escope/node_modules/esrecurse/esrecurse.js:112:14)
at Referencer.Visitor.visitChildren (project/node_modules/eslint/node_modules/escope/node_modules/esrecurse/esrecurse.js:93:26)
at Referencer.Visitor.visit (project/node_modules/eslint/node_modules/escope/node_modules/esrecurse/esrecurse.js:112:14)
at Referencer.Visitor.visitChildren (project/node_modules/eslint/node_modules/escope/node_modules/esrecurse/esrecurse.js:93:26)
at Referencer.Visitor.visit (project/node_modules/eslint/node_modules/escope/node_modules/esrecurse/esrecurse.js:112:14)
at Referencer.Visitor.visitChildren (project/node_modules/eslint/node_modules/escope/node_modules/esrecurse/esrecurse.js:88:38)
at Referencer.Visitor.visit (project/node_modules/eslint/node_modules/escope/node_modules/esrecurse/esrecurse.js:112:14)
at Referencer.Visitor.visitChildren (project/node_modules/eslint/node_modules/escope/node_modules/esrecurse/esrecurse.js:93:26)
# ./app.jsx 17:26-57
The strange part of all is that the old project installation still works.
The problem must be somewhere in the node_modules folder because when I copy the modules from the old installation to the new one the project suddenly works.
I did a "npm list --depth=0" on both projects and both have the same packages and versions. Why one is working and the other one not?
I guess the problem is in the eslint package because when I remove the preLoader it works again.
I'm really confused about that. Someone had that problem before?
My main.view.jsx looks like that
import React from 'react';
export default class MainView extends React.Component {
render() {
return (
<div />
);
}
}
Thanks!
I could solve the problem by myself.
Isolating everything I found out that the problem was the babel dependencies.
For some reason the combination of versions I had of babel-core, babel-loader and babel-eslint where not working properly together.
I changed the babel versions required for my project in the package.json and now everything works fine.
- "babel-core": "5.6.x",
- "babel-loader": "5.3.x",
- "babel-eslint": "3.1.x",
+ "babel-core": "5.8.x",
+ "babel-loader": "5.4.x",
+ "babel-eslint": "4.1.x",
Here my eslint dependencies
"eslint": "1.10.x",
"eslint-loader": "1.1.x",
"eslint-plugin-react": "3.10.x"
Hope the time I lost with that will help someone else!
Looking through the thread https://github.com/eslint/eslint/issues/4485, the solution now is very simply to update babel-eslint to 4.1.6. For instance, "babel-eslint": "^4.1.6". Now works :)
For some reason, I was able to fix this by just disabling a single rule:
Add this into your rules:
'no-octal-escape': 0,
if your code contains
export * from "."
remove above line

Categories