React - eslint is giving value of null error - reactjs

I am using same linting configurations on github and locally. When I create a PR, it gives me following error:
TypeError: Cannot read property 'value' of null
on line:
this.axios.defaults.headers.Authorization = `Token ${process.env.NEXT_PUBLIC_REACT_APP_API_TOKEN}`;
How can I fix it?

Related

React Native : Invariant Violation: `new NativeEventEmitter()` requires a non-null argument

I am writing jest test case for a particular file, the file has NativeModule import in it.
While running the test case, I am getting the following error:
● Test suite failed to run
Invariant Violation: `new NativeEventEmitter()` requires a non-null argument.
at invariant (node_modules/invariant/invariant.js:40:15)
at new NativeEventEmitter (node_modules/react-native/Libraries/EventEmitter/NativeEventEmitter.js:45:7)
at Object.<anonymous> (node_modules/react-native-quantum-metric-library/index.js:1:322)
After googling the above error, I did few changes by adding the following code inside the test file.
jest.mock('react-native/Libraries/EventEmitter/NativeEventEmitter');
After adding the above line then I got the following error:
Test suite failed to run
TypeError: Cannot set properties of undefined (setting 'eventType')
at Object.<anonymous> (node_modules/react-native-quantum-metric-library/index.js:1:367)
After googling again, I modified the above code with the following code.
jest.mock('react-native/Libraries/EventEmitter/NativeEventEmitter.js', () => {
const {EventEmitter} = require('events');
return EventEmitter;
});
After above modification I am getting the below error.
● Test suite failed to run
TypeError: _reactNative.NativeEventEmitter is not a constructor
at Object.<anonymous> (node_modules/react-native-quantum-metric-library/index.js:1:322)
Can anyone please help me to resolve the above issue.

TypeError [ERR_UNKNOWN_FILE_EXTENSION]

I am trying to do a mini react project and am using external API. I am getting this weird error. Before I was getting error when doing any type of import, but then I added type: "module" in package.json, so now instead I get completely different type of error.
Error:
node:internal/errors:484
ErrorCaptureStackTrace(err);
^
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".tmp" for /Users/rokas/Projects/quiz-website/src/node_7c47523b50d8c.tmp
at new NodeError (node:internal/errors:393:5)
at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:79:11)
at defaultGetFormat (node:internal/modules/esm/get_format:121:38)
at defaultLoad (node:internal/modules/esm/load:81:20)
at nextLoad (node:internal/modules/esm/loader:163:28)
at ESMLoader.load (node:internal/modules/esm/loader:605:26)
at ESMLoader.moduleProvider (node:internal/modules/esm/loader:457:22)
at new ModuleJob (node:internal/modules/esm/module_job:63:26)
at #createModuleJob (node:internal/modules/esm/loader:480:17)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:434:34) {
code: 'ERR_UNKNOWN_FILE_EXTENSION'
}
Node.js v18.12.1
Thoughts?

I have unknown error in console in my react application

What does it mean?
Error in event handler for (unknown):
TypeError: Cannot read property 'response' of undefined
at t.runtime.sendMessage.e (chrome-extension://mlomiejdfkolichcflejclcbmpeaniij/dist/content_script_bundle.js:1:22694)
Chrome extension with id mlomiejdfkolichcflejclcbmpeaniij seems to be ghostery. You probably should disable it for local development.

Use React Fragment with TypeScript on a React-Native project

I just upgraded React to 16.2.0 on my React-Native project to use the new Fragment syntax.
I have a component which returns something like this now:
return (
<>
<View>...</View>
<View>...</View>
</>
);
TypeScript doesn't complain about the syntax which is great, however I get an error when I try to run this code:
Bundling `index.js` [development, non-minified] 45.8% (1078/1593), failed.
error: bundling failed: SyntaxError in /Users/alexmngn/Workspace/MyProject/MyComponent.tsx: /Users/alexmngn/Workspace/MyProject/MyComponent.tsx: Unexpected token (68:17)
> 68 | return (<>
| ^
It doesn't seem to compile the fragment syntax back to ES5.
And when I try to use React.Fragment instead I get a TypeScript error:
/Users/alexmngn/Workspace/MyProject/MyComponent.tsx(1,28): error TS2305:
Module '"/Users/alexmngn/Workspace/MyProject/node_modules/#types/react/index"'
has no exported member 'Fragment'.
And the app doesn't run and throw an error as well Invariant Violation
I use the latest stable versions of all packages:
React: 16.2.0
React-Native: 0.51.0
TypeScript: 2.6.2
#types/react: 16.0.31
#types/react-native: 0.51.4
Is there anything specific I need to do to make it working with React-Native? To compile to ES5? Or even to be able to use React.Fragment without Typescript complaining? Seems like there is a type ReactFragment in the definition of the types but still get this error.
Thanks

TypeError: Cannot read property '0' of undefined Webpack

I'm trying to create a demo of ant-design for that I've installed ant-design and now when I'm hitting
npm start
I got this error
dora: listened on 8000
📦 1/2 build modules/opt/lampp/htdocs/antddemo/node_modules/webpack/lib/ExternalModuleFactoryPlugin.js:19
const dependency = data.dependencies[0];
^
TypeError: Cannot read property '0' of undefined
at /opt/lampp/htdocs/antddemo/node_modules/webpack/lib/ExternalModuleFactoryPlugin.js:19:40
at /opt/lampp/htdocs/antddemo/node_modules/atool-build/node_modules/webpack/lib/NormalModuleFactory.js:159:3
at NormalModuleFactory.<anonymous> (/opt/lampp/htdocs/antddemo/node_modules/atool-build/node_modules/tapable/lib/Tapable.js:82:11)
at /opt/lampp/htdocs/antddemo/node_modules/npm-install-webpack-plugin-cn/src/plugin.js:24:7
at /opt/lampp/htdocs/antddemo/node_modules/atool-build/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:24:19
at onResolved (/opt/lampp/htdocs/antddemo/node_modules/atool-build/node_modules/enhanced-resolve/lib/Resolver.js:38:18)
at innerCallback (/opt/lampp/htdocs/antddemo/node_modules/atool-build/node_modules/enhanced-resolve/lib/Resolver.js:94:11)
at loggingCallbackWrapper (/opt/lampp/htdocs/antddemo/node_modules/atool-build/node_modules/enhanced-resolve/lib/createInnerCallback.js:21:19)
at /opt/lampp/htdocs/antddemo/node_modules/atool-build/node_modules/tapable/lib/Tapable.js:134:6
at /opt/lampp/htdocs/antddemo/node_modules/atool-build/node_modules/enhanced-resolve/lib/ModulesInDirectoriesPlugin.js:54:23
I tried couple of solutions but since I'm new to ant-design it's getting hard to digest the concept. Is there anyone for me to fix this?
Thanks in advance :)
Solved this by following installation
install extract-text-webpack-plugin#^2.0.0-beta
REF: Webpack Issue#2764

Resources