Error in aws-amplify style.css while running the npm test - reactjs

Had issue while running the npm test
C:\projects\Test\node_modules\#aws-amplify\ui\dist\style.css:13:root {^
error:
SyntaxError: Unexpected token :
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
at Object.<anonymous> (node_modules/aws-amplify-react/src/Amplify-UI/Amplify-UI-Components-React.jsx:5:1)
here are my import statements
import Amplify from 'aws-amplify';
import { AuthPiece } from 'aws-amplify-react';
import { Auth, Logger, JS } from 'aws-amplify';
If I comment out the style.css it works without any errors.
But how can I remove this issue so that it doesnt cause issue to others when I commit code.
Had checked all the existing answers provided in different forums.But that doesnt work for me.

I ran into this problem as well, and this thread helped me resolve it. In my case, I needed to install identity-obj-proxy package and map it to the jest config:
npm install --save-dev identity-obj-proxy
package.json
"jest": {
"moduleNameMapper": {
"\\.(css|less)$": "identity-obj-proxy"
}
}
I hope this helps!

Related

React-Native Firebase Snack Expo Failed to resolve dependency

I'm receiving this error in Snack Expo when I try to use firebase:
package.json (7:5)
Failed to resolve dependency 'firebase#9.5.0' (Can't resolve '' in '/tmp/snackager/snackager/buildStatus/1/firebase#9.5.0-ios,android,web/package')
In package.json file try changing firebase version to "8.0.0".
{
"dependencies": {
...
"firebase": "8.0.0",
...
}
}

Cypress throws Webpack compilation error when trying to run tests inside a reactjs app

Error: Webpack Compilation Error ./client/src/containers/Login.jsx
Module not found: Error: Can't resolve 'Src/api' in
'/Users/user/Documents/product-bots/client/src/containers' resolve
'Src/api' in
'/Users/sathish/Documents/product-bots/client/src/containers' Parsed
request is a module using description file:
/Users/sathish/Documents/product-bots/client/package.json (relative
path: ./src/containers)
I am trying to set up and run cypress inside a react.js app. There is an import statement in the app that says import api from 'Src/api. Cypress fails at this point and throws the above error.
Can anyone please help me to resolve this issue?
Below is the test code
import Login from '../../../client/src/containers/Login'
describe('Login', () => {
it('Tries login', () => {
mount(<Login />)
cy.get('.login-form').should('exist')
})
})
The above code calls login.jsx which has the 'Src/api' import.
jsconfig.js:
"paths": {"Src/*": ["src/*"] }
webpack.config.js:
alias: { Src: path.resolve(Paths.srcDir)

How to test a React Chrome Extension?

So I'm developing a chrome extension with React. Everything works fine, but every time a change is made, I have to rebuild the extension with:
npm run build
...and then go back into my browser and load the extension with the build. This works fine, as aforementioned, but it's time consuming, and I feel that there's a better way.
I can't test in-browser because I'm using Chrome APIs (storage sync, etc.)
Is there any other way to test? Or do I have to build every time?
Use rollup-plugin-chrome-extension.
npm init vite#latest
npm i rollup-plugin-chrome-extension#beta -D
Update these files
// vite.config.js
import { defineConfig } from "vite";
import react from "#vitejs/plugin-react";
import { chromeExtension } from "rollup-plugin-chrome-extension";
import manifest from './manifest.json'
export default defineConfig({
plugins: [react(), chromeExtension({ manifest })],
});
// manifest.json
{
"manifest_version": 3,
"name": "Rpce React Vite Example",
"version": "1.0.0",
"action": { "default_popup": "index.html" }
}
Then run npm run dev
Go to chrome://extensions in your browser and drag the dist folder from your project into the window. Start developing with hot reloading.

How to use async await with webpack and typescript in react?

I'm getting this error: regeneratorRuntime is not defined
My babel.config.js file:
https://www.codepile.net/pile/XqDxeAq6
My webpack.config.js file
https://www.codepile.net/pile/5ndebjVq
Install the runtime dependency:
npm i --save-dev #babel/plugin-transform-runtime
Add the plugin to your babel configuration:
{
"plugins": ["#babel/plugin-transform-runtime"]
}
Uncaught ReferenceError: regeneratorRuntime is not defined in React

Auth0 is not defined. angular-auth0, angularjs

Package.json:
"angular-auth0": "3.0.0",
app.js
import auth0 from 'angular-auth0';
Error in console.
angular-auth0.js?2d7e:152 Uncaught ReferenceError: auth0 is not defined
angular-auth0.js:
/***/ }),
/* 2 */
/***/ (function(module, exports) {
module.exports = auth0;
/***/ })
/******/ ]);
Using webpack.
Any ideas?
You are most likely missing the auth0-js package.
https://www.npmjs.com/package/auth0-js
Run:
npm install auth0-js
Other possible solution:
https://github.com/auth0/angular-auth0/issues/28
require('angular-auth0/src');

Resources