Develop Reference

Named exports imported as undefined

I'm writing a library whose exports are a React hook and component. I've added the library to the dependencies of a local app to test it. Unfortunately, the exports from the library are not working as I expected. I'm getting console errors indicating that the export is undefined, which is usually caused by incorrectly importing default vs. named exports, however, I've double checked that I am importing them correctly so I'm not sure what the problem is.
Here is the entry point for the library:
import GoogleLoginButton from './components/google-login-button/google-login-button'
import useGoogleLogin from './hooks/use-google-login'
// These console logs reveal that the component & hook are
// being imported as expected in this file.
console.log(GoogleLoginButton)
console.log(useGoogleLogin)
export { GoogleLoginButton, useGoogleLogin }
Here is the (simplified) app code where I import from the library:
import { GoogleLoginButton } from 'react-google-identity'
import styles from './login-page.module.css'
const LoginPage = props => {
// This console.log indicates that GoogleLoginButton is undefined.
console.log(GoogleLoginButton)
return(
<div className={styles.root}>
<GoogleLoginButton />
</div>
}
export default LoginPage
It seems that export { GoogleLoginButton, useGoogleLogin } is not exporting these as named exports, however, I'm not sure why that would be happening as I think the syntax is correct.
This is my first time writing a standalone library like this in JavaScript so I'm sure it's a rookie mistake but Googling only indicates that the error is caused by misusing default vs. named exports, which I don't believe I'm doing.
ETA package.json for the library:
{
"name": "react-google-identity",
"version": "0.1.0",
"description": "Library to support Sign In With Google in React",
"main": "./dist/main.js",
"repository": "https://github.com/danascheider/react-google-identity.git",
"author": "Dana Scheider <dana.scheider#gmail.com>",
"license": "SEE LICENSE IN LICENSE.md",
"private": false,
"scripts": {
"test": "jest",
"test:watch": "jest --watch",
"lint": "prettier ./src ./__tests__",
"lint:fix": "prettier --write ./src ./__tests__",
"build": "webpack build --entry ../src/sign-in-with-google.js",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"dependencies": {
"classnames": "^2.3.1",
"prop-types": "^15.8.1",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"webpack": "^5.73.0"
},
"devDependencies": {
"#babel/core": "^7.18.5",
"#babel/preset-react": "^7.17.12",
"#storybook/addon-actions": "^6.5.9",
"#storybook/addon-essentials": "^6.5.9",
"#storybook/addon-interactions": "^6.5.9",
"#storybook/addon-links": "^6.5.9",
"#storybook/builder-webpack4": "^6.5.9",
"#storybook/cli": "^6.0.28",
"#storybook/manager-webpack4": "^6.5.9",
"#storybook/react": "^6.5.9",
"#storybook/testing-library": "^0.0.13",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"babel-jest": "^28.1.1",
"babel-loader": "^8.2.5",
"css-loader": "^6.7.1",
"fetch-mock": "^9.11.0",
"jest": "^28.1.1",
"jest-environment-jsdom": "^28.1.1",
"jsdom": "^19.0.0",
"msw": "^0.42.3",
"pre-commit": "^1.2.2",
"prettier": "^2.7.1",
"react-test-renderer": "^18.2.0",
"storybook": "^6.0.28",
"storybook-addon-mock": "^2.4.1",
"storybook-css-modules": "^1.0.7",
"style-loader": "^3.3.1",
"webpack-cli": "^4.10.0"
},
"peerDependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
},
"prettier": {
"semi": false,
"singleQuote": true,
"trailingComma": "es5",
"arrowParens": "avoid",
"jsxSingleQuote": true
},
"bugs": {
"url": "https://github.com/danascheider/react-google-identity/issues"
},
"pre-commit": [
"test",
"lint"
],
"keywords": [
"react",
"reactjs",
"google-login",
"google-signin",
"google-oauth2",
"sign-in-with-google",
"google-oauth"
],
"msw": {
"workerDirectory": "msw"
}
}
Babel config for the library:
module.exports = {
presets: ["#babel/preset-env", "#babel/preset-react"]
}
Webpack config for the library:
module.exports = {
mode: 'development',
context: __dirname + '/src',
entry: __dirname + '/src/sign-in-with-google.js',
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader']
},
{
test: /\.(js|jsx)$/i,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
presets: ['#babel/preset-env', '#babel/preset-react']
}
}
]
},
resolve: {
modules: [__dirname + '/node_modules']
}
}

How to import and use bpmn file in vue component with aid of raw-loader

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)

React tailwind + sass build error - resolve-url-loader: error processing CSS

Hey guys I have build a react app with tailwind and sass application and when ever i try to run build i get an error:
This are the files:
postcss.config.js:
module.exports = {
parser: 'postcss-scss',
plugins: [
require('postcss-import'),
require('tailwindcss/nesting')(require('postcss-nesting')),
require('tailwindcss'),
require('postcss-preset-env')({
features: { 'nesting-rules': false }
}),
require('autoprefixer'),
]
};
package.json:
{
"name": "nessco-catalog",
"version": "0.1.0",
"private": true,
"dependencies": {
"#craco/craco": "^6.4.3",
"#testing-library/jest-dom": "^5.16.2",
"#testing-library/react": "^12.1.3",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.4.0",
"#types/node": "^16.11.25",
"#types/react": "^17.0.39",
"#types/react-dom": "^17.0.11",
"#types/react-helmet": "^6.1.5",
"extract-text-webpack-plugin": "^3.0.2",
"husky": "^7.0.4",
"postcss": "^8.4.6",
"postcss-import": "^14.0.2",
"postcss-nesting": "^10.1.2",
"postcss-preset-env": "^7.4.1",
"postcss-scss": "^4.0.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-helmet": "^6.1.0",
"react-icons": "^4.3.1",
"react-multi-carousel": "^2.8.0",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"resolve-url-loader": "^3.1.4",
"sass": "^1.49.8",
"typescript": "^4.5.5",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "eslint \"**/*.{ts,tsx,js,jsx}\"",
"prepare": "husky install",
"build:css": "postcss src/styles/main.scss -o src/styles/index.scss"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#commitlint/cli": "^16.2.1",
"#commitlint/config-conventional": "^16.2.1",
"#types/react-slick": "^0.23.8",
"#typescript-eslint/eslint-plugin": "^5.12.0",
"#typescript-eslint/parser": "^5.12.0",
"autoprefixer": "^10.4.2",
"eslint": "^8.9.0",
"eslint-plugin-jest": "^26.1.1",
"eslint-plugin-react": "^7.28.0",
"eslint-plugin-react-hooks": "^4.3.0",
"postcss-cli": "^9.1.0",
"prettier": "^2.5.1",
"prettier-eslint": "^13.0.0",
"tailwindcss": "^3.0.23"
}
}
Does it even possible to do this allin one file?
where the sass main file is tailwind imports and then my regular sass content using tailwind utils with apply? becuase on npm start it works awesome... only on th build i have problem.

It's likely due to a feature that your are using from tailwind that isn't being parsed properly via the resolve-url-loader package.
Solution A - Quick & Dirty
Add a dummy placeholder CSS property foo:bar; wherever you are using custom variables in custom tailwind classes. Read more here.
.dashboardCards {
#apply bg-[#fff] hover:bg-[#d8fffe];
}
to
.dashboardCards {
#apply bg-[#fff] hover:bg-[#d8fffe];
foo: bar;
}
Solution B
In our project, the following was causing trouble in the .sass files - using custom colour variables.
.menuItemContainer {
#apply border-[#242424] text-[#a4a6b3];
#apply hover:border-[#5bbfbd] hover:bg-[#2e2e2e] hover:text-[#5bbfbd]
}
So we changed it to standard sass/css way of writing styles.
.menuItemContainer {
border-color: #242424;
color: #a4a6b3;
&:hover {
border-color: #5bbfbd;
color: #5bbfbd;
background: #2e2e2e;
}
}
& voila build is fixed for the time being.

I had a similar problem. My fix was to change the configuration:
tsconfig.json
{
"compilerOptions": {
"module": "es6",
"moduleResolution": "node",
"allowJs": true,
"resolveJsonModule": true,
"target": "es6",
"jsx": "react",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
}
tailwind.config.js
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
colors: {
transparent: 'transparent',
black: '#000',
white: '#fff',
},
},
plugins: [],
};
postcss.config.js
const tailwindcss = require('tailwindcss');
module.exports = {
plugins: [
tailwindcss('./tailwind.config.js'),
require('autoprefixer'),
],
};
package.json
{
"name": "react-typescript-webpack",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"dev": "webpack serve --mode development --progress --hot --config ./webpack.config.development.js",
"build": "webpack --mode production --config ./webpack.config.production.js"
},
"keywords": [
"react",
"typescript",
"webpack",
"scss"
],
"dependencies": {
"autoprefixer": "^10.4.12",
"i18next": "^21.9.2",
"postcss-cli": "^10.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-i18next": "^11.18.6",
"react-router-dom": "^5.3.4",
"tailwindcss": "^3.1.8"
},
"devDependencies": {
"#types/react": "^18.0.15",
"#types/react-dom": "^18.0.6",
"#types/react-router-dom": "^5.3.3",
"clean-webpack-plugin": "^4.0.0",
"copy-webpack-plugin": "^11.0.0",
"css-loader": "^6.7.1",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.0",
"mini-css-extract-plugin": "^2.6.1",
"postcss": "^8.4.14",
"postcss-loader": "^7.0.1",
"postcss-preset-env": "^7.7.2",
"sass": "^1.53.0",
"sass-loader": "^13.0.2",
"style-loader": "^3.3.1",
"terser-webpack-plugin": "^5.3.3",
"ts-loader": "^9.3.1",
"typescript": "^4.7.4",
"webpack": "^5.73.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.3"
}
}
app.scss
.row-square {
.square {
#apply flex h-[60px] w-[60px] md:h-[80px] md:w-[80px] items-center justify-center bg-[#ffffff] active:scale-125 transition duration-200 ease-in hover:bg-[#ffffff];
button {
#apply h-[60px] w-[60px] md:h-[80px] md:w-[80px] border;
}
.player-1 {
#apply bg-blue-100;
}
.player-2 {
#apply bg-yellow-100;
}
.player-3 {
#apply bg-green-100;
}
}
}

I had the same error but I think I fixed it. Please check if you have rgb values in tailwind.config.js. if so, please change them into hex values. From my experience tailwind has some troubles with rgb values. I hope this helps you.

How test JSX Vue component with Jest

I've following component (I simplified code) :
const Comp = Vue.component('Comp', {
render (h) {
// Other stuff ...
return (<div>
<div style={style}>
<div style={{ display : 'inline-block' }} />
</div>
</div>)
},
})
export default Comp
I wrote following unit test :
it('should be initialized', () => {
const addEventListener = spyOn(document, 'addEventListener')
const { vm } = shallowMount(Comp)
expect(addEventListener).toHaveBeenCalledWith('dragend', jasmine.any(Function))
expect(addEventListener).toHaveBeenCalledWith('keypress', jasmine.any(Function))
})
When I run unit tests with Jest, I've an error :
ReferenceError: dom is not defined
> 96 | return (<div>
| ^
97 | <div style={style}>
98 | <div style={{ display : 'inline-block' }} />
99 | </div>
My following babel.config.js file :
module.exports = (api) => {
return {
presets : ['#babel/preset-env', '#vue/babel-preset-jsx'],
plugins : [
'#babel/plugin-syntax-jsx',
['#babel/plugin-transform-react-jsx', { pragma : 'dom' }],
[
'module-resolver', {
root : ['./'],
alias : {
'#' : './src',
'~' : './examples',
},
},
],
],
}
}
And my Jest config file :
module.exports = {
coverageReporters : ['html'],
"transform": {
"^.+\\.[t|j]sx?$": "babel-jest"
},
collectCoverageFrom : [
"src/**/*.{js,jsx}"
],
moduleNameMapper : {
"\\.(css|less|sass|scss)$": "<rootDir>/tests/__mocks__/styleMock.js"
},
moduleFileExtensions : ['js', 'jsx']
}
When I build project with rollup, I've no error, only with jest.
Did i miss something ?
UPDATE
My package.json file :
{
"devDependencies": {
"#babel/core": "^7.1.2",
"#babel/plugin-syntax-jsx": "^7.0.0",
"#babel/plugin-transform-react-jsx": "^7.0.0",
"#babel/preset-env": "^7.1.0",
"#rollup/plugin-alias": "^2.2.0",
"#vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
"#vue/babel-preset-jsx": "^1.1.0",
"#vue/test-utils": "^1.0.0-beta.31",
"babel-core": "^7.0.0-bridge.0",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-jest": "^23.6.0",
"babel-loader": "^8.0.4",
"babel-plugin-module-resolver": "^3.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-vue-jsx": "^3.7.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"codemirror": "^5.48.2",
"css-loader": "^3.2.0",
"docdash": "^1.0.3",
"eslint": "6.1.0",
"eslint-config-standard": "^12.0.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jasmine": "^2.10.1",
"eslint-plugin-node": "^8.0.0",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-standard": "^4.0.0",
"file-loader": "^4.2.0",
"html-loader": "^0.5.5",
"husky": "^3.0.8",
"jest": "^23.6.0",
"jquery": "^3.3.1",
"js-beautify": "^1.10.0",
"jsdoc": "^3.5.5",
"jsx-render": "^1.1.1",
"lint-staged": "^9.4.2",
"node-sass": "^4.13.0",
"rollup": "^1.26.4",
"rollup-plugin-babel": "^4.3.3",
"rollup-plugin-scss": "^1.0.2",
"sass-loader": "^8.0.0",
"style-loader": "^1.0.0",
"url-loader": "^2.1.0",
"vue": "^2.6.10",
"vue-template-compiler": "^2.6.11",
"vuex": "^3.1.1",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"
},
"scripts": {
"test": "jest",
"build": "rollup -c"
},
"author": "",
"license": "ISC",
"husky": {
"hooks": {
"pre-push": "npm run test",
"pre-commit": "lint-staged"
}
}
}
Maybe it can be useful : my project wasn't created with vue-cli. I use Vue only for two components.

Could you try with the below setup.
Package.json
{
"name": "hello-world",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test": "jest --watch"
},
"dependencies": {
"core-js": "^3.4.4",
"vue": "^2.6.10"
},
"devDependencies": {
"#babel/plugin-transform-react-jsx": "^7.8.3",
"#vue/cli-plugin-babel": "^4.1.0",
"#vue/cli-plugin-eslint": "^4.1.0",
"#vue/cli-service": "^4.1.0",
"#vue/test-utils": "^1.0.0-beta.31",
"babel-eslint": "^10.0.3",
"babel-jest": "^25.1.0",
"babel-plugin-module-resolver": "^4.0.0",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"jasmine": "^3.5.0",
"jest": "^25.1.0",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"browserslist": [
"> 1%",
"last 2 versions"
],
"jest": {
"moduleFileExtensions": [
"js",
"json",
"vue"
]
}
}
Component
import Vue from "vue";
const Comp = Vue.component("Comp", {
mounted() {
document.addEventListener("click", () => {
});
},
render(h) {
// Other stuff ...
return (
<div>
<div >Hello World!</div>
<input type="text" id="someeid"></input>
<div id="result"></div>
</div>
);
}
});
export default Comp;
babel.config.js
module.exports = api => {
api.cache(false);
return {
presets: ["#babel/preset-env", "#vue/babel-preset-jsx"],
plugins: [
"#babel/plugin-syntax-jsx",
["#babel/plugin-transform-react-jsx", { pragma : 'dom' }],
[
"module-resolver",
{
root: ["./"],
alias: {
"#": "./src",
"~": "./examples"
}
}
]
]
};
};
test file
import { shallowMount } from "#vue/test-utils";
import Comp from "./Comp";
it("should be initialized", () => {
const addEventListener = spyOn(document, "addEventListener");
const { vm } = shallowMount(Comp);
expect(addEventListener).toHaveBeenCalledWith("click", , expect.any(Function));
});
codesandbox Example

(Nuxt.js) Firebase error when using Nuxt.js on top of Vue.js, but works fine with vanilla Vue.js

I made a website with pure Vue.js, everything works fine.
However, I transferred the project to Nuxt.js, after setting up "everything", I get this error in the development page:
Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app).
Here's the firebase file ('fb.js') which I used to export the database:
"fb.js" (Root folder)
import firebase from 'firebase/app';
import 'firebase/firestore'
// Initialize Firebase
var config = {
apiKey: "KEY",
authDomain: "DOMAIN",
databaseURL: "DBURL",
projectId: "PID",
storageBucket: "SBUCKET",
messagingSenderId: "MSID"
};
firebase.initializeApp(config);
const db = firebase.firestore();
db.settings({timestampsInSnapshots: true})
export default db;
"component.vue" (Components folder) *This code is not exactly the same as my files, but the key parts are here
<template>
<div class="allprojects" v-for="(project, key) in projects" :key="key">
<span> {{project.title}} </span>
<span> {{project.person}} </span>
<span> {{project.due_date}} </span>
<span> {{project.status}} </span>
</div>
</template>
<script>
import db from '#/fb.js';
export default {
data() {
return {
projects: []
},
created() {
db.collection('projects').onSnapshot(res => {
const changes = res.docChanges();
changes.forEach(change => {
if (change.type === 'added') {
this.projects.push({
...change.doc.data(),
id: change.doc.id
})
}
}
</script>
"package.json" (Nuxt.js)
{
"name": "web",
"version": "1.0.0",
"description": "Nuxt.js + Vuetify.js project",
"author": "Alexsander Bispo <35003248+Lexszin#users.noreply.github.com>",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
"dependencies": {
"date-fns": "^1.30.1",
"firebase": "^5.9.2",
"nuxt": "^2.2.0",
"vuetify": "^1.3.6",
"vuetify-loader": "^1.0.5"
},
"devDependencies": {
"babel-eslint": "^10.0.1",
"babel-plugin-transform-imports": "^1.5.1",
"eslint-config-standard": "^12.0.0",
"eslint-loader": "^2.1.1",
"eslint-plugin-html": "^4.0.6",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-node": "^7.0.1",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-standard": "^4.0.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2"
},
"main": ".eslintrc.js",
"license": "ISC"
}
"package.json" (Vue.js)
{
"name": "tify",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"date-fns": "^1.30.1",
"firebase": "^5.9.2",
"vue": "^2.6.6",
"vue-router": "^3.0.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.5.0",
"#vue/cli-plugin-eslint": "^3.5.0",
"#vue/cli-service": "^3.5.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.8.0",
"eslint-plugin-vue": "^5.0.0",
"postcss": "^7.0.14",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"vue-cli-plugin-vuetify": "^0.5.0",
"vue-template-compiler": "^2.5.21",
"vuetify": "^1.5.8",
"vuetify-loader": "^1.0.5"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
As mentioned in the title, this works fine with the vanilla Vue.js, but when built with Nuxt.js, I get this error...