Develop Reference

Test failures during styles file imports

Encountering issues with setting up Jest for React without the use of Create-React-App.
I do not want to use CRA thus sticking with babel and webpack config setup which does work less Jest.
Jest itself is working fine for testing. It only fails when a component has a css/scss file import.
Seen many similar issues here and tried out the solutions but the issue persists.
Could I get some help with what am doing wrong pls? Thanks.
These are some of the solutions I have tried out which is not working for me.
Tried accepted solution and also the other 2 solutions for this:
jest unexpected token when importing css
A Medium Blog with similar solution
https://stackoverflow.com/questions/51994111/jest-encountered-an-unexpected-token
Plus a couple of other examples more related to Vue but similar solution.
The error output as follows:
Jest encountered an unexpected token
Details:
.some-class {
^
This is class being tested:
import React from 'react';
import '../styles/styles.scss' // line causing issue
const App = () => {
const env = process.env.NODE_ENV;
return (
<div>
<h1>sample header</h1>
<p>{`This is in ${env} environment`}</p>
</div>
);
};
export default App;
The Test class
import App from "../../components/App";
import React from "react";
import {shallow} from "enzyme";
it('should get a matching snapshot', () => {
const wrapper = shallow(<App/>)
expect(wrapper.find('h1').text()).toBe('sample header')
expect(wrapper).toMatchSnapshot()
});
Styles file: styles.scss
.some-class {
color: aliceblue;
}
package.json for reference:
{
"name": "tar",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "cross-env NODE_ENV=beta webpack-dev-server",
"build-prod": "cross-env NODE_ENV=production webpack -p",
"build-beta": "cross-env NODE_ENV=beta webpack",
"test": "jest --config=jest.config.json"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.11.6",
"#babel/preset-env": "^7.11.5",
"#babel/preset-react": "^7.10.4",
"#babel/preset-typescript": "^7.10.4",
"#types/react": "^16.9.49",
"#types/react-dom": "^16.9.8",
"babel-jest": "^26.6.3",
"babel-loader": "^8.1.0",
"cross-env": "^7.0.2",
"css-loader": "^4.3.0",
"enzyme": "^3.0.0",
"enzyme-adapter-react-16": "^1.0.0",
"enzyme-to-json": "^3.0.1",
"file-loader": "^6.1.0",
"html-loader": "^1.3.0",
"html-webpack-plugin": "^4.5.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^26.6.3",
"jest-cli": "^26.6.3",
"mini-css-extract-plugin": "^0.11.1",
"node-sass": "^4.14.1",
"raf": "^3.3.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"sass-loader": "^10.0.2",
"typescript": "^4.0.2",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
"jest": {
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/tests/__mocks__/fileMock.js",
"\\.(scss|css|less)$": "<rootDir>/src/tests/__mocks__/styleMock.js"
}
"transform": {
"\\.js?x$": "<rootDir>/node_modules/babel-jest"
}
}
}
Inside Webpack.config.js (showing partial)
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
}
]
},
Inside . babelrc file
{
"presets": ["#babel/react", "#babel/env"]
}

Looks like you forget to mock scss file during test despite having already had css|less files there.
To fix that, you have to add scss as part of current style file pattern:
package.json
{
"jest": {
"moduleNameMapper": {
// ...
"\\.(css|less|scss)$": "<rootDir>/src/tests/__mocks__/styleMock.js"
}
}
}
Update
You're currently input jest cli with --config=jest.config.json which is json file which is wrong (it must be js file) that ended up the issue.
The right one should be:
jest --config=jest.config.js // `js` not `json`
But you have 2 config one in jest.config.js and jest area in package.json file. Please try to use one place instead by either remove --config=jest.config.js in CLI or move entire jest block into the config file.

Nuxt.js failed to dynamically compile templates

I have a problem with nuxt
When I load index.vue page and click on the nuxt-link to load another page I am getting an error:
[Vue warn]: Failed to mount component: template or render function not defined.
found in
--->
<Layouts/default.vue> at layouts/default.vue
I use SSR. I think nuxt.js failed to dynamically compile templates
After goggling I found this: https://v2.vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
And i tried add it to config
build: {
extend (config) {
config.resolve.alias = {
'vue$': 'vue/dist/vue.esm.js'
}
},
transpile: [/^element-ui/]
}
But then I got an error: "These dependencies were not found"
Maybe anyone knows how to solve this issue?
Some options from nuxt.config.js
export default {
mode: 'universal',
target: 'server',
css: [
'element-ui/lib/theme-chalk/index.css'
],
plugins: [
'#/plugins/element-ui.js',
{ src: '#/plugins/stickySidebar.js', mode: 'client' }
],
components: true,
buildModules: [
'#Nuxtjs/eslint-module'
],
modules: [
'#Nuxtjs/axios'
],
build: {
// extend (config) {
// config.resolve.alias = {
// 'vue$': 'vue/dist/vue.esm.js'
// }
// },
transpile: [/^element-ui/]
}
}
BTW, I'm using yarn
Dependencies:
"dependencies": {
"#Nuxtjs/axios": "^5.11.0",
"element-ui": "^2.13.2",
"nuxt": "^2.13.0",
"sticky-sidebar": "^3.3.1"
},
"devDependencies": {
"#Nuxtjs/eslint-config": "^3.0.0",
"#Nuxtjs/eslint-module": "^2.0.0",
"#vue/test-utils": "^1.0.3",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.0.1",
"eslint": "^7.2.0",
"eslint-plugin-nuxt": "^1.0.0",
"jest": "^26.0.1",
"node-sass": "^4.14.1",
"sass-loader": "^9.0.1",
"vue-jest": "^3.0.4"
}
Edit:
default layout:
<template>
<div>
<Nuxt />
</div>
</template>
I've changed to:
<template>
<el-container>
<el-header>
<el-menu :default-active="activeIndex" :router="true" mode="horizontal">
<el-menu-item index="/">Main</el-menu-item>
<el-menu-item index="/store/1">store</el-menu-item>
</el-menu>
</el-header>
<el-main>
<Nuxt />
</el-main>
</el-container>
</template>
But none of them work
Edit:
Found a problem. I've used a plugin sticky-sidebar which crashes nuxt.js routes

Updating Vuetify but sass loader doesn't work

I am new to vuetify and I am trying upgrade to v2.1.3 but sass loader doesn't work. I read all the documentation but my English is not very good, I can't fix this problem.
Actually, I can update vuetify and it works. I can see the new vuetify and I run other things but my Project doesn't see sass. This is my problem
My package .json;
{
"name": "arkmanweb",
"version": "1.9.4",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#syncfusion/ej2-vue-grids": "^17.3.19",
"axios": "^0.18.0",
"css-loader": "^3.2.1",
"echarts": "^4.2.0-rc.2",
"luxon": "^1.19.3",
"print-js": "^1.0.52",
"quill": "^1.3.6",
"register-service-worker": "^1.0.0",
"sass": "^1.23.7",
"sass-loader": "^8.0.0",
"save": "^2.3.2",
"underscore": "^1.8.3",
"vee-validate": "^2.0.4",
"vue": "^2.5.13",
"vue-i18n": "^8.4.0",
"vue-moment": "^3.2.0",
"vue-router": "^3.0.1",
"vuetify": "^2.1.13",
"vuex": "^3.0.1",
"webpack": "^4.41.2",
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.0.0-alpha.8",
"#vue/cli-plugin-eslint": "^3.0.0-alpha.8",
"#vue/cli-plugin-pwa": "^3.0.0-alpha.8",
"#vue/cli-service": "^3.0.0-alpha.8",
"deepmerge": "^4.2.2",
"fibers": "^4.0.2",
"less-loader": "4.1.0",
"style-loader": "0.23.1",
"vue-template-compiler": "^2.5.13",
"webpack-cli": "^3.1.2"
},
"babel": {
"presets": [
"#vue/app"
]
},
"eslintConfig": {
"extends": [
"plugin:vue/essential",
"eslint:recommended"
]
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
This is my main js:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Vuetify from 'vuetify'
import './registerServiceWorker'
import VueResource from 'vue-resource'
import '../src/assets/css/custom.css'
import { i18n } from '#/plugins/i18n'
import 'vuetify/dist/vuetify.min.css'
Vue.use(VueResource)
const opts = {
theme: { disable: true }
}
Vue.use(Vuetify)
import auth from '../src/api/auth'
auth.checkAuth()
Vue.router = router
Vue.config.productionTip = false
new Vue({
router,
vuetify:new Vuetify(opts),
store,
i18n,
render: h => h(App)
}).$mount('#app')
This is App.vue I am importing sass here but doesn't work:
<style lang="sass">
#import '../node_modules/vuetify/src/styles/main.sass';
</style>
What's wrong? Thank you for your help.
This is my error:
error in ./src/App.vue?vue&type=style&index=0&lang=sass&
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 'data'. These properties are valid:
object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }

Its hard to tell based on information you provided but it seems you upgraded sass-loader to version 8.0.0 as part of the upgrade of Vuetify
There is a breaking change in 8.0.0 release of sass-loader in how the configuration should look like - all the options for the underlying sass processor (Node Sass or Dart Sass) needs now to be moved into sassOptions

Vuetify a la carte: rollup component complains when used in static html file?

I'm trying to rollup a Vue component which uses some vuetify components. For MWE purpose I have a very simple component, CountButton.vue, which is just a wrapper over <v-btn>
<template>
<div class="">
<v-btn #click="count"> test {{amount}} </v-btn>
</div>
</template>
<script>
import {VBtn} from 'vuetify/lib' // <---- for tree shaking & a la carte
export default {
components: {
VBtn
},
data: () =>({
amount: 0
}),
methods:{
count() {
this.amount += 1
}
}
}
</script>
I then used rollup to bundle this component with the following rollup.entry.js file:
import Vue from 'vue';
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
import CountButton from './components/CountButton.vue'
const components = {
CountButton,
}
function install(Vue) {
if (install.installed) return;
install.installed = true;
Object.keys(components).forEach(name => {
Vue.component(name, components[name])
});
}
const plugin = {
install,
}
let GlobalVue = null;
if (typeof window !== 'undefined') {
GlobalVue = window.Vue;
} else if (typeof global !== 'undefined') {
GlobalVue = global.Vue;
}
if (GlobalVue) {
GlobalVue.use(plugin);
GlobalVue.use(Vuetify)
}
export default components
export const strict = false
export {
CountButton,
}
and rollup.config.js file:
// rollup.config.js
import vue from 'rollup-plugin-vue';
import babel from 'rollup-plugin-babel';
import { terser } from "rollup-plugin-terser";
import minimist from 'minimist';
import async from 'rollup-plugin-async';
import commonjs from 'rollup-plugin-commonjs';
import nodeResolve from 'rollup-plugin-node-resolve';
import postcss from 'rollup-plugin-postcss'
import css from 'rollup-plugin-css-only'
import pkg from './package.json';
const argv = minimist(process.argv.slice(2));
const config = {
input: './dev/src/rollup.entry.js',
external: [
// 'vue',
],
output: {
name: 'pub',
exports: 'named',
globals: {
'vue': 'Vue',
},
},
plugins: [
vue({
compileTemplate: true,
template: { optimizeSSR: false },
}),
async(),
postcss(),
nodeResolve({
mainFields: [
'module', 'main', 'jsnext',
]
}),
commonjs({
// non-CommonJS modules will be ignored, but you can also
// specifically include/exclude files
include: 'node_modules/**', // Default: undefined
// search for files other than .js files (must already
// be transpiled by a previous plugin!)
extensions: [ '.js', '.coffee' ], // Default: [ '.js' ]
namedExports: {
}, // Default: undefined
// sometimes you have to leave require statements
// unconverted. Pass an array containing the IDs
// or a `id => boolean` function. Only use this
// option if you know what you're doing!
ignore: [ 'conditional-runtime-dependency' ]
}),
babel({
exclude: 'node_modules/**',
externalHelpers: true,
runtimeHelpers: true,
plugins: [
['wildcard', { exts: ['vue'], nostrip: true, },],
// '#babel/plugin-external-helpers',
// '#babel/plugin-transform-runtime'
],
presets: [
['#babel/preset-env', { modules: false, },],
],
}),
],
};
// Only minify browser (iife) version
if (argv.format === 'iife') {
// config.plugins.push(terser()); // commented out for debugging
}
export default config;
Then, in my static HTML, I have:
<meta charset="utf-8">
<title>pub demo</title>
<!-- <script src="https://unpkg.com/vue"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="./pub.min.js" async="false"></script>
<pub-count-button></pub-count-button>
<count-button/>
</script>
Also package.json:
{
"name": "pub",
"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",
"build:wc": "npx vue-cli-service build --target wc --name pub 'dev/src/components/*.vue'",
"build:r": "npm run build:r:unpkg & npm run build:r:es & npm run build:r:umd",
"build:r:umd": "rollup --config rollup.config.js --format umd --file dist/pub.umd.js",
"build:r:es": "rollup --config rollup.config.js --format es --file dist/pub.esm.js",
"build:r:unpkg": "rollup --config rollup.config.js --format iife --file dist/pub.min.js"
},
"dependencies": {
"core-js": "^3.4.3",
"vue": "^2.6.10",
"vuetify": "^2.1.0",
"vuex": "^3.1.2"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.1.0",
"#vue/cli-plugin-eslint": "^4.1.0",
"#vue/cli-plugin-unit-jest": "^4.1.0",
"#vue/cli-service": "^4.1.0",
"#vue/test-utils": "1.0.0-beta.29",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"sass": "^1.19.0",
"sass-loader": "^8.0.0",
"vue-cli-plugin-vuetify": "^2.0.2",
"vue-template-compiler": "^2.6.10",
"vuetify-loader": "^1.3.0",
"#babel/core": "^7.1.0",
"#babel/plugin-external-helpers": "^7.2.0",
"#babel/plugin-transform-runtime": "^7.5.5",
"#babel/preset-env": "^7.1.0",
"#babel/runtime": "^7.0.0-beta.55",
"babel-core": "7.0.0-bridge.0",
"babel-plugin-wildcard": "^5.0.0",
"babel-runtime": "^6.26.0",
"core-js": "^2.6.2",
"css": "^2.2.4",
"from": "^0.1.7",
"import": "0.0.6",
"minimist": "^1.2.0",
"nodemon": "^1.18.9",
"register-service-worker": "^1.6.2",
"rollup": "^0.66.2",
"rollup-plugin-async": "^1.2.0",
"rollup-plugin-babel": "^4.0.3",
"rollup-plugin-commonjs": "^9.2.0",
"rollup-plugin-css-only": "^1.0.0",
"rollup-plugin-node-resolve": "^4.0.0",
"rollup-plugin-postcss": "^2.0.3",
"rollup-plugin-uglify-es": "0.0.1",
"rollup-plugin-vue": "^4.3.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"rollup-plugin-terser": "5.1.2"
}
}
The result of this example is that in index.html:
ReferenceError: process is not defined
found in pub.min.js
which corresponds to:
var config = ({
/**
* Option merge strategies (used in core/util/options)
*/
// $flow-disable-line
optionMergeStrategies: Object.create(null),
/**
* Whether to suppress warnings.
*/
silent: false,
/**
* Show production mode tip message on boot?
*/
productionTip: process.env.NODE_ENV !== 'production', <---
Here is a MWE repo
How I got here?
1. have a very simple component, CountButton.vue, which is just a wrapper over the Vuetify component , imported a la carte (see dev/src/components/CountButton.vue)
2. Then I configured rollup (rollup.config.js) and tried to bundle my "package" (just this component) with /dev/src/rollup.entry.js
3. then I rolled up npm run build:r
4. then I tried to use the component: (dist/demo.html)

Getting "Uncaught TypeError: path.parse is not a function" in Webpack project

I am trying to setup a React project using Webpack. It's a simple app that loads an mdx file and parses it. When I try to run the app it returns 'Uncaught TypeError: path.parse is not a function'
I have tried importing parse from 'path' and importing parse from 'path-browserify' but it's still not working
index.js:
import React, { lazy, Component, Suspense } from "react";
import { importMDX } from "mdx.macro";
import ReactDOM from "react-dom";
// import path from "path";
// import { parse } from "path";
import path from "path-browserify";
// import { parse } from "path-browserify";
const Content = lazy(() => importMDX("./index.mdx"));
class App extends Component {
render() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<Content />
</Suspense>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
webpack.config.js:
const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require("path");
module.exports = {
entry: "./index.js",
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.mdx?$/,
use: ["babel-loader", "#mdx-js/loader"]
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./index.html",
filename: "./index.html"
})
],
node: {
fs: "empty",
module: "empty"
}
};
package.json:
{
"name": "doc",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --open --mode development",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.5.5",
"#babel/preset-env": "^7.5.5",
"#babel/preset-react": "^7.0.0",
"#mdx-js/loader": "^1.4.0",
"babel-loader": "^8.0.6",
"fs": "0.0.1-security",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"path": "^0.12.7",
"path-browserify": "^1.0.0",
"webpack": "^4.39.2",
"webpack-cli": "^3.3.7",
"webpack-dev-server": "^3.8.0"
},
"dependencies": {
"#mdx-js/react": "^1.4.0",
"mdx.macro": "^0.2.8",
"react": "^16.9.0",
"react-dom": "^16.9.0"
}
}
Error:
Uncaught TypeError: path.parse is not a function
at Function.module.exports.sync (index.js:28)
at Function.module.exports.sync (index.js:8)
at module.exports (index.js:17)
at eval (mdx.macro.js:11)
at Object../node_modules/mdx.macro/mdx.macro.js (main.js:11066)
at __webpack_require__ (main.js:20)
at eval (index.js:4)
at Module../index.js (main.js:97)
at __webpack_require__ (main.js:20)
at eval (webpack:///multi_(:8080/webpack)-dev-server/client?:2:18)

You don't need to include extra dependency for path. path is global dependency of node js.
npm remove path or yarn remove path
and
npm remove path-browserify or yarn remove path-browserify
and clear node cache
npm clear cache
can you try this?