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,
}),
],
Related
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 trying to setup webpack in my react.js application based on this starter kit
When I start development server, application is build successfully and I can see a list of chunks generated, but then application doesn't load and I got an error in console indicating that chunks were not found.
My webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const Dotenv = require('dotenv-webpack');
const SRC_DIR = path.join(__dirname, '/src');
const PUB_DIR = path.join(__dirname, '/public');
const DIST_DIR = path.join(__dirname, '/dist');
module.exports = {
entry: { main: `${SRC_DIR}/index.js` },
output: {
path: DIST_DIR,
chunkFilename: '[chunkhash].chunk.js',
},
resolve: {
alias: {
src: path.resolve(__dirname, 'src/')
}
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader', 'source-map-loader'],
},
{
test: /\.(png|jpg)$/,
use: {
loader: 'url-loader',
},
},
{
test: /\.scss$/,
use: [
'style-loader',
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
],
},
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true
},
},
{ loader: 'sass-loader' }
]
}
],
},
optimization: {
splitChunks: {
cacheGroups: {
css: {
test: /\.(css|sass|scss)$/,
name: 'commons',
chunks: 'all',
minChunks: 2,
enforce: true,
},
},
},
},
plugins: [
new CleanWebpackPlugin({
cleanAfterEveryBuildPatterns: ['dist'],
}),
new MiniCssExtractPlugin({
filename: 'style.[contenthash].css',
}),
new HtmlWebpackPlugin({
inject: true,
title: 'React-Redux-Webpack-Starter-Kit',
template: `${PUB_DIR}/index.html`,
filename: 'index.html',
favicon: `${PUB_DIR}/favicon.ico`,
meta: {
viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no',
},
}),
new WebpackMd5Hash(),
new Dotenv(),
],
devServer: {
port: 3003,
historyApiFallback: true,
},
};
My packate.json
{
"name": "FillRX",
"author": "Zoran Jeremic",
"email": "zoran.jeremic#gmail.com",
"licence": "UNLICENSED",
"version": "1.0.0",
"private": true,
"scripts": {
"lint": "eslint ./src",
"start": "webpack-dev-server --open --mode development --watch",
"prod": "webpack --mode production",
"build": "cross-env NODE_ENV=production && npm run prod",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"browserslist": {
"production": [
">0.2%",
"ie 11",
"not dead",
"not op_mini all"
],
"development": [
"ie 11",
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"dependencies": {
"#date-io/core": "^2.5.0",
"#date-io/moment": "^1.3.13",
"#fullcalendar/core": "^4.4.0",
"#fullcalendar/daygrid": "^4.4.0",
"#fullcalendar/interaction": "^4.4.0",
"#fullcalendar/list": "^4.4.0",
"#fullcalendar/react": "^4.4.0",
"#fullcalendar/timegrid": "^4.4.0",
"#fullcalendar/timeline": "^4.4.0",
"#material-ui/core": "^4.9.9",
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.48",
"#material-ui/pickers": "^3.2.10",
"#material-ui/styles": "^4.9.6",
"#mdx-js/react": "^1.5.8",
"#react-pdf/renderer": "^1.6.8",
"#redux-saga/core": "^1.1.3",
"apexcharts": "^3.18.0",
"axios": "^0.19.2",
"axios-mock-adapter": "^1.17.0",
"babel-loader": "^8.1.0",
"change-case": "^4.1.1",
"chart.js": "^2.9.3",
"clsx": "^1.1.0",
"css-loader": "^4.2.1",
"dotenv-webpack": "^2.0.0",
"draft-js": "^0.11.5",
"formik": "^2.1.4",
"history": "^4.10.1",
"immer": "^6.0.3",
"immutable": "^4.0.0-rc.12",
"js-cookie": "^2.2.1",
"jsonwebtoken": "^8.5.1",
"jss": "^10.1.1",
"jss-rtl": "^0.3.0",
"jwt-decode": "^2.2.0",
"lodash": "^4.17.19",
"moment": "^2.24.0",
"nan": "^2.14.1",
"node-sass": "^4.14.1",
"notistack": "^0.9.9",
"nprogress": "^0.2.0",
"prismjs": "^1.20.0",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-apexcharts": "^1.3.7",
"react-app-polyfill": "^1.0.6",
"react-beautiful-dnd": "^13.0.0",
"react-big-calendar": "^0.24.1",
"react-chartjs-2": "^2.9.0",
"react-dom": "^16.13.1",
"react-draft-wysiwyg": "^1.14.4",
"react-dropzone": "^10.2.2",
"react-feather": "^2.0.3",
"react-helmet": "^5.2.1",
"react-markdown": "^4.3.1",
"react-modal-image": "^2.5.0",
"react-perfect-scrollbar": "^1.5.8",
"react-quill": "^1.3.5",
"react-redux": "^7.2.0",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-scripts": "^3.4.1",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-form": "^8.3.2",
"redux-logger": "^3.0.6",
"redux-persist": "^6.0.0",
"redux-saga": "^1.1.3",
"redux-thunk": "^2.3.0",
"sass-loader": "^9.0.3",
"socket.io-client": "^2.3.0",
"source-map-loader": "^1.0.1",
"uuid": "^7.0.3",
"webpack-dev-server": "^3.11.0",
"webpack-md5-hash": "^0.0.6",
"yup": "^0.28.3"
},
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"dotenv": "^8.2.0",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.1.0",
"eslint-config-prettier": "^6.10.1",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-mdx": "^1.6.8",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.19.0",
"eslint-plugin-react-hooks": "^2.5.1",
"html-webpack-plugin": "^4.3.0",
"mdx-loader": "^3.0.2",
"mini-css-extract-plugin": "^0.9.0",
"prettier": "^1.19.1",
"typescript": "^3.8.3",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
}
}
This is the error I'm getting in console:
All these chunks that are not found are generated during the application build, but I guess my configuration can't find it:
I didn't use webpack earlier so I'm not sure how to investigate this problem since error doesn't indicate what could be the problem, and google search gave me results indicating network problem which I don't think is the case here.
I would appreciate any help and suggestion.
The following configuration to the webpack should help :
{
path: DIST_DIR,
chunkFilename: "[chunkhash].chunk.js",
publicPath: "/",
}
Read more about this configutation here https://webpack.js.org/configuration/output/#outputpublicpath
Thanks
I'm currently working on creating an npm package. Which is basically a React component with added styles using SCSS. When I test it out, the class names are there, but no styles are being applied.
Here is the repo for the package. I use a separated webpack config for building the specific folder where the component is.
Here's the webpack configuration I'm using:
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const EsLintFormatter = require('eslint-formatter-pretty');
const path = require('path');
const pkg = require('../../package.json');
const { SRC_PATH, BUILD_PATH } = require('./constants');
const setStyleLoaders = require('./style-loaders');
const alias = require('./alias');
const packageName = pkg.name;
module.exports = ({ NODE_ENV }) => ({
mode: 'production',
entry: `${SRC_PATH}/components/Carousel/Carousel.js`,
output: {
path: BUILD_PATH,
filename: 'index.js',
library: packageName,
libraryTarget: 'commonjs2',
umdNamedDefine: true,
publicPath: '/build/',
},
node: {
net: 'empty',
tls: 'empty',
dns: 'empty',
},
resolve: {
alias: {
...alias,
react: path.resolve(__dirname, './node_modules/react'),
'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
},
},
externals: {
react: 'react',
reactDom: 'react-dom',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: [
{ loader: 'babel-loader' },
{
loader: 'eslint-loader',
options: {
formatter: EsLintFormatter,
},
},
],
},
{
test: /\.(sa|sc|c)ss$/,
use: setStyleLoaders(NODE_ENV),
},
{
test: /\.(png|pje?g|gif|svg)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'images',
},
},
],
},
{
test: /\.(woff|woff2|tff|otf|eot)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'fonts',
},
},
],
},
],
},
plugins: [
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({ filename: 'index.css' }),
],
});
...and here's my package.json
{
"name": "react-clear-carousel",
"version": "0.1.0-beta.1",
"description": "A test",
"main": "build/index.js",
"scripts": {
"start": "cross-env NODE_ENV=development webpack-dev-server --env.NODE_ENV=development --config config/webpack/webpack.config.js",
"build": "cross-env NODE_ENV=production webpack --env.NODE_ENV=production --config config/webpack/webpack.config.publish.js",
"stylelint": "stylelint 'src/**/*.scss' --config stylelint.config.js; exit 0",
"eslint": "eslint 'src/**/*.js'; exit 0",
"es:fix": "eslint 'src/**/*.js' --fix",
"style:fix": "stylelint 'src/**/*.scss' --fix",
"lint": "npm run eslint && npm run stylelint",
"publish:beta": "npm publish --tag=beta",
"test": "jest"
},
"repository": {
"type": "git",
"url": "git+https://github.com/RobCC/web-playground.git"
},
"author": "robcc",
"license": "ISC",
"bugs": {
"url": "https://github.com/RobCC/web-playground/issues"
},
"files": [
"dist"
],
"jest": {
"setupFilesAfterEnv": [
"<rootDir>/config/jest/setup.js"
],
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/config/jest/fileMock.js",
"\\.(css|less|scss)$": "identity-obj-proxy",
"^~/(.*)": "<rootDir>/$1",
"^#/(.*)": "<rootDir>/src/$1"
}
},
"homepage": "https://github.com/RobCC/web-playground#readme",
"peerDependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1",
"prop-types": "^15.7.2"
},
"devDependencies": {
"#babel/cli": "^7.8.4",
"#babel/core": "^7.9.0",
"#babel/plugin-proposal-class-properties": "^7.8.3",
"#babel/plugin-proposal-export-default-from": "^7.8.3",
"#babel/plugin-proposal-export-namespace-from": "^7.8.3",
"#babel/preset-env": "^7.9.0",
"#babel/preset-react": "^7.9.1",
"#types/jest": "^25.1.4",
"#types/node": "^13.9.2",
"#types/react": "^16.9.25",
"#types/react-dom": "^16.9.5",
"#welldone-software/why-did-you-render": "^4.0.5",
"autoprefixer": "^9.7.4",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.1.0",
"chalk": "^3.0.0",
"clean-webpack-plugin": "^3.0.0",
"core-js": "^3.6.4",
"cross-env": "^7.0.2",
"css-loader": "^3.4.2",
"cssnano": "^4.1.10",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.1.0",
"eslint-formatter-pretty": "^3.0.1",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-loader": "^3.0.3",
"eslint-plugin-import": "^2.20.1",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.19.0",
"eslint-plugin-react-hooks": "^2.5.1",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^3.2.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^25.1.0",
"log-symbols": "^3.0.0",
"mini-css-extract-plugin": "^0.9.0",
"postcss-loader": "^3.0.0",
"pr*op-types": "^15.7.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"regenerator-runtime": "^0.13.5",
"sass": "^1.26.3",
"sass-loader": "^8.0.2",
"style-loader": "^1.1.3",
"stylelint": "^13.2.1",
"stylelint-config-recommended": "^3.0.0",
"stylelint-formatter-pretty": "^2.0.0",
"stylelint-scss": "^3.16.0",
"stylelint-webpack-plugin": "^1.2.3",
"ts-loader": "^6.2.1",
"typescript": "^3.8.3",
"webpack": "^4.42.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
},
"dependencies": {
"weak-key": "^1.0.2"
}
}
This is the result when testing the published package:
Edit 1:
There are no errors on the Network and Console tab in devtools. I also can't find the file loaded, even though it's there in the package. It seems like the js file is not using it, but it should.
Edit 2:
Thanks for pointing me on the right direction!
I added import 'react-clear-carousel/build/index.css'; to include the CSS file from my package. I can see the file now (on devtools), but the styles are not being applied since css-loader is modularizing it and adding additional suffix and prefix (even though it already had them), thus having different class names that the ones my component has.
eg. My component is rendered as <div class="carousel_swimlane--kXSjh">, but the styles in the DOM are named as index_carousel_swimlane--kXSjh--2C.
I guess the question is now, how do I tell Webpack to pass this CSS as is? And if there's a way for me to deliver the CSS file without other people having to change their Webpack configuration.
Looking at your repo I see that you are importing your scss but attributing it's properties to classNames.
className should be the name of the class, and you can either attribute your imported styles to style or you can load your compiled css into the DOM using <link rel="stylesheet" type="text/css" href="styles.min.css">
The reason you're not seeing a stylesheet in the network tab is because you've simply forgotten to declare a stylesheet.
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
I have a VueJS app scaffolded with VueCLI 3 that I would like to deploy. The development version run with npm run serve works fine and everything works perfectly. But when running with npm run build and then serve -s dist I'm getting a plethora of errors. Some of those errors are:
Error: "Unable to find required dependency e"
TypeError: "this.userDataStorage is undefined"
TypeError: "this.user is undefined
Unhandled promise rejection TypeError: "t.auth is undefined"
It's like the dist package generated might be missing something, and I have no clue on what's wrong or what I might be missing. Any help to unblock this issue will be much appreciated. Maybe it could be one dependency (like vue-inject, which I use as IoC framework) could be the culprit?
Here are my packages.json and vue.config.js respectively:
{
"name": "myapp",
"description": "",
"keywords": [],
"version": "0.1.0",
"dependencies": {
"bootstrap": "3.3.2",
"d3": "^5.7.0",
"d3-gantt-chart": "^0.2.8",
"d3-layout-timeline": "^1.0.3",
"d3-transition": "^1.1.1",
"d3plus-text": "^0.9.32",
"foundation-sites": "^6.5.0-rc.3",
"jquery": "^3.3.1",
"jquery-ui": "^1.12.1",
"jwt-decode": "^2.2.0",
"lodash": "^4.17.11",
"tinycolor": "latest",
"underscore": "^1.9.1",
"vue": "^2.5.17",
"vue-formio": "^3.0.1",
"vue-inject": "^2.1.1",
"vue-router": "^3.0.1",
"vue-slider-component": "^2.8.0",
"vuejs-datepicker": "^1.5.3",
"vuex": "^3.1.0",
"what-input": "^5.1.2"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.3.0",
"#vue/cli-plugin-e2e-nightwatch": "^3.3.0",
"#vue/cli-plugin-eslint": "^3.3.0",
"#vue/cli-plugin-unit-jest": "^3.3.0",
"#vue/cli-service": "^3.3.1",
"#vue/eslint-config-prettier": "^4.0.1",
"#vue/test-utils": "^1.0.0-beta.28",
"ajv": "^6.5.3",
"axios": "^0.18.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.6.0",
"babel-runtime": "^6.26.0",
"bootstrap-sass": "^3.3.7",
"css-loader": "^1.0.1",
"eslint": "^5.12.1",
"eslint-config-prettier": "^3.6.0",
"eslint-config-standard": "^12.0.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^2.1.1",
"eslint-plugin-html": "^5.0.0",
"eslint-plugin-import": "^2.15.0",
"eslint-plugin-node": "^8.0.1",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^5.1.0",
"husky": "^1.3.1",
"lint-staged": "^8.1.0",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"script-loader": "^0.7.2",
"stylelint": "^9.10.1",
"stylelint-config-sass-guidelines": "^5.3.0",
"stylelint-config-standard": "^18.2.0",
"vue-drag-drop": "^1.1.4",
"vue-hot-reload-api": "^2.3.0",
"vue-template-compiler": "^2.5.17",
"vue2-dropzone": "^3.5.2"
},
"author": "devops#myapp.io",
"contributors": [],
"license": "Unlicense",
"readmeFilename": "Readme.md",
"repository": {
"type": "git",
"url": ""
},
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:e2e": "vue-cli-service test:e2e",
"test:unit": "vue-cli-service test:unit"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.js": [
"vue-cli-service lint",
"git add"
],
"*.vue": [
"vue-cli-service lint",
"git add"
],
"*.css": [
"stylelint --fix",
"git add"
],
"*.scss": [
"stylelint --syntax=scss",
"git add"
]
}
}
var webpack = require("webpack");
var path = require("path");
module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
jquery: "jquery"
})
],
resolve: {
extensions: [".js", ".vue", ".json"],
alias: {
jquery: "jquery/src/jquery.js",
"jquery-ui": "jquery-ui",
d3: "d3",
modules: path.join(__dirname, "node_modules")
}
}
}
};