Vue.js - Invalid CSS after - javascript

I am trying to compile Vue.js based front-end application, but each time I do try to run it, I receive following error message:
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
^
Invalid CSS after "": expected 1 selector or at-rule, was "import './ProjectM"
in /app/src/components/ProjectMenuButton/ProjectMenuButton.vue (line 1, column 1)
I used to see this error before whenever I was including .css files with wrong path delivered.
The problem is that there literally has not been any .css file included into this file:
/app/src/components/ProjectMenuButton/ProjectMenuButton.vue:
<template>
<button :class="buttonClass" #click="changed()">
<h3>{{ this.ProjectMenuButton.text }}</h3>
</button>
</template>
<script>
export default {
name: "ProjectMenuButton",
props: {
ProjectMenuButton: {
type: Object,
default: () => ({
id: '',
text: '',
page: '',
class: 'btn'
})
},
ProjectMenuButtonClass: {
type: Object,
default: () => ({
class: ''
})
}
},
computed: {
buttonClass() {
if(typeof this.ProjectMenuButtonClass.class === undefined
|| this.ProjectMenuButtonClass.class === undefined)
return `ui basic button menu-button`;
else
return `ui basic button menu-button ${this.ProjectMenuButtonClass.class}`;
},
},
methods: {
changed: function(event) {
store.commit('current_menu', this.ProjectMenuButton.page);
}
}
};
</script>
I've tried different commands, like:
npm install --save-dev webpack
npm rebuild node-sass
But none of above worked.
Moreover, I do start Vue.js with following docker-container configuration:
frontend:
image: node:10-alpine
command: npm run serve
volumes:
- ./.env:/app/.env:ro
- ./frontend:/app
working_dir: /app
restart: on-failure
postgres:
image: postgres:10-alpine
volumes:
- postgres_data:/var/lib/postgresql/data
env_file: .env
package.json:
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "npm i && 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",
"register-service-worker": "^1.5.2",
"vue": "^2.5.17",
"vue-router": "^3.0.1",
"vue-raven": "^1.0.0",
"vue-analytics": "^5.16.0",
"vuex": "^3.0.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.0.1",
"#vue/cli-plugin-eslint": "^3.0.1",
"#vue/cli-plugin-pwa": "^3.0.1",
"#vue/cli-plugin-unit-jest": "^3.0.1",
"#vue/cli-service": "^3.0.1",
"#vue/eslint-config-standard": "^3.0.1",
"#vue/test-utils": "^1.0.0-beta.24",
"babel-core": "^6.26.3",
"babel-jest": "^23.4.2",
"node-sass": "^4.9.3",
"sass-loader": "^7.1.0",
"vue-template-compiler": "^2.5.17"
},
"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",
"not ie <= 8"
],
"jest": {
"moduleFileExtensions": [
"js",
"jsx",
"json",
"vue"
],
"transform": {
"^.+\\.vue$": "vue-jest",
".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
"^.+\\.jsx?$": "babel-jest"
},
"moduleNameMapper": {
"^#/(.*)$": "<rootDir>/src/$1"
},
"snapshotSerializers": [
"jest-serializer-vue"
],
"testMatch": [
"<rootDir>/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))"
]
}
}

Related

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)

VueJs + Nuxt + Jest : Could not locate module

[SOLVED] See edit at the bottom.
I'm learning to use vuejs and I want to use good practices from the start.
So I'm usin nuxtjs for SSR and Jest to unit test my components.
I can't figure how to configure jest to point on my root directory instead of some src/ somewhere...
In my test fil, if I change the component path and add a simple ../, it works, but it's not how it's supposed to be.
And the moduleNameMapper in jest.config.json does not seems to work...
Note that I don't have an src/ directory, just a client/ one with my component, tests, pages, etc.
Here are my files, if you what i'm missing :
./package.json
{
"private": true,
"scripts": {
"dev": "nuxt -c client/nuxt.config.js",
"build": "nuxt build -c client/nuxt.config.js",
"start": "nuxt start -c client/nuxt.config.js",
"lint": "eslint --fix --ext .js,.vue client/",
"test": "jest"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.35",
"#fortawesome/free-brands-svg-icons": "^5.15.3",
"#fortawesome/free-regular-svg-icons": "^5.15.3",
"#fortawesome/free-solid-svg-icons": "^5.15.3",
"#fortawesome/vue-fontawesome": "^2.0.2",
"#nuxtjs/router": "^1.6.1",
"axios": "^0.21.1",
"bootstrap": "^4.6.0",
"dotenv": "^8.2.0",
"jquery": "^3.6.0",
"js-cookie": "^2.2.1",
"nuxt": "^2.15.3",
"popper.js": "^1.16.1",
"sweetalert2": "^10.15.6",
"typescript": "^4.2.3",
"vform": "^1.0.1",
"vue-i18n": "^8.24.2"
},
"devDependencies": {
"#babel/core": "^7.13.10",
"#babel/eslint-parser": "^7.13.10",
"#babel/preset-env": "^7.13.12",
"#nuxtjs/eslint-config": "^5.0.0",
"#vue/cli-plugin-unit-jest": "^4.5.12",
"#vue/test-utils": "^1.1.3",
"eslint": "^7.22.0",
"fs-extra": "^9.1.0",
"jest": "^26.6.3",
"node-sass": "^5.0.0",
"sass-loader": "^10.1.1",
"ts-jest": "^26.5.4",
"ts-node": "^9.1.1",
"vue-jest": "^3.0.7"
}
}
./client/nuxt.config.js
require('dotenv').config()
const { join } = require('path')
const { copySync, removeSync } = require('fs-extra')
module.exports = {
ssr: false,
srcDir: __dirname,
env: {
apiUrl: process.env.API_URL || process.env.APP_URL + '/api',
appName: process.env.APP_NAME || 'Laravel Nuxt',
appLocale: process.env.APP_LOCALE || 'en',
githubAuth: !!process.env.GITHUB_CLIENT_ID
},
head: {
title: process.env.APP_NAME,
titleTemplate: '%s - ' + process.env.APP_NAME,
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Nuxt.js project' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
loading: { color: '#007bff' },
router: {
middleware: ['locale', 'check-auth']
},
css: [
{ src: '~assets/sass/app.scss', lang: 'scss' }
],
plugins: [
'~components/global',
'~plugins/i18n',
'~plugins/vform',
'~plugins/axios',
'~plugins/fontawesome',
'~plugins/nuxt-client-init',
{ src: '~plugins/bootstrap', mode: 'client' }
],
modules: [
'#nuxtjs/router'
],
build: {
extractCSS: true
},
watchers: {
webpack: {
ignored: /node_modules/
}
},
hooks: {
generate: {
done (generator) {
// Copy dist files to public/_nuxt
if (generator.nuxt.options.dev === false && generator.nuxt.options.mode === 'spa') {
const publicDir = join(generator.nuxt.options.rootDir, 'public', '_nuxt')
removeSync(publicDir)
copySync(join(generator.nuxt.options.generate.dir, '_nuxt'), publicDir)
copySync(join(generator.nuxt.options.generate.dir, '200.html'), join(publicDir, 'index.html'))
removeSync(generator.nuxt.options.generate.dir)
}
}
}
}
}
./jest.config.ts
// Sync object
module.exports = {
preset: '#vue/cli-plugin-unit-jest/presets/no-babel',
moduleNameMapper: {
"/^#\/(.*)$/": "<rootDir>/$1"
},
};
./jsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"~/*": ["./*"],
"#/*": ["./*"],
"~~/*": ["./*"],
"##/*": ["./*"]
}
},
"exclude": ["node_modules", ".nuxt", "dist"]
}
And here is the error I get, no matter what I set in moduleNameMapper :
❯ node .\node_modules\jest\bin\jest.js --no-cache
FAIL client/__tests__/demo.spec.js
● Test suite failed to run
Configuration error:
Could not locate module #/client/components/Navbar mapped as:
C:\laragon\www\laravel-nuxt\src\$1.
Please check your configuration for these entries:
{
"moduleNameMapper": {
"/^#\/(.*)$/": "C:\laragon\www\laravel-nuxt\src\$1"
},
"resolver": undefined
}
1 | import { mount } from '#vue/test-utils'
2 |
> 3 | import Navbar from '#/client/components/Navbar'
| ^
4 |
5 | test('Navbar', () => {
6 | // restitue le composant
at createNoMappedModuleFoundError (node_modules/jest-resolve/build/index.js:551:17)
at Object.<anonymous> (client/__tests__/demo.spec.js:3:1)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 3.972 s
Ran all test suites.
[EDIT] : the problem was in the jes.conf.js file, just had to remove the / in the line : "/^#/(.)$/" => "^#/(.)$".

React Styleguidist starting slooooooow

We use https://react-styleguidist.js.org/ to develop and display components for re-use. We used it for some years now and consists of JS and TS files. When starting with styleguidist server, the project is unbearable slow (approx. 4 mins). I tried many things to speed it up but nothing seems to make any difference.
I tried:
this workaround for react-docgen-typescript with no noticeable improvement.
the official configuration.
setting skipLibCheck: true in tsconfig.json from this recommendation.
Weird enough the startup seems a tad faster when just using default propsParser and not using react-docgen-typescript. But then not all props are included in the generated documentation.
So I'm really out of ideas... Our style guide is built on CRA v4.0.1. Maybe CRA is the problem? Or maybe the problem is that our style guide has both JS and TS files which "confuses" the TS compiler in some way....?
Any help, advice, or suggestion is most welcome...
package.json
{
"name": "#xxx/core",
"version": "2.7.0",
"scripts": {
"build:transpile-files": "NODE_ENV=production babel --config-file ./babel.config.js src --out-dir dist --extensions '.ts','.tsx','.js','.jsx' --ignore **/*.d.ts,**/*.spec.tsx,**/*.spec.js,**/styleguide.styled.js,**/setupTests.ts",
"build:copy-files": "node ./scripts/copy-files.js",
"build:ts-prod": " tsc --p tsconfig.build.json",
"build:ts-dev": "tsc --p tsconfig.json",
"build": "rm -rf dist && yarn build:ts-prod && yarn build:transpile-files && yarn build:copy-files",
"styleguide": "styleguidist server",
"styleguide:build": "styleguidist build",
"test": "DEBUG_PRINT_LIMIT=100000 react-scripts test --env=jest-environment-jsdom-sixteen --color --bail",
"test:coverage": "CI=true react-scripts test --env=jest-environment-jsdom-sixteen --color --bail --coverage",
"lint": "eslint src --ext .js,.jsx,.ts,.tsx,.snap",
"prettier": "npx prettier \"src/**/*.{js,jsx,ts,tsx,scss}\"",
"format": "yarn prettier --write"
},
"dependencies": {
"#material-ui/lab": "^4.0.0-alpha.57",
"#tippyjs/react": "^4.2.0",
"antd": "^4.9.1",
"fix-webm-duration": "1.0.0",
"react-dates": "^21.8.0",
"react-draggable": "^4.3.1",
"react-virtualized-auto-sizer": "^1.0.2",
"react-window": "^1.8.5",
"react-window-infinite-loader": "^1.0.5",
"recharts": "^1.8.5",
"tippy.js": "^6.2.7",
"underscore": "^1.9.1"
},
"peerDependencies": {
"#material-ui/core": "4.11.0",
"#material-ui/icons": "4.9.1",
"moment": "^2.29.0",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-select": "^3.1.0",
"styled-components": "^5.0.1"
},
"devDependencies": {
"#babel/cli": "7.5.5",
"#material-ui/core": "4.11.0",
"#material-ui/icons": "4.9.1",
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.3",
"#testing-library/react-hooks": "^5.0.0",
"#testing-library/user-event": "^12.6.0",
"#types/dom-mediacapture-record": "^1.0.7",
"#types/jest": "^26.0.20",
"#types/node": "^14.14.22",
"#types/react": "^16.14.2",
"#types/react-dates": "^21.8.1",
"#types/react-dom": "^16.9.10",
"#types/react-select": "^3.1.2",
"#types/recharts": "^1.8.19",
"#types/styled-components": "^5.1.7",
"#types/testing-library__react": "^10.2.0",
"#types/testing-library__react-hooks": "^3.4.1",
"#types/underscore": "^1.11.0",
"#typescript-eslint/eslint-plugin": "^4.14.0",
"#typescript-eslint/parser": "^4.14.0",
"babel-loader": "^8.1.0",
"enzyme": "3.10.0",
"enzyme-adapter-react-16": "1.14.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^6.11.0",
"eslint-config-react-app": "^6.0.0",
"eslint-plugin-babel": "5.3.1",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jest": "^24.1.3",
"eslint-plugin-jest-dom": "^3.6.5",
"eslint-plugin-jsx-a11y": "6.4.1",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-testing-library": "^3.10.1",
"fs-extra": "^8.1.0",
"jest-canvas-mock": "^2.3.0",
"jest-environment-jsdom-sixteen": "^1.0.3",
"jest-enzyme": "7.0.2",
"jest-styled-components": "^7.0.3",
"moment": "^2.29.0",
"prettier": "^1.19.1",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-docgen-typescript": "^1.21.0",
"react-dom": "^16.13.1",
"react-scripts": "^4.0.1",
"react-select": "^3.1.0",
"react-styleguidist": "^11.1.5",
"react-test-renderer": "^16.13.1",
"styled-components": "^5.0.1",
"typescript": "^4.1.3"
},
"resolutions": {
"acorn": "^7.1.1",
"kind-of": "^6.0.3"
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,tsx,ts}",
"!src/**/{constants,styled,models}.{js,ts}",
"!src/theme/illustrations/**",
"!src/theme/icons/**"
]
}
}
tsconfig.json
{
"compilerOptions": {
"baseUrl": "src",
"target": "es6",
"lib": [
"dom",
"dom.iterable",
"es6"
],
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"noImplicitAny": false,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "react",
"allowJs": true,
"outDir": "dist",
"sourceMap": true,
"declaration": true,
"noEmit": true,
"noFallthroughCasesInSwitch": true
},
"include": [
"src"
]
}
styleguide.config.js
const path = require('path')
module.exports = {
title: 'CoreWeb',
propsParser: require('react-docgen-typescript').withCustomConfig('./tsconfig.json').parse,
pagePerSection: true,
skipComponentsWithoutExample: true,
styleguideComponents: {
Wrapper: path.join(__dirname, './src/utils/styleguidist/ThemeWrapper'),
},
template: {
head: {
links: [
{
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700',
},
],
},
},
sections: [
{
name: 'Charts',
components: () => [
'src/components/Charts/BarChart/index.tsx',
'src/components/Charts/LineChart/index.tsx',
'src/components/Charts/PieChart/index.tsx',
'src/components/GoalCharts/TaskGoalMetrics/index.tsx',
'src/components/RegistrationCharts/PainBarChart/index.tsx',
'src/components/RegistrationCharts/MoodBarChart/index.tsx',
'src/components/RegistrationCharts/SleepBarChart/index.tsx',
'src/components/RegistrationCharts/AlcoholBarChart/index.tsx',
'src/components/RegistrationCharts/BloodPressureBarChart/index.tsx',
'src/components/RegistrationCharts/ExerciseBarChart/index.tsx',
'src/components/RegistrationCharts/StepsBarChart/index.tsx',
'src/components/RegistrationCharts/SmokingBarChart/index.tsx',
'src/components/RegistrationCharts/WeightLineChart/index.tsx',
'src/components/RegistrationCharts/WaistHipLineChart/index.tsx',
],
},
{
name: 'Data display',
components: () => [
'src/components/Avatar/layout.tsx',
'src/components/Chip/layout.tsx',
'src/components/DefinitionItem/layout.js',
'src/components/Graphs/Donut/layout.js',
'src/components/Image/layout.js',
'src/components/Lightbox/layout.js',
'src/components/LinkifyText/layout.js',
'src/components/ListItemIcon/layout.js',
'src/components/MediaMosaic/layout.js',
'src/components/Person/index.tsx',
'src/components/Table/layout.tsx',
'src/components/TableSelection/layout.js',
'src/components/Tag/layout.js',
'src/components/TruncateWithShow/layout.js',
'src/components/Typography/layout.tsx',
'src/components/UnreadItems/index.tsx',
'src/components/Video/layout.tsx',
'src/components/CircleWithContent/layout.tsx',
],
},
{
name: 'Inputs',
components: () => [
'src/components/Button/layout.tsx',
'src/components/ButtonDropdownSelector/layout.js',
'src/components/Checkbox/layout.tsx',
'src/components/DatePickers/InlineDatePicker/layout.js',
'src/components/DatePickers/Range/layout.js',
'src/components/DatePickers/Single/index.tsx',
'src/components/DatePickers/HourMin/index.tsx',
'src/components/EmojiInputBase/layout.js',
'src/components/EmojiPicker/layout.js',
'src/components/FilePicker/layout.tsx',
'src/components/FilledInput/layout.js',
'src/components/GenderSelector/layout.tsx',
'src/components/InputButton/layout.js',
'src/components/MenuButton/index.tsx',
'src/components/MultiSelectDropdown/layout.js',
'src/components/RadioGroup/layout.tsx',
'src/components/SearchTextField/layout.js',
'src/components/Select/layout.tsx',
'src/components/Slider/layout.js',
'src/components/Switch/layout.js',
'src/components/TextField/layout.tsx',
'src/components/TimeSelect/layout.js',
'src/components/ToggleButtonGroup/layout.tsx',
],
},
{
name: 'Surfaces',
components: () => [
'src/components/Card/index.tsx',
'src/components/CardContent/layout.tsx',
'src/components/ProfileCard/layout.js',
'src/components/MenuList/layout.js',
],
},
{
name: 'Navigation',
components: () => [
'src/components/CardTabs/layout.tsx',
'src/components/Tabs/layout.tsx',
'src/components/SideNavigation/layout.tsx',
],
},
{
name: 'Feedback',
components: () => [
'src/components/Confirm/index.tsx',
'src/components/Dialog/layout.js',
'src/components/EmptyState/index.tsx',
'src/components/ErrorBoundary/layout.js',
'src/components/FormDrawer/layout.js',
'src/components/InfiniteScroller/layout.js',
'src/components/Inform/layout.js',
'src/components/InformDialog/layout.js',
'src/components/Loading/layout.js',
'src/components/LoadingV2/layout.js',
'src/components/LoadingV2/layout.js',
'src/components/SystemMessage/layout.js',
'src/components/Tooltip/index.tsx',
],
},
{
name: 'Drafts',
components: () => ['src/components/DraftStatus/layout.tsx'],
},
{
name: 'Goals',
components: () => [
'src/components/ExerciseActivityForm/index.tsx',
'src/components/ExerciseIcon/layout.js',
'src/components/MoodIcon/layout.js',
'src/components/PainIcon/layout.js',
'src/components/GoalIcon/index.tsx',
],
},
{
name: 'Groups',
components: () => [
'src/components/GroupForm/layout.js',
'src/components/GroupItem/layout.js',
'src/components/MessageActionComment/layout.js',
'src/components/MessageActionLike/layout.js',
'src/components/GroupPost/index.tsx',
'src/components/MessageComment/layout.tsx',
'src/components/MessageStatusComments/layout.js',
'src/components/MessageStatusLikes/layout.js',
],
},
{
name: 'Messages',
components: () => [
'src/components/MessageAttachmentLinkForm/layout.js',
'src/components/MessageEditor/layout.js',
'src/components/MessageMediaAttachment/layout.js',
],
},
{
name: 'Notes',
components: () => ['src/components/Note/layout.js'],
},
{
name: 'Registrations',
components: () => [
'src/components/RegistrationInputTag/layout.js',
'src/components/RegistrationItem/layout.js',
],
},
{
name: 'Media',
components: () => [
'src/components/CaptureWebcamImageDialog/index.tsx',
'src/components/RecordWebcamVideoDialog/index.tsx',
'src/components/VideoAudioUnavailable/layout.js',
],
},
{
name: 'Theme',
components: () => ['src/theme/colors/layout.js', 'src/theme/borderRadius/layout.tsx'],
},
{
name: 'Icons',
components: ['src/theme/icons/**/layout.tsx'],
},
{
name: 'Illustrations',
components: ['src/theme/illustrations/**/layout.js', 'src/theme/illustrations/**/layout.tsx'],
},
{
name: 'Utilities',
components: () => ['src/utils/**/layout.js'],
},
],
}

Since you are using TypeScript and probably using ts-loader (and babel-loader), you could try using a faster TS transpiler like SWC-loader. For me, it reduced the initial load time roughly in half.
It is pretty simple to implement, just install the dependencies (#swc/core and swc-loader) and add the loader to the webapckConfig in your styleguide.config.js (custom webpack config).
webpackConfig: {
... // your other config here
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /(node_modules)/,
use: {
loader: "swc-loader",
}
},
... // your other rules here
],
},
}

Jest cannot find module

Hi I am trying to use Jest, but it keeps giving an error of cannot find module. I am not sure if this has to do with the paths of the files. All the files below are located out of my src folder. I have my file set up below.
jest.config.js file:
module.exports = {
"collectCoverage": true,
"coverageDirectory": "coverage",
"verbose": true,
"roots": [
"./__tests__"
],
"transform": {
"^.+\\.js?$": "babel-jest"
},
"coverageThreshold": {
"global": {
"branches": 78,
"functions": 90,
"lines": 90,
"statements": 90
}
},
"setupFiles": [
"./setupTest"
],
"moduleDirectories": ["node_modules", "src"]
}
my test file located in __ test __:
import React from 'react';
import { shallow, mount } from 'enzyme';
import Routes, { OrderScreen, ShippingScreen, HomeScreen } from ../../src/App';
import {
MemoryRouter
} from 'react-router'
import { Route } from 'react-router-dom';
let pathMap = {};
describe('App', () => {
beforeAll(() => {
const component = shallow(<Routes />);
pathMap = component.find(Route).reduce((pathMap, route) => {
const routeProps = route.props();
pathMap[routeProps.path] = routeProps.component;
return pathMap;
}, {});
console.log(pathMap)
})
it('should show Home component for / router (getting array of routes)', () => {
expect(pathMap['/']).toBe(HomeScreen);
})
it('should show News Feed component for /news router', () => {
expect(pathMap['/order/:id']).toBe(OrderScreen);
})
it('should show News Feed component techdomain for /news router', () => {
expect(pathMap['/shipping']).toBe(ShippingScreen);
})
it('should show No match component for route not defined', () => {
expect(pathMap['/search/:keyword/page/:pageNumber']).toBe(HomeScreen);
})
})
package jason
{
"name": "frontend",
"proxy": "http://127.0.0.1:5000",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/plugin-transform-react-jsx": "^7.12.17",
"#testing-library/user-event": "^12.1.10",
"axios": "^0.21.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"react": "^17.0.1",
"react-bootstrap": "^1.4.3",
"react-redux": "^7.2.2",
"react-router-bootstrap": "^0.25.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"react-side-effect": "^2.1.1",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test:t": "react-scripts test",
"eject": "react-scripts eject",
"test": "jest",
"test:cover": "jest --coverage",
"open:coverage": "open ./coverage/lcov-report/index.html"
},
"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": {
"#babel/core": "^7.13.8",
"#babel/plugin-proposal-class-properties": "^7.13.0",
"#babel/preset-env": "^7.13.8",
"#babel/preset-react": "^7.12.13",
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.5",
"babel-jest": "^26.6.3",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.6",
"jest": "^26.6.3",
"jest-enzyme": "^7.1.2",
"react-dom": "^17.0.1"
}
}
babel.config.js
module.exports = {
presets: [
['#babel/preset-env', { targets: { node: 'current' } }],
['#babel/preset-react', { targets: { node: 'current' } }] // add this
]
};
Everything seems fine I've been following a tutorial but I cannot get over the error cannot find module it happens in my test file at this line
> 4 | import App, { App as AppComponent } from '../../src/App';
Does this have to do something with paths that need to be fixed? everything is located outside of my src folder. My main file App.js which I am trying to test is within my src folder.

Try this:
module.exports = {
"collectCoverage": true,
"coverageDirectory": "coverage",
"verbose": true,
"roots": ["<rootDir>/__tests__/"], // or "<rootDir>/src/__tests__/"
"transform": {"^.+\\.js?$": "babel-jest"},
"coverageThreshold": {
"global": {
"branches": 78,
"functions": 90,
"lines": 90,
"statements": 90
}
},
"setupFiles": ["<rootDir>/setupTest"],
"moduleNameMapper": {
"^src/(.*)": "<rootDir>/src/$1",
}
}

ESLint imports/modules are treated as undefined

I'm using Webpack with Polymer, importing a component like so:
import '#polymer/polymer/polymer-element.html';
class AppShell extends Polymer.Element {
static get is() { return 'app-shell'; }
}
I left out the rest of the component here. The import is working as expected in my app, but when I am running ESLint, I get the following error message:
50:27 error 'Polymer' is not defined no-undef
This is my package.json, where I'm defining my ESLint settings. Anyone have an idea why ESLint is not picking up the import properly?
{
"name": "client-meeting-tracker",
"version": "1.0.0",
"description": "",
"main": "index.js",
"private": true,
"scripts": {
"start": "node utils/webserver.js",
"lint": "eslint --ext .html,.js */**",
"build": "node utils/build.js"
},
"dependencies": {
"#startup-boilerplate/inkling": "*",
"auth0-lock": "^10.7.3",
"lodash": "^4.6.1",
"moment": "^2.17.1"
},
"devDependencies": {
"cross-env": "^1.0.6",
"css-loader": "^0.23.1",
"eslint": "^3.16.0",
"eslint-plugin-html": "^2.0.1",
"eslint-plugin-import": "^2.2.0",
"file-loader": "^0.8.4",
"fs-extra": "^0.30.0",
"polymer-cli": "^0.17.0",
"wc-loader": "*",
"webpack": "2.2.0",
"webpack-dev-server": "2.2.0"
},
"eslintConfig": {
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
"extends": [
"eslint:recommended"
],
"parserOptions": {
"sourceType": "module"
},
"rules": {
"indent": [
"error",
"tab",
{
"SwitchCase": 1
}
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
]
},
"plugins": [
"html"
]
}
}

Polymer is defined as a global, so I would configure Polymer as a global in your package.json:
"eslintConfig": {
"globals": {
"Polymer": true
}
}

Categories

Resources