We Keep Coding

Next.js Jest 28 - Can't transform SVG files

I am using Next.js 12.0.7 and Jest 28.1.0. And, also using the next-react-svg library to import my SVG files into the components. Here is my jest.config.js file -
// jest.config.js
const nextJest = require("next/jest");
const createJestConfig = nextJest({
dir: "./",
});
const customJestConfig = {
setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
moduleNameMapper: {
"^#/(.*)$": "<rootDir>/src/$1",
},
moduleDirectories: ["node_modules", "<rootDir>/"],
modulePathIgnorePatterns: ["<rootDir>/tests/"],
testEnvironment: "jest-environment-jsdom",
transform: {
"^.+\\.tsx?$": "ts-jest",
"^.+\\.svg$": "<rootDir>/__mocks__/jest-svg-transformer.js",
},
};
module.exports = createJestConfig(customJestConfig);
And here is the jest-svg-transformer.js file where I am trying to mock the SVG files -
// __mocks__/jest-svg-transformer.js
const path = require("path");
module.exports = {
process(src, filePath) {
if (path.extname(filePath) !== ".svg") {
return src;
}
const name = `svg-${path.basename(filePath, ".svg")}`
.split(/\W+/)
.map((x) => `${x.charAt(0).toUpperCase()}${x.slice(1)}`)
.join("");
return `
const React = require('react');
function ${name}(props) {
return React.createElement(
'svg',
Object.assign({}, props, {'data-file-name': ${name}.name})
)
}
module.exports = ${name}
`;
},
};
I have mentioned the error below which I'm getting when trying to run yarn test or jest.
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of `Loader`.
at text (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/src/modules/common/components/Loader/index.tsx:5:34)
at div
at LoginPage (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/src/modules/auth/components/LoginPage/index.tsx:17:47)
at Login
at Provider (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-redux/lib/components/Provider.js:21:20)
15 | <p className={styles.text}>
16 | <small>{text}</small>
> 17 | </p>
| ^
18 | ) : (
19 | ""
20 | )}
at printWarning (node_modules/react/cjs/react-jsx-runtime.development.js:117:30)
at error (node_modules/react/cjs/react-jsx-runtime.development.js:93:5)
at jsxWithValidation (node_modules/react/cjs/react-jsx-runtime.development.js:1152:7)
at Object.jsxWithValidationDynamic [as jsx] (node_modules/react/cjs/react-jsx-runtime.development.js:1209:12)
at Loader (src/modules/common/components/Loader/index.tsx:17:58)
at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:14985:18)
at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:17811:13)
console.error
Error: Uncaught [Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of `Loader`.]
at reportException (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
at innerInvokeEventListeners (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:343:9)
at invokeEventListeners (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:276:3)
at HTMLUnknownElementImpl._dispatch (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:223:9)
at HTMLUnknownElementImpl.dispatchEvent (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
at HTMLUnknownElement.dispatchEvent (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:241:34)
at Object.invokeGuardedCallbackDev (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:3994:16)
at invokeGuardedCallback (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:4056:31)
at beginWork$1 (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:23964:7)
at performUnitOfWork (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:22779:12) {
detail: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of `Loader`.
at createFiberFromTypeAndProps (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:25058:21)
at createFiberFromElement (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:25086:15)
at reconcileSingleElement (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:14052:23)
at reconcileChildFibers (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:14112:35)
at reconcileChildren (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:16990:28)
at updateHostComponent (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:17632:3)
at beginWork (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:19080:14)
at HTMLUnknownElement.callCallback (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:3945:14)
at HTMLUnknownElement.callTheUserObjectsOperation (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
at innerInvokeEventListeners (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:340:25)
at invokeEventListeners (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:276:3)
at HTMLUnknownElementImpl._dispatch (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:223:9)
at HTMLUnknownElementImpl.dispatchEvent (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
at HTMLUnknownElement.dispatchEvent (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:241:34)
at Object.invokeGuardedCallbackDev (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:3994:16)
at invokeGuardedCallback (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:4056:31)
at beginWork$1 (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:23964:7)
at performUnitOfWork (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:22779:12)
at workLoopSync (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:22707:5)
at renderRootSync (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:22670:7)
at performSyncWorkOnRoot (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:22293:18)
at scheduleUpdateOnFiber (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:21881:7)
at updateContainer (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:25482:3)
at /Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:26021:7
at unbatchedUpdates (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:22431:12)
at legacyRenderSubtreeIntoContainer (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:26020:5)
at Object.render (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:26103:10)
at /Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/#testing-library/react/dist/pure.js:101:25
at batchedUpdates$1 (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:22380:12)
at act (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom-test-utils.development.js:1042:14)
at Object.render (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/#testing-library/react/dist/pure.js:97:26)
at Object.<anonymous> (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/__tests__/index.test.tsx:9:11)
at Promise.then.completed (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jest-circus/build/utils.js:333:28)
at new Promise (<anonymous>)
at callAsyncCircusFn (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jest-circus/build/utils.js:259:10)
at _callCircusTest (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jest-circus/build/run.js:277:40)
at processTicksAndRejections (node:internal/process/task_queues:95:5)
at _runTest (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jest-circus/build/run.js:209:3)
at _runTestsForDescribeBlock (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jest-circus/build/run.js:97:9)
at _runTestsForDescribeBlock (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jest-circus/build/run.js:91:9)
at run (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jest-circus/build/run.js:31:3)
at runAndTransformResultsToJestFormat (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:135:21)
at jestAdapter (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:92:19)
at runTestInternal (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jest-runner/build/runTest.js:411:16)
at runTest (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jest-runner/build/runTest.js:499:34)
at TestRunner.runTests (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jest-runner/build/index.js:145:12)
at TestScheduler.scheduleTests (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/#jest/core/build/TestScheduler.js:317:13)
at runJest (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/#jest/core/build/runJest.js:407:19)
at _run10000 (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/#jest/core/build/cli/index.js:339:7)
at runCLI (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/#jest/core/build/cli/index.js:190:3)
at Object.run (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jest-cli/build/cli/index.js:155:37),
type: 'unhandled exception'
}
at VirtualConsole.<anonymous> (node_modules/jest-environment-jsdom/build/index.js:70:23)
at reportException (node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:70:28)
at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:343:9)
at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:276:3)
at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:223:9)
at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
console.error
The above error occurred in the <div> component:
at div
at div
at text (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/src/modules/common/components/Loader/index.tsx:5:34)
at div
at LoginPage (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/src/modules/auth/components/LoginPage/index.tsx:17:47)
at Login
at Provider (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-redux/lib/components/Provider.js:21:20)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
at logCapturedError (node_modules/react-dom/cjs/react-dom.development.js:20085:23)
at update.callback (node_modules/react-dom/cjs/react-dom.development.js:20118:5)
at callCallback (node_modules/react-dom/cjs/react-dom.development.js:12318:12)
at commitUpdateQueue (node_modules/react-dom/cjs/react-dom.development.js:12339:9)
at commitLifeCycles (node_modules/react-dom/cjs/react-dom.development.js:20736:11)
at commitLayoutEffects (node_modules/react-dom/cjs/react-dom.development.js:23426:7)
at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:3945:14)
FAIL __tests__/index.test.tsx
Home
✕ renders a heading (37 ms)
● Home › renders a heading
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of `Loader`.
7 | describe("Home", () => {
8 | it("renders a heading", () => {
> 9 | render(
| ^
10 | <Provider store={store}>
11 | <Login />
12 | </Provider>
at createFiberFromTypeAndProps (node_modules/react-dom/cjs/react-dom.development.js:25058:21)
at createFiberFromElement (node_modules/react-dom/cjs/react-dom.development.js:25086:15)
at reconcileSingleElement (node_modules/react-dom/cjs/react-dom.development.js:14052:23)
at reconcileChildFibers (node_modules/react-dom/cjs/react-dom.development.js:14112:35)
at reconcileChildren (node_modules/react-dom/cjs/react-dom.development.js:16990:28)
at updateHostComponent (node_modules/react-dom/cjs/react-dom.development.js:17632:3)
at beginWork (node_modules/react-dom/cjs/react-dom.development.js:19080:14)
at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:3945:14)
at HTMLUnknownElement.callTheUserObjectsOperation (node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:340:25)
at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:276:3)
at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:223:9)
at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:241:34)
at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:3994:16)
at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:4056:31)
at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:23964:7)
at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:22779:12)
at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:22707:5)
at renderRootSync (node_modules/react-dom/cjs/react-dom.development.js:22670:7)
at performSyncWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:22293:18)
at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:21881:7)
at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:25482:3)
at node_modules/react-dom/cjs/react-dom.development.js:26021:7
at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:22431:12)
at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:26020:5)
at Object.render (node_modules/react-dom/cjs/react-dom.development.js:26103:10)
at node_modules/#testing-library/react/dist/pure.js:101:25
at batchedUpdates$1 (node_modules/react-dom/cjs/react-dom.development.js:22380:12)
at act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:1042:14)
at Object.render (node_modules/#testing-library/react/dist/pure.js:97:26)
at Object.<anonymous> (__tests__/index.test.tsx:9:11)
at TestScheduler.scheduleTests (node_modules/#jest/core/build/TestScheduler.js:317:13)
at runJest (node_modules/#jest/core/build/runJest.js:407:19)
at _run10000 (node_modules/#jest/core/build/cli/index.js:339:7)
at runCLI (node_modules/#jest/core/build/cli/index.js:190:3)
Test Suites: 1 failed, 1 total
Tests: 1 failed, 1 total
Snapshots: 0 total
Time: 0.966 s, estimated 1 s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
This is the test that is failing -
// __tests__/index.test.tsx
import { render, screen } from "#testing-library/react";
import "#testing-library/jest-dom";
import { Provider } from "react-redux";
import { store } from "#/store";
import Login from "#/pages/login";
describe("Home", () => {
it("renders a heading", () => {
render(
<Provider store={store}>
<Login />
</Provider>
);
const heading = screen.getByTestId("page-loader-element");
expect(heading).toBeInTheDocument();
});
});
This is the component that is throwing me the error -
// src/modules/common/components/Loader/index.tsx
import React from "react";
import Logo from "#/assets/icons/Logo.svg";
import styles from "./Loader.module.scss";
export default function Loader({ text }: { text?: string }) {
return (
<div
className="d-flex flex-column justify-content-center align-items-center w-100 my-3"
data-testid="page-loader-element"
>
<div className="animate__animated animate__pulse animate__infinite infinite">
<Logo />
</div>
{text ? (
<p className={styles.text}>
<small>{text}</small>
</p>
) : (
""
)}
</div>
);
}
Here is my jest.setup.js file -
// jest.setup.js
import "#testing-library/jest-dom/extend-expect";
These are the versions of the related libraries I'm using -
// package.json
// ...
"dependencies": {
"next": "^12.0.7",
"next-react-svg": "1.1.3",
// ...
},
"devDependencies": {
// ...
"#types/jest": "^28.1.1",
"babel-jest": "^28.1.0",
"jest": "^28.1.0",
"jest-cli": "28.1.0",
"jest-environment-jsdom": "^28.1.0",
"jest-svg-transformer": "^1.0.0",
"ts-jest": "^28.0.4",
"typescript": "4.4.3"
},
"resolutions": {
"#types/react": "17.0.2",
"#types/react-dom": "17.0.2"
},
//...
And finally, this is what my current tsconfig.json file looks like -
// tsconfig.json
{
"compilerOptions": {
// ...
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"baseUrl": ".",
"paths": {
"#/*": ["src/*"]
},
},
"include": [
"next-env.d.ts",
"additional.d.ts",
"decs.d.ts",
"**/*.ts",
"**/*.tsx",
"jest.setup.js"
],
"exclude": ["node_modules", "playwright.config.ts"],
"ts-node": {
"transpileOnly": true,
"files": true,
"compilerOptions": {
"rootDir": "."
}
}
}
I tried using the jest-svg-transformer library also. But no luck!

Finally resolved this error by upgrading the Next.js version from 12.0.7 to 12.1.0. As per this official blog (aka changelog) Next.js 12.1 provides a Zero-configuration Jest plugin.
So, here's the simplified jest.config.js file (as per the official documentation) I am using right now:
const nextJest = require("next/jest");
const createJestConfig = nextJest({
dir: "./",
});
const customJestConfig = {
setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
moduleNameMapper: {
"^#/(.*)$": "<rootDir>/src/$1", // as all of my files are stored in ./src directory, & I have setup my paths to be compiled as `"#/*": ["src/*"]` in my tsconfig.json file
},
moduleDirectories: ["node_modules", "<rootDir>/"],
modulePathIgnorePatterns: ["<rootDir>/tests/"], // the directory I want jest to ignore
testEnvironment: "jest-environment-jsdom",
};
module.exports = createJestConfig(customJestConfig);
As you can see here, I am no longer using any mock files to mock or transform my SVG files. And I started using the #svgr/webpack instead of using next-react-svg to import SVG files in my project.

I found an answer in github. https://github.com/gregberge/svgr/issues/83#issuecomment-1196022120
It's just define your "moduleNameMapper" like this:
{
"moduleNameMapper": {
'^.+\\.(svg)$': '<rootDir>/src/mocks/svg.ts',
}
}

'Object(...) is not a function' in Amplify Authenticator in vue2

I would like to use the AWS Amplify Authenticator in a js vue2 app. The manual that I used can be found here: https://github.com/aws-amplify/amplify-ui/tree/legacy/legacy/amplify-ui-vue#recommended-usage
But I end up getting an Object(...) is not a function error.
TypeError: Object(...) is not a function
at Module.eval (index.js?2bbc:22:1)
at eval (index.js:12544:30)
at Module../node_modules/#aws-amplify/ui-vue/dist/index.js (sign-in.js:167:1)
at __webpack_require__ (app.js:859:30)
at fn (app.js:151:20)
at eval (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/pages/auth/SignInPage.vue?vue&type=script&lang=js&:2:77)
at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/pages/auth/SignInPage.vue?vue&type=script&lang=js& (sign-in.js:179:1)
at __webpack_require__ (app.js:859:30)
at fn (app.js:151:20)
at eval (SignInPage.vue?0642:1:1)
The page SignInPage.vue looks like this:
<template>
<div>
<amplify-authenticator />
</div>
</template>
<script>
import '#aws-amplify/ui-vue'
import { onAuthUIStateChange } from '#aws-amplify/ui-components'
export default {
name: 'SignInPage',
created() {
this.unsubscribeAuth = onAuthUIStateChange((authState, authData) => {
this.authState = authState
this.user = authData
})
},
data() {
return {
user: undefined,
authState: undefined,
unsubscribeAuth: undefined,
}
},
beforeDestroy() {
this.unsubscribeAuth()
},
}
</script>
I tried both the example on the top of the page, as the bottom examples (migrated section), both ending up with the same error. Can anybody help me out?
Update 1:
SignInPage.vue
<template>
<div>
<authenticator />
</div>
</template>
<script>
import { Authenticator } from '#aws-amplify/ui-vue'
import '#aws-amplify/ui-vue/styles.css'
export default {
name: 'SignInPage',
components: { Authenticator },
}
</script>
package.json
"dependencies": {
"#apollo/client": "^3.3.9",
"#aws-amplify/ui-vue": "^2.3.11",
"#vue/apollo-composable": "^4.0.0-alpha.12",
"#vue/composition-api": "^1.0.0-rc.2",
"aws-amplify": "^4.3.20",
"aws-appsync": "^4.0.3",
"vue": "^2.6.11",
}

After a lot of tries the following seems to solve it, with the help of this page: https://docs.amplify.aws/lib/auth/getting-started/q/platform/js/#option-1-use-pre-built-ui-components
Steps I have taken:
uninstall the all the aws-amplify packages
(re-)add aws-amplify #aws-amplify/ui-components packages
remove the #aws-amplify related imports from the SignIn page
add the following to the main.js
import { applyPolyfills, defineCustomElements } from '#aws-amplify/ui-components/loader';
applyPolyfills().then(() => {
defineCustomElements(window);
});
Vue.config.ignoredElements = [/amplify-\w*/];
SignInPage.vue
<template>
<div>
<amplify-authenticator />
</div>
</template>
<script>
export default {
name: 'SignInPage',
}
</script>

Vue 3: Add global method via Plugin not working

I'm trying to build a method that can be used inside any template to automatically build local image urls.
The issue I'm facing is that when I try to build a plugin that adds a global property, it's not working!
Plugin code
// src/plugins/urlbuilder.js
export default {
install: (app) => {
app.config.globalProperties.buildImageUrl = imageName => require('#/assets/images/' + imageName);
}
}
Main.js file
// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import urlbuilder from './plugins/urlbuilder.js'
createApp(App).use(router).use(urlbuilder).mount('#app')
Home view where I render the image
// src/views/Home.vue
<template>
<img :src="buildImageUrl('myimage.jpg')">
</template>
and I'm getting this error in my the dev console:
Uncaught (in promise) TypeError: _ctx.buildImageUrl is not a function
at Proxy.render (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader-v16/dist/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader-v16/dist/index.js?!./src/views/Home.vue?vue&type=template&id=fae5bece&scoped=true:57)
at renderComponentRoot (runtime-core.esm-bundler.js:922)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:4667)
at ReactiveEffect.run (reactivity.esm-bundler.js:195)
at setupRenderEffect (runtime-core.esm-bundler.js:4793)
at mountComponent (runtime-core.esm-bundler.js:4576)
at processComponent (runtime-core.esm-bundler.js:4534)
at patch (runtime-core.esm-bundler.js:4138)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:4744)
at ReactiveEffect.run (reactivity.esm-bundler.js:195)
Note: This works when I add purely a global property, but I read the best way to do this was via plugin.
It works when I do this:
app = createApp(App)
app.config.globalProperties.buildImageUrl = imageName => require('#/assets/images/' + imageName)
app.use(router).mount('#app')
What am I doing wrong?

A better way would be to use provide and inject
import urlbuilder from './plugins/urlbuilder.js'
app.provide('$urlbuilder', urlbuilder);
Read more about provide and inject

You should get global properties by this:
const instance = getCurrentInstance()
const globalProperties = instance.appContext.config.globalProperties
console.log(globalProperties)
Recommand use provide and inject.
Or use a hook:
useGlobalProps.ts
import { getCurrentInstance } from 'vue'
import type { ComponentInternalInstance } from 'vue'
function useGlobalProps() {
const { appContext } = getCurrentInstance() as ComponentInternalInstance
const globalProps = appContext.config.globalProperties
return { ...globalProps }
}
export default useGlobalProps
use it in component:
import useGlobalProps from '#/hooks/useGlobalProps'
const { testFn, globalFn } = useGlobalProps()
testFn()
globalFn('global function in main.js')
Register globalFn in main.js
app.config.globalProperties.globalFn = function testGlobal(name: string) {
console.log(name)
}
Register testFn by plugin:
myPlugin.js
export default function (app: App<HTMLElement>) {
app.config.globalProperties.testFn = () => {
console.log('install global properties')
}
return app
}
use plugin in main.js
import myPlugin from './myPlugin.js'
// ...
app.use(myPlugin)

How to use `<script setup>`?

Vue version: 3.0.11
With the following code:
<template>
<button #click="inc">{{ count }}</button>
</template>
<script setup>
import { ref } from 'vue'
export const count = ref(0)
export const inc = () => count.value++
</script>
I got:
ERROR Failed to compile with 1 error
error in ./src/views/HyperScript.vue?vue&type=script&setup=true&lang=js
Syntax Error: TypeError: Cannot read property 'content' of null
# ./src/views/HyperScript.vue?vue&type=script&setup=true&lang=js 1:0-293 1:0-293 1:294-576 1:294-576
# ./src/views/HyperScript.vue
# ./src/router/index.ts
# ./src/main.ts
# multi (webpack)-dev-server/client?http://192.168.6.175:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

You don't need to add export in your script :
<template>
<button #click="inc">{{ count }}</button>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(0)
const inc = () => count.value++
</script>
Live Demo

How to use Vue i18n translation in .js file?

I'm working on VueCLI. I've created .js file that contains rules for inputs:
import Vue from 'vue'
export const $t = (sign) => Vue.prototype.$t(sign)
function checkMail(email) {
const re = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ // eslint-disable-line no-eval
return re.test(String(email).toLowerCase())
}
const rules = {
gdprRequired: (v) => !!v || $t('registerPage.gdprNotChecked'),
emailRules: [(v) => checkMail(v) || $t('registerPage.wrongMail')],
}
export default rules
I want to declare rules in external js file and then import it in other vue files. When I do this rule check value properly, but It don't show translated error messeage. I tried export const $t = (sign) => Vue.prototype.$t(sign), bcs similar code worked for nuxt, but here, in VueCLI I got error:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in beforeMount hook: "ReferenceError: $t is not defined"
found in
---> <VTextField>
<VForm>
<Register>
<VMain>
<VApp>
<Session> at src/layouts/Session/Session.vue
<App> at src/App.vue
<Root>
and this:
vue.runtime.esm.js?2b0e:1888 ReferenceError: $t is not defined
at rules.emailRules (rules.js?d86d:21)
at VueComponent.validate (index.ts?91bf:254)
at VueComponent.beforeMount (index.ts?91bf:217)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
at callHook (vue.runtime.esm.js?2b0e:4219)
at mountComponent (vue.runtime.esm.js?2b0e:4043)
at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8415)
at init (vue.runtime.esm.js?2b0e:3118)
at createComponent (vue.runtime.esm.js?2b0e:5978)
at createElm (vue.runtime.esm.js?2b0e:5925)
Here importing code in 'register.vue':
import rulesConstant from "#/constants/rules";
Computing exported rules to vue variable:
computed: {
rules() {
return rulesConstant;
},
},
Example use:
<v-checkbox
class="custom-checkbox"
:rules="[rules.gdprRequired]"
v-model="gdprCheck"
></v-checkbox>
Can You help me?

Most common way of using vue-i18n outside of Vue components is by importing the singleton instance of VueI18n class and using it directly:
#/i18n/index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import locales from './locales'
Vue.use(VueI18n);
export default new VueI18n({
locale: 'en',
messages: locales,
});
#/constants/rules
import i18n from '#/i18n/index.js'
const rules = {
gdprRequired: (v) => !!v || i18n.t('registerPage.gdprNotChecked'),
emailRules: [(v) => checkMail(v) || i18n.t('registerPage.wrongMail')],
}
export default rules
This way you have all the instance methods at your disposal, not just t