Develop Reference

Internal server error: Failed to resolve import "#vue/server-renderer" from

I have a vue3 project created by vite a few months ago, when it was able to debug and release normally, today I am ready to make a little modification, and report an error at runtime,
All vue files are error-reporting:[vite] Internal server error: Failed to resolve import "#vue/server-renderer" from "srcApp.vue". Does the file exist? , I searched globally, and no file referenced vue/server-renderer, how to solve this problem?
[vite] Internal server error: Failed to resolve import "#vue/server-renderer" from "src\App.vue". Does the file exist?
Plugin: vite:import-analysis
File: PATH/vue3-element-admin/src/App.vue
17 |
18 | import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode, mergeProps as _mergeProps } from "vue"
19 | import { ssrRenderComponent as _ssrRenderComponent } from "#vue/server-renderer"
| ^
20 |
21 | function _sfc_ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
at formatError (PATH\vue3-element-admin\node_modules\vite\dist\node\chunks\dep-0351185a.js:36769:46)
at TransformContext.error (PATH\vue3-element-admin\node_modules\vite\dist\node\chunks\dep-0351185a.js:36765:19)
at normalizeUrl (PATH\vue3-element-admin\node_modules\vite\dist\node\chunks\dep-0351185a.js:73694:26)
at async TransformContext.transform (PATH\vue3-element-admin\node_modules\vite\dist\node\chunks\dep-0351185a.js:73834:57)
at async Object.transform (PATH\vue3-element-admin\node_modules\vite\dist\node\chunks\dep-0351185a.js:36985:30)
at async doTransform (PATH\vue3-element-admin\node_modules\vite\dist\node\chunks\dep-0351185a.js:52057:29)

Try updating "vite" and "#vitejs/plugin-vue" packages to the latest version.

jest Cannot find modules inside node_modules folder when using swc compiler (Next,js)

I have a project with Next.js and wanted to do some unit tests on it.
I followed the instruction provided here and managed to make some tests. it's also good to mention that I'm using the rust compiler and typescript for the project.
but there is an issue with one of the tests when loading a module from the node_modules folder. here is the output:
$ jest
info - Loaded env from /Projects/projectname/.env
PASS test/pages/index.test.tsx
PASS components/shared/ui/Button/Button.test.tsx
FAIL components/shared/ui/Card/Card.test.tsx
● Test suite failed to run
Cannot find module 'swiper/react' from 'components/attraction/Gallery/Gallery.tsx'
Require stack:
components/attraction/Gallery/Gallery.tsx
components/attraction/Gallery/index.ts
components/attraction/index.ts
components/index.ts
components/shared/ui/Card/Card.tsx
components/shared/ui/Card/Card.test.tsx
1 | import { IImageResponse } from '#/constants'
2 | import React, { useState } from 'react'
> 3 | import { Swiper, SwiperSlide } from 'swiper/react'
| ^
4 | import SwiperCore, { Pagination } from 'swiper'
5 | import styles from './Gallery.module.scss'
6 |
at Resolver.resolveModule (node_modules/jest-resolve/build/resolver.js:324:11)
at Object.<anonymous> (components/attraction/Gallery/Gallery.tsx:3:51)
anything other than the components inside the project gives me this error.
here is the jest config for the project:
const nextJest = require('next/jest')
const createJestConfig = nextJest({
// Provide the path to your Next.js app to load next.config.js and .env files in your test environment
dir: './',
})
// Add any custom config to be passed to Jest
const customJestConfig = {
setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
moduleNameMapper: {
// Handle module aliases (this will be automatically configured for you soon)
'^#/(.*)$': '<rootDir>/$1',
},
testEnvironment: 'jest-environment-jsdom',
}
// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig)
can anyone help as to why this is happening?

Why do I get an error Unexpected keyword 'new' in my Jest test?

When I run the npm test command in a Jest envroment I get following error Unexpected keyword 'new'
The error report looks like
● Test suite failed to run
Jest encountered an unexpected token
Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.
Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.
By default "node_modules" folder is ignored by transformers.
Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/configuration
For information about custom transformations, see:
https://jestjs.io/docs/code-transformation
Details:
SyntaxError: /Users/steinko/development/TutorialKubernetesClient/JestConfig/cluster.test.js: Unexpected keyword 'new'. (5:11)
3 |
4 | it('should exist a kubeconfig', {
> 5 | expect(new kubernetesClient.KubeConfig()).not.toBeNull();
| ^
6 | })
at Parser._raise (node_modules/#babel/parser/src/parser/error.js:134:45)
at Parser.raiseWithData (node_modules/#babel/parser/src/parser/error.js:129:17)
at Parser.raise (node_modules/#babel/parser/src/parser/error.js:78:17)
at Parser.checkReservedWord (node_modules/#babel/parser/src/parser/expression.js:2386:12)
at Parser.parseIdentifierName (node_modules/#babel/parser/src/parser/expression.js:2336:12)
at Parser.parseIdentifier (node_modules/#babel/parser/src/parser/expression.js:2306:23)
at Parser.parseBindingAtom (node_modules/#babel/parser/src/parser/lval.js:299:17)
at Parser.parseMaybeDefault (node_modules/#babel/parser/src/parser/lval.js:370:25)
at Parser.parseAssignableListItem (node_modules/#babel/parser/src/parser/lval.js:346:23)
at Parser.parseBindingList (node_modules/#babel/parser/src/parser/lval.js:336:24)
----------|---------|----------|---------|---------|-------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
----------|---------|----------|---------|---------|-------------------
All files | 100 | 100 | 100 | 100 |
sum.js | 100 | 100 | 100 | 100 |
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 failed, 1 passed, 2 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 1.069 s
The test that fails look like this
const kubernetesClient = require('#kubernetes/client-node');
it('should exist a kubeconfig', {
expect(new kubernetesClient.KubeConfig()).not.toBeNull();
})
I have setup the Jest enviroment by:
installing Jets
npm install --save-dev jest
and generated the basic configuraion file by
jest --init
With following configuration
The following questions will help Jest to create a suitable configuration for your project
✔ Would you like to use Typescript for the configuration file? … no
✔ Choose the test environment that will be used for testing › jsdom (browser-like)
✔ Do you want Jest to add coverage reports? … yes
✔ Which provider should be used to instrument code for coverage? › v8
✔ Automatically clear mock calls and instances between every test? … yes
When I run the test follwing error occure
test
jest
PASS ./sum.test.js
FAIL ./cluster.test.js
● Test suite failed to run
Jest encountered an unexpected token
Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.
Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.
By default "node_modules" folder is ignored by transformers.
Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/configuration
For information about custom transformations, see:
https://jestjs.io/docs/code-transformation
Details:
SyntaxError: /Users/steinko/development/TutorialKubernetesClient/JestConfig/cluster.test.js: Unexpected keyword 'new'. (5:11)
3 |
4 | it('should exist a kubeconfig', {
> 5 | expect(new kubernetesClient.KubeConfig()).not.toBeNull();
| ^
6 | })
at Parser._raise (node_modules/#babel/parser/src/parser/error.js:134:45)
at Parser.raiseWithData (node_modules/#babel/parser/src/parser/error.js:129:17)
at Parser.raise (node_modules/#babel/parser/src/parser/error.js:78:17)
at Parser.checkReservedWord (node_modules/#babel/parser/src/parser/expression.js:2386:12)
at Parser.parseIdentifierName (node_modules/#babel/parser/src/parser/expression.js:2336:12)
at Parser.parseIdentifier (node_modules/#babel/parser/src/parser/expression.js:2306:23)
at Parser.parseBindingAtom (node_modules/#babel/parser/src/parser/lval.js:299:17)
at Parser.parseMaybeDefault (node_modules/#babel/parser/src/parser/lval.js:370:25)
at Parser.parseAssignableListItem (node_modules/#babel/parser/src/parser/lval.js:346:23)
at Parser.parseBindingList (node_modules/#babel/parser/src/parser/lval.js:336:24)
----------|---------|----------|---------|---------|-------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
----------|---------|----------|---------|---------|-------------------
All files | 100 | 100 | 100 | 100 |
sum.js | 100 | 100 | 100 | 100 |
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 failed, 1 passed, 2 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 1.069 s
What do I have todo to fix this error?

it('should exist a kubeconfig', {
should be
it('should exist a kubeconfig', function() {

React library that uses flow causes issues

I am relatively new to js & react so please bear with me!
I started a new project using create-react-app and react 16.12.0. I installed a library which I guess uses flow.
Trying to use this (npm install) library gives me the following SynatError:
./node_modules/react-resize-aware/src/useResizeAware.js
SyntaxError: [...]\node_modules\react-resize-aware\src\useResizeAware.js: Unexpected token, expected "," (5:31)
3 | import ResizeListener from './ResizeListener';
4 |
> 5 | const defaultReporter = (target: ?HTMLElement) => ({
| ^
6 | width: target != null ? target.offsetWidth : null,
7 | height: target != null ? target.offsetHeight : null,
8 | });
I feel like this is an issue on my side or at least an issue I could fix by doing some changes to the project's package.json.
If so, I would be happy if you could explain to me how.
//EDIT:
I tried adding flow to my project as described here but it gives me the same error.
What works is copying the source of the library into my project and importing it from this local version.
But I would really like to use the npm package, and not maintain a local version of the lib myself.
Thank you so much in advance!

Silly me, I simply imported from the wrong path. I used
import moduleName from "lib-name/src";
instead of
import moduleNamefrom "lib-name";

Can't import package to react boilerplate

Trying to import react-image-crop package using yarn and add it to react boilerplate.
After installing the package getting this error
Module parse failed: /Users/...../frontend/node_modules/react-image-crop/lib/ReactCrop.js Unexpected token (62:25)
You may need an appropriate loader to handle this file type.
|
| function makeAspectCrop(crop, imageAspect) {
| const completeCrop = { ...crop };
|
| if (crop.width) {
# ./app/components/ImageUpload/index.js 23:0-41
# ./app/containers/HomePage/index.js
# ./app/containers/HomePage/Loadable.js
# ./app/containers/App/index.js
# ./app/app.js
# multi eventsource-polyfill webpa
The boilerplate is using babylons env preset so the spread operator should be available.
Any ideas what may be the cause?

Instead of importing directly from react-image-crop I used
import ReactCrop from 'react-image-crop/dist/ReactCrop';
and working like a charm