eslint error in React app persists after attempts to disable - reactjs

I'm developing a Chrome extension using create-react-app. I've gotten my extension to load properly and communicate with the extension background. To get this working I had to flag the chrome global message for eslint.
// This works perfectly
/* global chrome */
let port = chrome.runtime.connect('extensionID',
{name: "bgconnect"})
// Background responses are handled here
port.onMessage.addListener(msg => {
console.log('Got message from background',msg)
if (msg.error) {
this.setState({error: msg.error})
}
})
When I try to add an additional chrome function using chrome.local.storage, however, I get
chrome.storage.local.get(['myKey'], result => {
if (result.myKey) {
this.setState({signedIn: true})
}
})
TypeError: Cannot read property 'local' of undefined
Here's what I've tried:
Verify manifest.js
...
"permissions": [
"<all_urls>",
"tabs",
"storage"
]
...
eslint 1
/* global chrome */
chrome.storage.local.get(['myKey'], result => {
if (result.myKey) {
this.setState({signedIn: true})
}
})
eslint 2
/* eslint-disable no-undef */
chrome.storage.local.get(['myKey'], result => {
if (result.myKey) {
this.setState({signedIn: true})
}
})
/* eslint-enable no-undef */
eslint 3
// eslint-disable-next-line
chrome.storage.local.get(['myKey'], result => {
if (result.myKey) {
this.setState({signedIn: true})
}
})
package.json
...
"eslintConfig": {
"extends": "react-app",
"globals": {
"chrome": true
}
},
...
I still get the same error despite making these changes.
One other weird thing is in console (Windows Powershell) it compiles, while normally when there is an error in the browser it's mirrored here. Instead the console output is:
Compiled successfully!
You can now view extension in the browser.
Local: http://localhost:3000/
On Your Network: http://10.0.0.110:3000/
Note that the development build is not optimized.
To create a production build, use npm run build.
Here's a screen shot of the error message. This happens in create-react-app when you run the app using npm start from the project folder.

Related

Vite serving shader file with wrong (none) MIME type

I'm developing a BabylonJS application. BabylonJS PostProcess class appends .fragment.fx to a given file name and requests that from the server. When my local Vite (version 4.0.4) dev server serves this file the content-type header is empty. This causes Firefox to intepret it as type xml and fail. Chrome fails through a different, but I think related, mechanism.
How do you configure Vite to serve the *.fragment.fx static files as text/plain? I assume I need to disable the default middleware and write some custom code instead, like this: https://vitejs.dev/config/server-options.html#server-middlewaremode but I wanted to first check there wasn't something else going on / a simpler way to configure / fix this.
The vite dev server is started using vite --host --port 3000 --force and the config in vite.config.js is:
import { defineConfig } from 'vite';
export default defineConfig(({ command, mode }) => {
// if (command === 'serve') {
// return {
// // dev specific config
// }
// } else {
// // command === 'build'
// return {
// // build specific config
// }
// }
return {
resolve: {
alias: {
"babylonjs": mode === "development" ? "babylonjs/babylon.max" : "babylonjs",
}
},
base: "",
// assetsInclude: ['**/*.fx'],
};
});
* edit 1 *
I have seen there's a parameter ?raw that can be added to the URL however I don't control how BabylonJS forms the URL so I can't see how to make this work in this situation.
I followed these instructions and set up a dev server using express. I added this block of code above the call to app.use(vite.middlewares):
app.use("**/*.*.fx", async (req, res, next) => {
const url = req.originalUrl
const file_path = path.resolve(__dirname, "." + url)
const file = fs.readFileSync(file_path, "utf-8")
res.status(200).set({ "Content-Type": "text/plain" }).end(file)
})
I now start the dev server using the following script line in the package.json of "dev": "node server",
I could not find a way to solve this by configuring the default vite dev server.

How to exclude some files and directories from sonar coverage report - react, typescript project using jest enzyme

So I have Create React App with typescript template. I have also integrated sonarqube with it.
First When I ran sonar report with below configuration,
scanner(
{
serverUrl: "http://localhost:9000",
token: "*****",
options: {
...
"sonar.tests": "./src",
"sonar.test.inclusions": "**/*.test.tsx,**/*.test.ts, **/*.js",
"sonar.typescript.lcov.reportPaths": "coverage/lcov.info",
"sonar.testExecutionReportPaths": "test-report.xml"
},
},
() => process.exit()
);
The result is as below,
as you can see, it includes following file which is fine.
Now I am changing sonar-scanner.js configuration as below,
const testExclusions = `./src/index.ts,./src/reportWebVitals.ts, ./src/core/constants/**/*,./src/core/interfaces/**/*`;
scanner(
{
serverUrl: "http://localhost:9000",
token: "*****",
options: {
...
"sonar.tests": "./src",
"sonar.test.inclusions": "**/*.test.tsx,**/*.test.ts, **/*.js",
"sonar.test.exclusions": `${testExclusions}` <<=== I don't know if this line plays any role.
"sonar.typescript.lcov.reportPaths": "coverage/lcov.info",
"sonar.testExecutionReportPaths": "test-report.xml"
},
},
() => process.exit()
);
BUT again result is same. there is no change in the report.
Then, I introduced jest configuration in package.json as follow,
"test:report": "npm run test -- --watchAll=false --coverage --testResultsProcessor jest-sonar-reporter",
...
...
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx,tsx,ts}",
"!src/**/*.d.ts",
"!src/reportWebVitals.ts",
"!src/index.ts",
"!src/core/constants/**/*",
"!src/core/interfaces/**/*"
]
}
and I ran npm run test:report and it generated new test-report.xml with below files,
as you can see, it doesn't cover excluded files/directories.
When I ran sonar-scanner again, I believed now it will not show excluded files/directories in sonar coverage report but it is not the case yet. It is still including those files and directories.
What is wrong with this setup ?
x
Make changes as follow,
1) For some reason, need to remove ./ before src as below,
const testExclusions = `src/index.ts,src/reportWebVitals.ts, src/core/constants/**/*,src/core/interfaces/**/*`
2) use: sonar.coverage.exclusions property in sonar options instead of sonar.test.exclusions
"sonar.coverage.exclusions": `${testExclusions}`
Optional:
3) if you want to remove jest configuration from package.json. It is fine.

Fetching a github repo in react gives a "Module "stream" has been externalized for browser compatibility and cannot be accessed in client code" error

I am currently stuck with a problem trying to fetch github repo data using the octokit npm package.
I use vite to run a dev server and when I try to make a request, the error that i get is:
Uncaught Error: Module "stream" has been externalized for browser compatibility and cannot be accessed in client code.
My React .tsx file looks like this:
import { Octokit, App } from 'octokit'
import React from 'react'
const key = import.meta.env.GITHUB_KEY
const octokit = new Octokit({
auth: key
})
await octokit.request('GET /repos/{owner}/{repo}', {
owner: 'OWNER',
repo: 'REPO'
})
export default function Repos() {
return (
<>
</>
)
}
I have redacted the information for privacy purposes.
If anyone knows how to resolve this issue with vite, please let me know!
Check first if this is similar to octokit/octokit.js issue 2126
I worked around this problem by aliasing node-fetch to isomorphic-fetch. No idea if it works for all usages within octokit, but works fine for my project.
You'll need to install the isomorphic-fetch dependency before making this config change.
// svelte.config.js
const config = { // ... kit: {
// ...
vite: {
resolve: {
alias: {
'node-fetch': 'isomorphic-fetch',
},
},
},
},
};
export default config;
Note: there are still questions about the support/development of octokit: issue 620.

Cypress headless - no loaders are configured to process png files

I am trying to run cypress test cases headless using cmd command
npx cypress run
But it gives me below error -
Do I need to install any dependency for this to load.
Even css files are not getting loaded.
Note : I haven't installed webpack or any other dependency. Only cypress is installed additionally.
Yes, you will need to extend the webpack configuration used by cypress to handle the files you would like to load. You can find an example here
Below I've modified the example to work with cypress 10.
// cypress.config.ts
import { defineConfig } from 'cypress';
import findWebpack from 'find-webpack';
import webpackPreprocessor from '#cypress/webpack-preprocessor';
const webpackOptions = findWebpack.getWebpackOptions();
const options = {
webpackOptions,
watchOptions: {},
};
export default defineConfig({
e2e: {
setupNodeEvents(on) {
// implement node event listeners here
// on('file:preprocessor', webpack(options));
// use a module that carefully removes only plugins
// that we found to be breaking the bundling
// https://github.com/bahmutov/find-webpack
const cleanOptions = {
reactScripts: true,
};
findWebpack.cleanForCypress(cleanOptions, webpackOptions);
on('file:preprocessor', webpackPreprocessor(options));
},
specPattern: 'src/**/*.cy.{js,jsx,ts,tsx}',
},
});

React Native 0.60.3 babel-plugin-transform-remove-console not working

I am trying to remove console.log outputs from my react-native application's output, but when I run
ENVFILE=.env.production react-native run-android --variant=release
and
adb logcat
I still see my app's data being logged to the console.
I used the following documentation: https://facebook.github.io/react-native/docs/performance.html#using-consolelog-statements.
Here is my .babelrc file:
{
"presets": ["react-native"],
"env": {
"production": {
"plugins": ["transform-remove-console"]
}
}
}
What am I missing ?
Im on react-native 0.60.3
and using "babel-plugin-transform-remove-console": "^6.9.4",
I have "#babel/core": "^7.5.5" and "react-native": "^0.60.5"
The approach descibed in React Native Documentation was not working for me.After many try and error and exploring issues on GitHub I got it working :
In babel.config.js add this -
module.exports = api => {
const babelEnv = api.env();
const plugins = [];
//change to 'production' to check if this is working in 'development' mode
if (babelEnv !== 'development') {
plugins.push(['transform-remove-console', {exclude: ['error', 'warn']}]);
}
return {
presets: ['module:metro-react-native-babel-preset'],
plugins,
};
};
To see changes run using npm start -- --reset-cache
More Info at
https://github.com/babel/minify/issues/934
https://github.com/babel/minify/issues/950#issuecomment-539590159
Using babel.config.js instead of .babelrc, it seems that process.env.BABEL_ENV is used to determine whether to include configs listed under env.production. However, process.env.BABEL_ENV is set to undefined during build.
To get around this, I'm returning a different object depending on if process.env.BABEL_ENV OR process.env.NODE_ENV indicate production build.
YMMV.
module.exports = function(api) {
api.cache(true); // necessary
if (process.env.NODE_ENV === 'production' || process.env.BABEL_ENV === 'production') {
return {
"presets": ["module:metro-react-native-babel-preset"],
"plugins": ["react-native-paper/babel", "transform-remove-console"]
}
} else {
return {
"presets": ["module:metro-react-native-babel-preset"],
}
}
}
install babel-plugin-transform-remove-console
yarn add babel-plugin-transform-remove-console -D
then add follow code in babel.config.js like this
module.exports = function (api) {
const babelEnv = api.env();
api.cache(true);
const plugins = [
[];
if (babelEnv === 'production') {
plugins.push(['transform-remove-console', {exclude: ['error', 'warn']}]);
}
return {
presets: ['babel-preset-expo'],
plugins,
};
};
then run this command
yarn start --reset-cache
NOTE:
this will remove console.log in the production build. if you wanna a test in development you can pass development instead of production

Resources