i used the default vue-cli command to create a vue project.
When webpack is building, it fails, as shown in the image:
I am not using any special webpack configuration. What am i doing wrong?
My package.json:
{
"name": "myapp",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.4.4",
"firebase": "^7.6.2",
"register-service-worker": "^1.6.2",
"vue": "^2.6.10",
"vue-router": "^3.1.3",
"vuex": "^3.1.2"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.1.0",
"#vue/cli-plugin-eslint": "^4.1.0",
"#vue/cli-plugin-pwa": "^4.1.0",
"#vue/cli-plugin-router": "^4.1.0",
"#vue/cli-plugin-vuex": "^4.1.0",
"#vue/cli-service": "^4.1.0",
"babel-eslint": "^10.0.3",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"node-sass": "^4.12.0",
"sass-loader": "^8.0.0",
"vue-template-compiler": "^2.6.10"
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
You can force ESLint to always emit just warnings instead of errors by webpack configuration. That will not stop your build as you expect. You need to set emitWarning option to true in your webpack.config.js file.
eg.
module.exports = {
module: {
rules: [
{
test: /\.vue$/,
exclude: /node_modules/,
loader: "eslint-loader",
options: {
emitWarning: true
}
}
]
}
};
You can read more in the documentation https://github.com/webpack-contrib/eslint-loader#errors-and-warning
i guess with the new eslint/webpack stuff, this is default behaviour.
So this is my workaround in my .lintrc.js file:
'no-console': process.env.NODE_ENV === 'production' ? 2 : 1
NoEmitOnErrorsPlugin is now automatically enabled in webpack 4, when mode is either unset, or set to production. So even ESLint warnings will fail the build. No matter what error settings are used for eslint-loader, except if emitWarning enabled.
https://webpack.js.org/loaders/eslint-loader/#noemitonerrorsplugin
Related
I'm new to bpmn-js and try to import and use a .bpmn file in a vue.js component (BPMNViewer.vue). My research only brought up to use the raw-loader. So I'm kind of at a loss here.
<script>
import demo from './examples/demo.bpmn'
...
export default {
data() {
return {
xmlData: demo,
};
}
}
This results in the following Error:
error in ./src/views/BPMNViewer.vue?vue&type=script&lang=js&
Module not found: Error: Can't resolve './examples/demo.bpmn' in '/bpmn-test/src/views'
ERROR in ./src/views/BPMNViewer.vue?vue&type=script&lang=js& (./node_modules/#vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/BPMNViewer.vue?vue&type=script&lang=js&) 12:0-39
Module not found: Error: Can't resolve './examples/demo.bpmn' in '/bpmn-test/src/views'
# ./src/views/BPMNViewer.vue?vue&type=script&lang=js& 1:0-134 1:150-153 1:155-286 1:155-286
# ./src/views/BPMNViewer.vue 2:0-62 3:0-57 3:0-57 10:2-8
# ./src/router/index.js 3:0-48 12:15-25
# ./src/main.js 3:0-29 9:2-8
webpack compiled with 1 error
I try to integrate the raw-loader in my vue.config.js:
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
chainWebpack: config => {
config.module
.rule("bpmn")
.test(/\.bpmn$/)
.use("raw-loader")
.loader("raw-loader")
.end();
}
})
My package.json:
{
"name": "bpmn-test",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e",
"lint": "vue-cli-service lint"
},
"dependencies": {
"bpmn-js": "^7.3.1",
"bpmn-js-cli": "^2.0.0",
"bpmn-js-properties-panel": "^0.37.2",
"camunda-bpmn-moddle": "^4.4.0",
"diagram-js-minimap": "^2.0.3",
"inherits": "^2.0.4",
"core-js": "^3.8.3",
"vue": "^2.6.14",
"vue-router": "^3.5.1",
"vuex": "^3.6.2"
},
"devDependencies": {
"#babel/core": "^7.12.16",
"#babel/eslint-parser": "^7.12.16",
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-e2e-cypress": "~5.0.0",
"#vue/cli-plugin-eslint": "~5.0.0",
"#vue/cli-plugin-router": "~5.0.0",
"#vue/cli-plugin-unit-jest": "~5.0.0",
"#vue/cli-plugin-vuex": "~5.0.0",
"#vue/cli-service": "~5.0.0",
"#vue/test-utils": "^1.1.3",
"#vue/vue2-jest": "^27.0.0-alpha.2",
"babel-jest": "^27.0.6",
"cypress": "^8.3.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"jest": "^27.0.5",
"less": "^3.0.4",
"less-loader": "^5.0.0",
"raw-loader": "^3.1.0",
"vue-template-compiler": "^2.6.14"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "#babel/eslint-parser"
},
"rules": {},
"overrides": [
{
"files": [
"**/__tests__/*.{j,t}s?(x)",
"**/tests/unit/**/*.spec.{j,t}s?(x)"
],
"env": {
"jest": true
}
}
]
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
],
"jest": {
"preset": "#vue/cli-plugin-unit-jest"
}
}
Seems like I miss something here. Please let me know if I need to provide more information.
This looks like nothing Bpmn-js specific. Can you first ensure that the raw XML is indeed available in your xmlData object?
Your webpack may not be configured to use the raw-loader or not to use it for for the .bpmn extension. An inline solution would be
ìmport demo from 'raw-loader!./examples/demo.bpmn'
(if you don't have the raw-loader yet:
npm install raw-loader --save-dev)
I just fixed 5 high npm severity vulnerabilities, subsequently I ran into several errors from babel and eslint conflicts. I am running:
node 16.14.0
#vue/cli 4.5.9
Based on previous errors , I had to remove node-sass and switch to dart sass (sass 1.50.0), and changed babel-eslint to #babel/eslint-parser 7.5.4. Now the only error is: Error: .presets[0] must be a string, object, function
The offending files are all my config files for babel, vue and jest. Is there a different dependency I need to add to have compatibility? I followed these posts which helped fix other errors along the way, eslint, this, sass loader error, and this eslint is not constructor. This seems to be a commonjs issue as seen in the screenshot. Is this an eslint error or a babel error?
I went to the source of the error in
#babel/core/lib/config/validation/option-assertions and there is this:
function assertPluginTarget(loc, value) {
if ((typeof value !== "object" || !value) && typeof value !==
"string" && typeof value !== "function") {
throw new Error(`${msg(loc)} must be a string, object,
function`);
}
return value;
}
I have no idea what to do with this?
package.json
{
"name": "cookie_mvp_next",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:5000",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test": "vue-cli-service test:unit --watch",
"test:e2e": "vue-cli-service test:e2e",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#babel/core": "^7.17.9",
"#fortawesome/fontawesome-free": "^5.15.4",
"#fortawesome/fontawesome-svg-core": "^1.2.36",
"#fortawesome/free-brands-svg-icons": "^5.15.4",
"#fortawesome/free-solid-svg-icons": "^5.15.4",
"#fortawesome/vue-fontawesome": "^2.0.6",
"#googlemaps/js-api-loader": "github:googlemaps/js-api-loader",
"#stripe/stripe-js": "^1.17.1",
"axios": "^0.21.1",
"base-64": "^1.0.0",
"core-js": "^3.6.5",
"dotenv": "^8.2.0",
"html-webpack-plugin": "^5.5.0",
"jwt-decode": "^3.1.2",
"nanoid": "^3.1.20",
"register-service-worker": "^1.7.1",
"stripe": "^8.174.0",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuelidate": "^0.7.6",
"vuex": "^3.4.0"
},
"devDependencies": {
"#babel/eslint-parser": "^7.5.4",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-e2e-cypress": "^5.0.4",
"#vue/cli-plugin-eslint": "^5.0.4",
"#vue/cli-plugin-pwa": "~5.0.4",
"#vue/cli-plugin-router": "~4.5.0",
"#vue/cli-plugin-unit-jest": "^5.0.4",
"#vue/cli-plugin-vuex": "~4.5.0",
"#vue/cli-service": "^5.0.4",
"#vue/eslint-config-prettier": "^6.0.0",
"#vue/test-utils": "^1.1.2",
"eslint": "^8.12.0",
"eslint-config-prettier": "^7.2.0",
"eslint-loader": "^4.0.2",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^8.6.0",
"flush-promises": "^1.0.2",
"prettier": "^1.19.1",
"sass": "^1.50.0",
"sass-loader": "^12.6.0",
"vue-jest": "^3.0.7",
"vue-template-compiler": "^2.6.11"
}
}
babel.config.js
module.exports = {
presets: [
"#vue/cli-plugin-babel/preset"[
("#vue/app",
{
modules: "commonjs"
})
]
]
};
jest.config.js
module.exports = {
preset: "#vue/cli-plugin-unit-jest"
};
vue.config.js
module.exports = {
configureWebpack: {
devtool: "source-map"
},
css: {
loaderOptions: {
scss: {
additionalData: `#import "#/styles/main.scss";`
}
}
},
transpileDependencies: []
};
Your babel.config.js file looks ill-formatted, it should be probably
module.exports = {
presets: [
"#vue/cli-plugin-babel/preset", [
"#vue/app",
{
modules: "commonjs"
}
]
]
};
Note the comma after "#vue/cli-plugin-babel/preset" and the lack of parentheses ( and ).
How to define describe(), it() and expect() in this Case ??
am getting the :
No files found in C:\Users\tarek\Dogalu\dogalu_frontend_v2. Make sure Jest's configuration does not exclude this directory. To set up Jest, make sure a package.json file exists. Jest Documentation: facebook.github.io/jest/docs/configuration.html Files: "C:\Users\tarek\Dogalu\dogalu_frontend_v2\tests\unit\Gridcard.test.js"
[
here is my Jest test, but I only get undefined functions.
I tried almost everything including
npm install --g eslint
npm install --g jest
this is my .eslintrc.js
module.exports = {
root: true,
env: {
node: true
},
extends: [
'plugin:vue/vue3-essential',
'#vue/standard'
],
parserOptions: {
parser: 'babel-eslint'
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
},
overrides: [
{
files: [
'**/__tests__/*.{j,t}s?(x)',
'**/tests/unit/**/*.spec.{j,t}s?(x)'
],
env: {
jest: true
}
}
]
}
this is my package.json
"name": "dogalu_frontend_v2",
"version": "0.1.0",
"private": true,
"engines": {
"node": "16.x",
"npm": "8.x"
},
"scripts": {
"start": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#pixi/filter-kawase-blur": "^4.1.5",
"bootstrap": "^5.1.3",
"bootstrap-icons": "^1.7.2",
"boxicons": "^2.1.1",
"core-js": "^3.6.5",
"debounce": "^1.2.1",
"hsl-to-hex": "^1.0.0",
"pixi.js": "^6.2.0",
"simplex-noise": "^3.0.0",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-router": "~4.5.0",
"#vue/cli-plugin-unit-jest": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0",
"#vue/eslint-config-standard": "^5.1.2",
"#vue/test-utils": "^2.0.0-0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^7.0.0",
"jest": "^25.5.4",
"jest-fetch-mock": "^3.0.3",
"supertest": "^6.1.6",
"typescript": "~3.9.3",
"vue-jest": "^5.0.0-0"
}
}
so How can I define describe(), it() and expect() ??
And thanks in advance
The solution was in naming the class
Gridcard.spec.js instead of Gridcard.test.js
I'm using a Vuetify theme and trying to bundle all the JS code into a single bundle.js, but the code is generating in chunks, here is vue.config.js file
module.exports = {
chainWebpack: config => {
},
configureWebpack: {
devtool: false,
mode: 'production',
entry: './src/main.js',
optimization: {
splitChunks: false,
concatenateModules: true
},
module: {
rules: [
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
],
},
output: {
//path: path.resolve(__dirname, 'dist/assets'),
//outputDir: path.resolve(__dirname, 'dist/private'),
//formats: ['iife'],
filename: 'asset/js/[name].js',
chunkFilename: 'asset/js/[name].js'
}
},
transpileDependencies: ['vuetify']
}
package.json
{
"name": "#vuetify-themes/material-dashboard-pro",
"version": "1.2.1",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"dev": "yarn serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"postversion": "node scripts/postversion.js"
},
"dependencies": {
"vue": "^2.6.11",
"vue-meta": "^2.3.3",
"vue-router": "^3.1.6",
"vuetify": "^2.3.13",
"vuex": "^3.4.0",
"vuex-pathify": "^1.4.1",
"vuex-router-sync": "^5.0.0"
},
"devDependencies": {
"#babel/core": "^7.9.0",
"#vue/cli-plugin-babel": "^4.3.1",
"#vue/cli-plugin-eslint": "^4.3.1",
"#vue/cli-plugin-router": "~4.3.1",
"#vue/cli-plugin-vuex": "~4.4.0",
"#vue/cli-service": "^4.3.1",
"#vue/eslint-config-standard": "^5.1.2",
"#vuetify/vue-cli-plugin-preset-base": "~0.3.2",
"archiver": "^4.0.1",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.1.0",
"compression-webpack-plugin": "^8.0.1",
"deepmerge": "^4.2.2",
"dotenv": "^8.2.0",
"eslint": "^6.8.0",
"eslint-config-standard": "^14.1.1",
"eslint-config-vuetify": "^0.6.0",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.1",
"eslint-plugin-vue": "^6.2.2",
"eslint-plugin-vuetify": "^1.0.0-beta.8",
"lodash": "^4.17.15",
"mini-css-extract-plugin": "^2.2.0",
"open": "^7.0.3",
"sass": "^1.32.13",
"sass-loader": "^8.0.2",
"shelljs": "^0.8.4",
"uglifyjs-webpack-plugin": "^2.2.0",
"vue-chartist": "^2.3.1",
"vue-cli-plugin-vuetify": "^2.0.5",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.4.3",
"webfontloader": "^1.6.28",
"webpack": "^4.46.0"
}
}
Is there any way to bundle all the JS in a single file and CSS in a separate CSS file like style.css
This is what I'm getting right now.
Edit:
The filename is replaced to main.js
filename: 'asset/js/main.js'
It shows this error.
The source can be downloaded from here.
https://drive.google.com/file/d/1nMhgr1uphmS9JQnfIi-pHAK1u8l--15y/view?usp=sharing
Thank you
splitChunks accepts an object, providing a boolean you've disabled merging.
optimization: {
// remove this line.
splitChunks: false,
}
See the docs here if you want to configure it. By default it splits after more than 250kb (should be fine for you).
Try changing concatenateModules to false and remove chunkFilename: 'asset/js/[name].js'
Replace filename with desired value:
filename: 'asset/js/main.js'
then in configureWebpack remove chunkFilename and add:
plugins: [
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1,
}),
],
I tried to use Y.js (Yjs) npm package and it works in npm start but not npm run build because Uglify doesn't support ES6. So I downloaded the release of that package and include it directly. But my reactjs npm run build is still complaining about Uglify.
Creating an optimized production build...
Failed to compile.
static/js/main.3d2ecf94.js from UglifyJs
SyntaxError: Unexpected token: name (YArray) [./src/Pages/Collaborative/y-array/y-array.es6:12,0]
and my webpack.config.js looks like this:
var path = require('path');
module.exports = {
entry: path.join(__dirname, 'public', 'quickstart.js'),
output: {
path: '/',
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ["react", "es2016", "stage-2"]
}
},
{ test: /\.css$/, loader: "style-loader!css-loader" }
]
}
}
How can I disable Uglify in my webpack? Which line determines that it has to Uglify in building process?
Edit:
{
"name": "myCoolApps",
"version": "0.1.0",
"private": true,
"devDependencies": {
"css-loader": "^0.26.1",
"react-scripts": "0.7.0",
"webpack": "^1.13.3"
},
"dependencies": {
"ace": "git+https://github.com/ajaxorg/ace.git#master",
"antd": "^2.7.2",
"axios": "^0.15.3",
"card": "^2.2.1",
"card-react": "^1.2.6",
"chat-template": "0.0.22",
"codemirror": "^5.25.0",
"credit-card-type": "^5.0.1",
"css-loader": "^0.26.1",
"d3": "^4.7.4",
"firechat": "^3.0.1",
"firepad": "^1.4.0",
"flux": "^3.1.0",
"gulp": "^3.9.1",
"gulp-sass": "^3.1.0",
"history": "^1.17.0",
"little-loader": "^0.2.0",
"lodash": "^4.17.4",
"material-ui": "^0.16.6",
"moment": "^2.17.1",
"node-sass": "^4.5.0",
"quill": "^1.2.3",
"rc-calendar": "^7.6.5",
"react": "^15.5.4",
"react-autosuggest": "^7.0.1",
"react-cookie": "^1.0.4",
"react-credit-card": "^0.20.0",
"react-dom": "^15.5.4",
"react-dropzone": "^3.8.0",
"react-event-timeline": "^1.2.2",
"react-infinite": "^0.10.0",
"react-infinite-scroller": "^1.0.7",
"react-list": "^0.8.3",
"react-notification-system": "^0.2.12",
"react-router": "^3.0.0",
"react-tap-event-plugin": "^2.0.1",
"seedrandom": "^2.4.2",
"simplewebrtc": "^2.2.2",
"style-loader": "^0.13.1",
"superagent": "^3.3.1",
"y-array": "^10.0.6",
"y-indexeddb": "^8.1.9",
"y-leveldb": "0.0.1",
"y-map": "^10.0.5",
"y-memory": "^8.0.8",
"y-richtext": "^9.0.8",
"y-text": "^9.3.2",
"y-webrtc": "^8.0.7",
"y-websockets-client": "^8.0.15",
"yjs": "^12.1.7"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Actually yea I think it uses react-script. Is there anything I can do to alter that?
If you look at what npm run build does, it actually runs another script, react-scripts build. Your project is bootstrapped with create-react-app, correct?
As you can see in the package.json, you also have access to a script called eject.
Running npm run eject will allow you to remove the app from the preconfigured workflow ( webpack, babel, etc ) and let you modify the workflow as you see fit.
With access to the configuration files, you can add, for example, the babel uglify plugin.
But be careful, there is a trade-off. As the docs mention
If your project needs more customization, you can "eject" and customize it, but then you will need to maintain this configuration.