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";
Related
I 'm working on a large typescript with react project and I 've decided to upgrade to react 18 new version and since I did the following
npm install react#18
npm install react-dom#18
npm install #types/react-dom#18
npm install #types/react#18
The app has been broken and got me several error while I 've resolved most of them I got more and more
for example I got this error for this code in a type script
const pages = useMemo(() => {
let page = startPage;
const pageRange = [];
while (page <= endPage) {
pageRange.push(page);
page += 1;
}
return pageRange;
}, [startPage, endPage]);
error message Argument of type 'number' is not assignable to parameter of type 'never'. TS2345
I know the fix to assign the type to the defined array here but this pattern is repeated in the codebase , so i 'm not sure if upgrading to react 18 need some configration with type-script , i 've checked the react docs for upgrading to new react 18 but there was no mention for this .
my current typescript version is "typescript": "^3.7.5"
Adding the following to my package.json solved the problem
{
"overrides": {
"#types/react": "^18.0.0"
}
}
source : https://github.com/facebook/react/issues/24304#issuecomment-1094565891
I have a few circular dependencies in my application. It doesn't affect in production, the app works OK. But now I started to write unit tests using jest and now some of my imports returns undefined. And because of that I can't write a single test.
Even when I try to render whole application, there are a few undefined in the imports.
I can't remove these circular dependencies, because it would take a lot of time.
How can I deal with it?
Here are some examples of errors given by Jest
TypeError: Cannot read properties of undefined (reading 'sensorTypeRenderer')
4 | import { Renderers, ColumnDescriptionGenerators } from '#components';
> 6 | import sensorTypeRenderer = Renderers.sensorTypeRenderer;
Here's the service is not found because EventsGroupsStore is undefined
ServiceNotFoundError: Service with "<UNKNOWN_IDENTIFIER>" identifier was not found...
> 204 | return Container.get(EventsGroupsStore);
The problem was not really with the circular dependencies. I just configured aliases incorrectly.
That's how it should be:
moduleNameMapper: {
"^#src(.*)": "<rootDir>/src$1",
"^#tests(.*)": "<rootDir>/tests$1",
"^#data(.*)": "<rootDir>/tests/mockData$1",
"^#domain(.*)": "<rootDir>/src/domain$1",
"^#service(.*)": "<rootDir>/src/service$1",
"^#utils(.*)": "<rootDir>/src/utils$1",
"^#view(.*)": "<rootDir>/src/view$1",
"^.+\\.(css|scss)$": "<rootDir>/tests/styleMock.js",
"^#resources": "<rootDir>/tests/styleMock.js",
"^#components(.*)": "<rootDir>/src/components$1",
},
And I just didn't add these (.*) and $1
ERROR in ./src/js/HomeView.js
Module build failed: SyntaxError: Unexpected token (122:19)
120 | }
121 |
> 122 | handleDrawerOpen = () => {
| ^
123 | this.setState({ open: true });
124 | };
125 |
Got the above error when trying to compile react component using webpack.
Does anyone know what is the missing plugin here?
You'll probably need to install preset-stage-2.
This babel plugin allows you to use ES6+ features such as statics, property initializers, and even dynamic import support.
You could actually just install transform-class-properties for this particular case, but I usually prefer to install a babel plugin with stage-x because I find it comfortable to use multiple ES6+ features with a single install.
It might also be useful to future readers that this particular Babel plugin is already properly set up for you if you use create-react-app, as you can check here.
Difficult to guess from the code you have pasted above.
My guess is change it to
handleDrawerOpen() {
this.setState({ open: true });
}
I have been going through the Angular2 tutorial https://angular.io/docs/ts/latest/tutorial/ . I have cloned the code to it from https://github.com/johnpapa/angular2-tour-of-heroes
I am trying to understand how the TypeScript is working. When you export a function in TypeScript, say called 'fnc', I see in the js file that gets generated this is the equivalent to doing exports.fnc = fnc.
This is a Node thing to export JavaScript in this way so how does this code then work on the frontend when running in a browser and not Node? Is there another package that has to be installed therefore to use TypeScript on the frontend that are then also changing these js files that generated again.
When I look at the code in the Developer Tools I see it has now been wrapped in a
(function(System, SystemJS) {(function(require, exports, module, __filename, __dirname, global, GLOBAL) {"use strict"
...
}).apply(__cjsWrapper.exports, __cjsWrapper.args);
})(System, System);
What has changed the code to look like this. Is this a TypeScript specific thing that has been done here or something specific in just the Angular application I have used?
Lastly, to incorporate JavaScript modules into my application that is not TypeScript, is the right thing to do just put export.something = something for everything I want to export?
You might want to read TypeScript's docs. Here's a link to their modules page : https://www.typescriptlang.org/docs/handbook/modules.html.
TypeScript isn't readable by some browsers, so Angular 2's code needs to be compiled into browser readable code ( usually ES5 ). This is done through webpack, gulp, browserify, etc.. There are many different tools that allow for this transpiling.
I suggest that if you're working on a TypeScript application, don't try to use vanilla JavaScript along side TypeScript, compilers don't usually like this. But, to answer your question, in node you export using modules.exports https://nodejs.org/api/modules.html#modules_module_exports
The wrapping you are seeing is not related to Typescript. Your script was loaded by SystemJS, and was wrapped before presenting it to the browser. You can see this in the SystemJS function for getSource:
return (wrap ? '(function(System, SystemJS) {' : '') + source + (wrap ? '\n})(System, System);' : '')
// adds the sourceURL comment if not already present
+ (source.substr(lastLineIndex, 15) != '\n//# sourceURL='
? '\n//# sourceURL=' + address + (sourceMap ? '!transpiled' : '') : '')
// add sourceMappingURL if load.metadata.sourceMap is set
+ (sourceMap && inlineSourceMap(sourceMap) || '');
To your question about how CommonJS modules can be loaded by the browser, that's a feature of SystemJS. The call to apply at the end is specific to CommonJS module handling:
case 'cjs':
...
source = cjsWrapper + ") {" + source.replace(hashBangRegEx, '') + "\n}).apply(__cjsWrapper.exports, __cjsWrapper.args);";
I'm trying to use ember-simple-auth with ember-cli-simple-auth-token:
"ember-cli-simple-auth-token": "^0.7.3",
"ember-simple-auth": "1.0.1"
And that's my configurations:
ENV['simple-auth-token'] = {
authorizer: 'simple-auth-authorizer:token',
identificationField: 'email',
serverTokenEndpoint: 'http://localhost:3000/token'
};
Am i missing something? Cause i'm receiving this error in my console:
Could not find module simple-auth/authenticators/base imported from simple-auth-token/authenticators/token
I already try to uninstall and npm prune, and reinstall.. and the same message keeps showing.
Thanks guys.
No - simple-auth-token hasn't been updated as yet. A couple of minor changes seems to get it going again, which I will post to the author.
The changes in the ember-simple-auth-token module required are:
1) app/initializers/simple-auth.js:
change "simple-auth" on line 1 to "ember-simple-auth" and
remove (or comment out) lines 2 and 9 (the import for setup, and the call
to setup).
2) addon/authenticators/token.js:
change "simple-auth" on line 2 to "ember-simple-auth"
3) addon/authorizers/token.js:
change :simple-auth" on line 2 to "ember-simple-auth"
Hopefully that helps a few people out there struggling with this.
Cheers!
The name of the addon is ember-simple-auth and it's looking for a path simple-auth/authenticators/base which should be ember-simple-auth/authenticators/base. You should correct that import in the file simple-auth-token/authenticators/token.