I created a vue project via vue cli 3. To structure my code, I made a dir called common where I keep files with .js ext. So, I transferred some code from my .vue file which was in views folder and surprisingly it did not work.
I imported Vue like import Vue from 'vue'; and set a debugger. When I hover over the Vue, it says undefined. I even imported my custom js file to check and same issue there too.
package.json
{
"name": "demo-app",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"axios": "^0.18.0",
"vue": "^2.5.17",
"vue-axios": "^2.1.3",
"vue-cookie": "^1.1.4",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.0.0-rc.12",
"#vue/cli-plugin-eslint": "^3.0.0-rc.12",
"#vue/cli-plugin-unit-mocha": "^3.0.0-rc.12",
"#vue/cli-service": "^3.0.0-rc.12",
"#vue/eslint-config-airbnb": "^3.0.0",
"#vue/test-utils": "^1.0.0-beta.20",
"chai": "^4.1.2",
"vue-template-compiler": "^2.5.17"
}
}
common/apiService.js
import Vue from 'vue';
import { API_URL } from '#/common/config';
import axios from 'axios';
const ApiService = {
init() {
debugger
axios.defaults.baseURL = API_URL;
},
get(resource, slug = '') {
return axios
.get(`${resource}/${slug}`)
.catch((error) => {
throw new Error(`[PTE] ApiService ${error}`);
});
},
post(resource, params) {
debugger
return axios.post(`${resource}`, params);
},
};
export default ApiService;
please note that i have imported Vue but have not used it. Will use it later after i fix this issue.
Related
file: user.service.js
import axios from "axios";
class UserService {
static getAll() {
return axios.get("/user-all");
}
static getById(id) {
return axios.get(`/user/${id}`);
}
}
export default UserService;
file: userApi.spec.js
import UserService from "#/api/user.service.js";
import axios from "axios";
describe("用户模块", () => {
it("获取所有用户数据", async () => {
});
});
the code is error, when i run npm run test:unit.
the error is import axios from './lib/axios.js'.
I think the point is import.
error
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import axios from './lib/axios.js';
^^^^^^
SyntaxError: Cannot use import statement outside a module
i guess the problem is axios in node_modules.
It seems that babel doesn't work.
so what should I do?
even if the jest.config.js is configured like this
jest.config.js
module.exports = {
preset: "#vue/cli-plugin-unit-jest",
transformIgnorePatterns: ["node_modules/(?!(axios)/)"],
};
babel.config.js
module.exports = {
presets: [
"#vue/cli-plugin-babel/preset",
],
};
package.json
{
"name": "01",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.8.3",
"vue": "^3.2.13"
},
"devDependencies": {
"#babel/core": "^7.12.16",
"#babel/eslint-parser": "^7.12.16",
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-eslint": "~5.0.0",
"#vue/cli-plugin-unit-jest": "~5.0.0",
"#vue/cli-service": "~5.0.0",
"#vue/test-utils": "^2.0.0-0",
"#vue/vue3-jest": "^27.0.0-alpha.1",
"babel-jest": "^27.0.6",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^8.0.3",
"jest": "^27.0.5",
"prettier": "^2.4.1"
}
}
code：https://github.com/xiaohun254700/problem-warehouse
Hi I have been stewing over this for the last couple of days. I realise this is a common error with various solutions.
I have the dreaded:
Jest encountered an unexpected token
/__tests__/index.test.js:16
import React from "react";
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1796:14)
I have read a few posts and the docs in next and jest.
package.json:
{
"name": "some-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"test": "jest --watch"
},
"dependencies": {
"next": "12.1.6",
"react": "18.1.0",
"react-dom": "18.1.0"
},
"devDependencies": {
"#babel/plugin-syntax-jsx": "^7.17.12",
"#babel/preset-env": "^7.18.2",
"#babel/preset-react": "^7.17.12",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#types/jest": "^28.1.3",
"#types/node-fetch": "^2.6.2",
"babel-jest": "^28.1.1",
"eslint": "8.16.0",
"eslint-config-next": "12.1.6",
"identity-obj-proxy": "^3.0.0",
"jest": "^28.1.1",
"jest-environment-jsdom": "^28.1.1",
"node-fetch": "^3.2.6",
"ts-jest": "^28.0.5",
"typescript": "^4.7.4"
},
"description": "This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).",
"main": "jest.config.js",
"repository": {
"type": "git",
},
"author": "",
"license": "ISC",
"bugs": {
},
}
index.test.js:
import { render, screen } from '#testing-library/react'
import Home from '../pages/index'
import '#testing-library/jest-dom'
import React from "react";
describe('Home', () => {
it('renders a h', () => {
render(<Home />)
const link = screen.getByRole('link', {
name: "Library",
})
expect(link).toHaveAttribute('href', '/storage-area')
})
});
jest.config.js:
module.exports = {
collectCoverage: true,
// on node 14.x coverage provider v8 offers good speed and more or less good report
coverageProvider: 'v8',
collectCoverageFrom: [
'**/*.{js,jsx,ts,tsx}',
'!**/*.d.ts',
'!**/node_modules/**',
'!<rootDir>/out/**',
'!<rootDir>/.next/**',
'!<rootDir>/*.config.js',
'!<rootDir>/coverage/**',
],
moduleNameMapper: {
// Handle CSS imports (with CSS modules)
// https://jestjs.io/docs/webpack#mocking-css-modules
'^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
// Handle CSS imports (without CSS modules)
'^.+\\.(css|sass|scss)$': '<rootDir>/__mocks__/styleMock.js',
// Handle image imports
// https://jestjs.io/docs/webpack#handling-static-assets
'^.+\\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i': `<rootDir>/__mocks__/fileMock.js`,
// Handle module aliases
'^#/components/(.*)$': '<rootDir>/components/$1',
},
// Add more setup options before each test is run
setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/.next/'],
testEnvironment: 'jsdom',
transform: {
// Use babel-jest to transpile tests with the next/babel preset
// https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object
'^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel', '#babel/preset-react',"#babel/preset-env" ]}],
},
transformIgnorePatterns: [
'/node_modules/',
'^.+\\.module\\.(css|sass|scss)$',
],
}
As I mentioned in the title the it seems that the error message suggests that the import is added by Next.js to the end of the index.test.js.
This was a problem due to the tests folder being nested in the directory above the root directory of the project. By the time I figured this out I had manipulated the jest.config.js transform: presets array property to contain imports that it didn't require in the standard jest/next setup.
This error appears when I try to load an image using gatsby-image inside my gatsby project using static query. To give you some context, I made a monorepo with multiple gatsby websites altogether and reusing shared components. The hierarchy of folders is:
packages
shared-ui
images
lightlogo.png
components
lightlogo.js
index.js
ventures
src
pages
404.js
The index.js file exports the lightlogo component for the page to access it.
The code of the index.js is as follow:
export { default as LightLogo } from "./components/lightlogo"
And the code of the component is:
import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"
const LightLogo = ({ style }) => {
const { data } = useStaticQuery(graphql`
query {
lightlogo: file(relativePath: { eq: "light_logo.png" }) {
childImageSharp {
fluid(maxWidth: 78) {
...GatsbyImageSharpFluid_withWebp
}
}
}
}
`)
return <Img style={style}
fluid={data.lightlogo.childImageSharp.fluid} alt="Light HAG Logo"
/>
}
export default LightLogo
The code of the 404 page is:
import React from "react"
import { LightLogo } from "../../../shared-ui"
const NotFoundPage = () => (
<div>
<LightLogo />
<h1>NOT FOUND</h1>
<p>You just hit a route that doesn't exist... the sadness.</p>
</div>
)
export default NotFoundPage
The gatsby config in the ventures folder is as follow:
module.exports = {
plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `../shared-ui/images`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sitemap`,
`gatsby-plugin-sass`,
`gatsby-plugin-styled-components`,
{
resolve: `gatsby-plugin-sharp`,
options: {
useMozJpeg: false,
stripMetadata: true,
defaultQuality: 75,
},
},
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `HAG Ventures`,
short_name: `HAG`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `../shared-ui/images/light_logo.png`, // This path is relative to the root of the site.
},
},
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
],
}
My package.json is:
{
"name": "#lerna-monorepo/ventures",
"description": "A simple starter to get up and developing quickly with Gatsby",
"version": "0.1.0",
"author": "Kyle Mathews <mathews.kyle#gmail.com>",
"dependencies": {
"#lerna-monorepo/shared-ui": "^1.0.0",
"#fortawesome/fontawesome-svg-core": "^1.2.30",
"#fortawesome/free-brands-svg-icons": "^5.14.0",
"#fortawesome/free-regular-svg-icons": "^5.14.0",
"#fortawesome/free-solid-svg-icons": "^5.14.0",
"#fortawesome/react-fontawesome": "^0.1.11",
"babel-plugin-styled-components": "^1.10.7",
"bootstrap": "^4.4.1",
"framer-motion": "^1.8.4",
"gatsby": "2.23.3",
"gatsby-background-image": "^0.10.2",
"gatsby-cli": "^2.14.1",
"gatsby-image": "^2.2.38",
"gatsby-plugin-manifest": "^2.2.31",
"gatsby-plugin-offline": "^3.0.27",
"gatsby-plugin-react-helmet": "^3.1.21",
"gatsby-plugin-robots-txt": "^1.5.0",
"gatsby-plugin-sass": "^2.2.1",
"gatsby-plugin-sharp": "^2.3.5",
"gatsby-plugin-sitemap": "^2.2.26",
"gatsby-plugin-styled-components": "^3.2.1",
"gatsby-source-filesystem": "^2.2.2",
"gatsby-source-rss-feed": "^1.2.2",
"gatsby-transformer-sharp": "^2.3.7",
"gsap": "^3.5.1",
"lottie-player": "^1.0.0",
"lottie-react": "^2.1.0",
"lottie-web": "^5.7.4",
"node-sass": "^4.13.1",
"popper.js": "^1.16.1",
"prop-types": "^15.7.2",
"react": "^16.14.0",
"react-bootstrap": "^1.0.0",
"react-dom": "^16.14.0",
"react-helmet": "^5.2.1",
"react-hot-loader": "^4.13.0",
"react-lazyload": "^3.1.0",
"react-slick": "^0.27.10",
"react-waypoint": "^9.0.3",
"scrollmagic": "^2.0.7",
"scrollmagic-plugin-gsap": "^1.0.4",
"slick-carousel": "^1.8.1",
"styled-components": "^5.1.0",
"uninstall": "0.0.0"
},
"devDependencies": {
"prettier": "^1.19.1"
},
"keywords": [
"gatsby"
],
"license": "MIT",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,json,md}\"",
"start": "npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/gatsbyjs/gatsby-starter-default"
},
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
}
}
I tried to reinstall all packages using yarn and it didn't work. When I query the image in the GraphiQl, the query successfully fetches the file.
If the root of your Gatsby application is packages/ventures then Gatsby will not extract GraphQL queries from packages/shared-ui, even if you import them. This is because Gatsby uses static analysis to extract GraphQL queries before the code is parsed and evaluated, replacing the query with an identifier that refers to the resulting data for the query.
The way you would typically do something like this is as a Gatsby Theme, which provide a mechanism for sharing code that gets treated largely like local components with some additional hooks and replacement capabilities.
Alternately, you might have some luck using the Node APIs to hook into the build process and copy files around (e.g. parsing the query out of the shared-ui component and rewriting it into the ventures folder onPreBootstrap), but it's going to be an uphill battle.
I am working on exporting my custom vue component as NPM module. I have followed steps mentioned in the official doc Packaging Vue Components for npm.
My index.js AKA wrapper.js file:
// index.js -> wrapper.js
// Import vue component
import component from "./components/VueOpenapiForm.vue";
import ExtendSchema from "./functional-components/extend-schema.js";
// global components
import ObjectForm from "./components/ObjectForm.vue";
import ArrayInput from "./components/ArrayInput.vue";
import KeyValuePairs from "./components/KeyValuePairs.vue";
import SimpleInput from "./components/SimpleInput.vue";
// export ExtendSchema
export const extendSchema = ExtendSchema;
// Declare install function executed by Vue.use()
export function install(Vue) {
if (install.installed) return;
install.installed = true;
Vue.component("VueOpenapiForm", component);
Vue.component("object-form", ObjectForm);
Vue.component("array-input", ArrayInput);
Vue.component("key-value-pairs", KeyValuePairs);
Vue.component("simple-input", SimpleInput);
}
// Create module definition for Vue.use()
const plugin = {
install
};
// Auto-install when vue is found (eg. in browser via <script> tag)
let GlobalVue = null;
if (typeof window !== "undefined") {
GlobalVue = window.Vue;
} else if (typeof global !== "undefined") {
GlobalVue = global.Vue;
}
if (GlobalVue) {
GlobalVue.use(plugin);
}
// To allow use as module (npm/webpack/etc.) export component
export default component;
rollup.config.js file:
// rollup.config.js
import babel from "rollup-plugin-babel";
import resolve from "#rollup/plugin-node-resolve";
import commonjs from "rollup-plugin-commonjs"; // Convert CommonJS modules to ES6
import vue from "rollup-plugin-vue"; // Handle .vue SFC files
import buble from "#rollup/plugin-buble"; // Transpile/polyfill with reasonable browser support
export default {
input: "src/index.js", // Path relative to package.json
output: {
name: "VueOpenapiForm",
exports: "named"
},
plugins: [
resolve(),
commonjs({
namedExports: {
// left-hand side can be an absolute path, a path
// relative to the current directory, or the name
// of a module in node_modules
"vue-codemirror": ["codemirror"]
}
}),
babel({
runtimeHelpers: true,
exclude: "node_modules/**",
plugins: [
"#babel/plugin-external-helpers",
"#babel/plugin-transform-runtime"
]
}),
vue({
css: true, // Dynamically inject css as a <style> tag
compileTemplate: true // Explicitly convert template to render function,
}),
buble() // Transpile to ES5
]
};
package.json
{
"name": "#appscode/vue-openapi-form",
"version": "0.1.0",
"main": "dist/vue-openapi-form.umd.js",
"module": "dist/vue-openapi-form.esm.js",
"unpkg": "dist/vue-openapi-form.min.js",
"browser": {
"./sfc": "src/vue-openapi-form.vue"
},
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"pkg": "npm run pkg:umd & npm run pkg:es & npm run pkg:unpkg",
"pkg:umd": "rollup --config pkg/rollup.config.js --format umd --file dist/vue-openapi-form.umd.js",
"pkg:es": "rollup --config pkg/rollup.config.js --format es --file dist/vue-openapi-form.es.js",
"pkg:unpkg": "rollup --config pkg/rollup.config.js --format iife --file dist/vue-openapi-form.min.js"
},
"dependencies": {
"#babel/runtime": "^7.7.7",
"bulma": "^0.8.0",
"bulma-switch": "^2.0.0",
"core-js": "^3.3.2",
"font-awesome": "^4.7.0",
"vee-validate": "^3.1.3",
"vue": "^2.6.10",
"vue-codemirror": "^4.0.6",
"vuex": "^3.0.1"
},
"devDependencies": {
"#babel/plugin-external-helpers": "^7.7.4",
"#babel/plugin-transform-runtime": "^7.7.6",
"#rollup/plugin-buble": "^0.20.0",
"#rollup/plugin-node-resolve": "^6.0.0",
"#vue/cli-plugin-babel": "^4.0.0",
"#vue/cli-plugin-eslint": "^4.0.0",
"#vue/cli-service": "^4.0.0",
"#vue/eslint-config-prettier": "^5.0.0",
"babel-cli": "^6.26.0",
"babel-eslint": "^10.0.3",
"eslint": "^5.16.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-vue": "^5.0.0",
"node-sass": "^4.12.0",
"prettier": "^1.18.2",
"rollup": "^1.17.0",
"rollup-plugin-babel": "^4.3.3",
"rollup-plugin-commonjs": "^10.0.1",
"rollup-plugin-uglify-es": "0.0.1",
"rollup-plugin-vue": "^5.0.1",
"sass-loader": "^8.0.0",
"vue-template-compiler": "^2.6.10"
},
"description": "A Vue component to generate html form using OpenAPI v3 schema",
"repository": {
"type": "git",
"url": "git+https://github.com/appscode/vue-openapi-form.git"
},
"keywords": [
"json-schema",
"vue",
"openapi",
"kubernetes"
],
"author": "support#appscode.com",
"license": "Apache-2.0",
"bugs": {
"url": "https://github.com/appscode/vue-openapi-form/issues"
},
"homepage": "https://github.com/appscode/vue-openapi-form#readme"
}
When I run npm run pkg rollup bundles the component and produces 3 files in the dist folder.
vue-openapi-form.es.js
vue-openapi-form.min.js
vue-openapi-form.umd.js
Now, I am trying import this bundled component inside a different Vue project. In the new project in main.js file:
// main.js
...
import VueOpenapiForm from "#appscode/vue-openapi-form"
Vue.use(VueOpenapiForm)
...
Now, when I try to use vue-openapi-form as html tag inside vue template. I have the following error
[Vue warn]: Unknown custom element: <vue-openapi-form> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <App> at src/App.vue
Can anyone tell me what am I doing wrong here ?
I need all those components to be declared globally as they are recursive. The install function does just that but it is not being called when I use Vue.use. How can I solve this ?
I'm working on a Vue/Vuetify project for quite some time now. It all worked fine until yesterday. I had problems with using the <v-simple-table> vuetify component, so I decided to run npm install and re-install vuetify: bad idea.
The problem is that I get the following error multiple times when running npm run serve:
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.
- options has an unknown property 'indentedSyntax'. These properties are valid:
object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
at validate (C:\Users\Jeroen\Documents\favourite_xi\node_modules\sass-loader\node_modules\schema-utils\dist\validate.js:49:11)
at Object.loader (C:\Users\Jeroen\Documents\favourite_xi\node_modules\sass-loader\dist\index.js:36:28)
# ./node_modules/vuetify/src/components/VCalendar/mixins/calendar-with-events.sass 4:14-225 14:3-18:5 15:22-233
# ./node_modules/vuetify/lib/components/VCalendar/mixins/calendar-with-events.js
# ./node_modules/vuetify/lib/components/VCalendar/VCalendar.js
# ./node_modules/vuetify/lib/components/VCalendar/index.js
# ./node_modules/vuetify/lib/components/index.js
# ./node_modules/vuetify/lib/index.js
# ./src/main.js
# multi (webpack)-dev-server/client?http://192.168.178.115:8080/sockjs-node ./node_modules/#vue/cli-service/node_modules/webpack/hot/dev-server.js ./src/main.js
My main.js file:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Vuetify from 'vuetify/lib'
import 'vuetify/dist/vuetify.min.css'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)
Vue.use(Vuetify, {
theme: {
"primary": "#FFCA28",
"secondary": "#1976D2",
"accent": "#82B1FF",
"error": "#FF5252",
"info": "#2196F3",
"success": "#4CAF50",
"warning": "#FB8C00"
}
})
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
I've already looked at multiple posts and they all advise to run npm rebuild node-sass (both regularly as in admin-mode), delete the node-modules folder, re-install sass-loader, but nothing worked so far.
Is there something wrong in my main.js maybe?
Thanks in advance! Let me know if I need to post more of my code or additional information.
Edit: added package.json
{
"name": "favourite_xi",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"bootstrap": "^4.3.1",
"bootstrap-vue": "^2.0.0-rc.22",
"core-js": "^2.6.5",
"node-sass": "^4.12.0",
"stylus": "^0.54.7",
"stylus-loader": "^3.0.2",
"uuid": "^3.3.3",
"vue": "^2.6.10",
"vue-cool-select": "^2.10.2",
"vue-flip": "^0.3.0",
"vue-responsive-text": "^0.1.4",
"vue-router": "^3.0.3",
"vuetify": "^2.0.16",
"vuex": "^3.1.1"
},
"devDependencies": {
"#fortawesome/fontawesome-free": "^5.10.1",
"#vue/cli-plugin-babel": "^3.8.0",
"#vue/cli-plugin-eslint": "^3.8.0",
"#vue/cli-service": "^3.8.0",
"#vue/eslint-config-standard": "^4.0.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"sass-loader": "^8.0.0",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.39.3"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"#vue/standard"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
This could be result of upgrading sass-loader from v7.x to v8.x
As stated in release notes, they'v made significant changes to configuration
Check your vue.config.js - if you find something like this:
module.exports = {
css: {
loaderOptions: {
sass: {
....some options here...
}
}
}
}
change it to:
module.exports = {
css: {
loaderOptions: {
sass: {
sassOptions: {
....some options here...
}
}
}
}
}
I am not sure if it's of any use but my npm run build errors at the color codes in theme. When I comment out the color code lines it builds without error:
Vue.use(Vuetify, {
theme: {
"primary": "#FFCA28",
"secondary": "#1976D2",
"accent": "#82B1FF",
"error": "#FF5252",
"info": "#2196F3",
"success": "#4CAF50",
"warning": "#FB8C00"
}
})