I recently upgraded my project from vuetify 1.5 to 2.1.. I also updated the required dependencies and installed fibers, deepmerge, sass, sass-loader in devdependencies.
Now when I run "yarn serve" it throws following error.
WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.plugins[12] misses the property 'apply'.
function
-> The run point of the plugin, required method.
WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.plugins[12] misses the property 'apply'.
function
-> The run point of the plugin, required method.
at webpack (/home/usman/projects/project-crm/frontend/node_modules/webpack/lib/webpack.js:31:9)
at serve (/home/usman/projects/project-crm/frontend/node_modules/#vue/cli-service/lib/commands/serve.js:137:22)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
error Command failed with exit code 1.
I don't have a clue where is this error occuring. I searched on internet but didn't found solution on
this error...
configuration.plugins[12] misses the property 'apply'.
OK people!!!
I've found a solution(trick). Off course it is a trick the way I see it but it is working absolutely fine to me. Remember this error happened to me due to upgrade from vuetify 1.5 to 2.1....
Steps I took were,
Created a new project(name = candy) with latest Vue and Vuetify.
Installed all dependencies and devDependencies in this new project(candy in my case) which I had in my original projects package.json file.
You can open package.json file of your original project and terminal in new project(candy) and run commands yarn add "package name in original project or npm install "package name.
Then copied this(candy) package.json file and pasted it in my original project folder and renamed these files and folder to old.
File & folder == node_modules to node_modules_old, package.json to package_old.json, vue.config.js to vue.config_old.js, yarn.lock to yarn_old.lock.
Copy only package.json of candy project to the original project's folder.
Run command yarn install or npm install.
And the server runs now.
Further, you will have to set your code according to the project. It can be in vue.config.js mostly or in babel config file or webpack.config.js.
Related
Just installed React npx create-react-app client and it failed to compile when launched citing the error ...autoprefixer/node_modules/kleur' do not define a valid './colors' target. I re-installed, it launched, but it failed again when launched concurrently with the express server.
Digging further... Kleur (version 4.0.1) is a dependency for "autoprefixer" in the package-lock.json file (version 9.8.1). I noticed that yarn.lock is referencing kleur version 3.0.3, though version 4.0.1 was installed in node_modules. A few days earlier, I had installed a React client where "autoprefixer" (version 9.8.0) used "chalk" with no "kleur" dependency, and which had no problems starting up.
Though not really understanding the problem, I replaced the "autoprefixer" code snippet (v. 9.8.1) in the newly installed client package-lock.json file with the previously installed version (9.8.0) and it appears to have solved the compiler issue. Curiously, references to kleur#^4.0.1 in node_modules seemed to switch to kleur#^3.0.3 after I made the change, which I cannot explain.
Thoughts anyone?
After lots of investigation, I found the problem. The problem was in the autoprefixer.js file which is part of dependencies in node_modules. As I understood system couldn't find the address of Kleur module. Just go to this file in the following path:
node_modules > autoprefixer > lib > autoprefixer.js
in this file change the value of kleur variable from :
var kleur = require('kleur/colors');
to
var kleur = require('../node_modules/kleur/colors');
I found this by comparing the address of this module with other modules in same file. if you hover your mouse on other modules like postcss you can see it has a complete address but this module kleur doesn't have such an address so when I changed the address to new value now it shows full address like other modules and it worked for me.
When I generate a nodejs-server with swagger 3.0.1 in the online tool https://editor.swagger.io/ and try to npm start the project I always get the following error:
Error: Cannot find module './middleware/swagger.router'
Short-term fix: you can get it to run until the maintainer of oas3-tools and Smartbear (for this server generator) fixes their respective parts.
PROBLEM A: oas3-tools build script isn't copying the 'middleware' over to the 'dist' directory.
To fix this:
Start your generated server (this will run npm install and create the dist folder in node_modules/oas3-tools)
Go into ./node_modules/oas3-tools and manually copy the missing src/middleware to the dist folder.
Now that you have a middleware folder in your dist folder, run the following typescript compile command against it: tsc dist/middleware/
PROBLEM B:
The next issue is a typo on the path to the swagger document is incorrect.
To fix this:
In the index.js file of your generated server, change the string 'api/openapi.yaml' to 'api/swagger.yaml'
POSSIBLE EXTRA PROBLEM:
You may need to manually transpile your .ts files. Please see #Alex's comment below if you also run into this (i.e. error TS6053: File 'dist/middleware/.ts' not found. Found 1 error)
Swagger Editor bug posted here: https://github.com/swagger-api/swagger-editor/issues/2086
Oas3-tools bug posted here: https://github.com/bug-hunters/oas3-tools/issues/17
The latest version of oas3-tools is 2.1.2 is screwed up. Use 2.0.2 for now.
oas3-tools : "2.0.2"
I have this error using ng new project_name:
An invalid configuration file was found ['angular.json']. Please delete the file before running the command.
I am getting this error I don't know how to get the solution.
I uninstalled #angular/cli and installed again
npm clean cache doesnt work too (I dont know if it is problem of my npm version
npm version is 6.4.1
node version is 8.11.1
what do i need to solve the problem?
If you are using the terminal of IntelliJ IDEA while there is a angular project already imported in the IDEA, it is the problem of the IDEA.So, open the command promt of your windows and create the project.
I did this and I was able to create the project.
The problem seems to be the _ in project_name resulting in the following error:
Schematic input does not validate against the Schema: {"name":"project_name","version":"6.0.1","newProjectRoot":"projects","skipInstall":false,"linkCli":false,"skipGit":false,"commit":null}
Errors:
Data path ".name" should match format "html-selector".
Replace _ e.g. with -.
Further readings:
Error when creating new project with Angular-CLI 6.1.2
Style Guide
Setting the working directory in IntelliJ's Karma task, to the Angular project's main directory, also fixes the problem.
I deleted the file in c:\users\XXX\.angular.json and it was running ok.
Run following if file is hidden. Open Terminal, run mv /Users/shivammishra/.angular.json /Users/shivammishra/angular.json.txt.
mv command will move the file to new location (angular.json.txt) and you can then delete.
Angular.js & Wrong Directions.
First of all, open a file called angular.js in the root folder.
And check if you add some wrong Directory. like the style or something like that. as example.
Suppose you add the bootstrap dependency and you want to add it to your project you will go to the angular.js and add it in the style configuration. so you will add it as the below:
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
Check if you add double dot .. not one dot in the path like the below:
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
Or you maybe add it in the following format:
"/node_modules/bootstrap/dist/css/bootstrap.min.css",
or
"node_modules/bootstrap/dist/css/bootstrap.min.css",
The correct format is :
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
In /project-a, I have a tiny, default exported class that I have built, transpiled and successfully output into a /dist folder. The "main" entry for that project's package.json is therefore "./dist/index.js".
I wanted to try it out before publishing to npm (I am new at this).
In /project-b, I update the dependencies in the package.json:
"dependencies": {
...
"project-a": "file:C:\\foo\\bar\\project-a"
}
And I do:
import MyClass from 'project-a';
On build with webpack, I get an error along the lines of:
Module not found: Error: Can't resolve 'project-a' in 'C:\webpack\configfile\entry\point'
So basically, the path to the dependency inside my package.json is being completely ignored! Why? What am I doing wrong?
OK so I figured it out. The tutorial I had been following only showed the end result of the package.json file... so I thought we just had to edit package.json directly with the needed path dependency. But it turns out you're supposed to let the package manager do the edits for you:
So the fix was:
delete my manual edits to package.json
run npm install file:../path/to/project-a
That seemed to make the package system aware of where everything was, and webpack in turn was able to find what it needed to build successfully
I want to use the js-cookie library in my TypeScript project.
First, I installed the library and the typings by running npm install js-cookie #types/js-cookie --save-dev in the directory that contains node_modules and package.json. package.json now contains "#types/js-cookie": "^2.1.0" and there is a folder js-cookie in node_modules.
Then I added
import * as Cookies from "js-cookie";
[...]
Cookies.remove("token");
to my TypeScript file. WebStorm doesn't show any errors.
When I run the server, I get the following error:
fetch.js:32 GET http://localhost:8080/ui/js-cookie 404 (Not Found)
common.js:85 Uncaught (in promise) Error: Fetch error: 404 Not Found
Instantiating http://localhost:8080/ui/js-cookie
Loading http://localhost:8080/ui/src/auth/userStore.tsx
Loading src/app.tsx
at fetch.js:37
at <anonymous>
What exactly did I wrong in importing js-cookie and how can I fix it?
This problem is normally fixed by using a Task Runner to shift the actual JavaScript file from:
./node_modules/js-cookie/js-cookie.js
To (for example):
./ui/js-cookie.js
(Or a location of your choice)
This is because node_modules is normally FULL of things you wouldn't want to publish to your web server, so you shift the bits you do want to publish into a folder that you will reference at runtime.