I am trying to use a style library from work for building an application for internal use. I am building the application with React, but the only one I can access is an AngularJs library starting with '#SomeStyle'. Is there any way to use the AngularJs library in React?
I tried simply use 'import' in react, the code compiles, but the browser respond with error Uncaught SyntaxError: Unexpected token import.
I use babel loader, which transpile the 'import' syntax in my js file. The project runs, but it crashes when I import the angular style library.
The error comes from the code I imported from angular library, which is added to the bundle.js automatically (I think it is similar to C++ include). From my dev tool I see this line import { CommonModule } from '#angular/common' cause an error.
Related
I have a shared typescript library that exports a function being used by a react library. Everything works at runtime, however when running the tests for the react library I get the error -
({"Object.":function(module,exports,require,__dirname,__filename,jest){export
{ sharedUtils } from './lib/shared-utils';
^^^^^^
SyntaxError: Unexpected token 'export'
Do I need to manually add a mapping for the react library to reference the shared TypeScript one? if so where and how?
I am trying to use puppeteer for e2e testing on a react app. I'd prefer to use TypeScript, so I've tried to start with a file that begins with:
import puppeteer, { Browser, Page } from "puppeteer";
I can't seem to resolve this error, though:
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import puppeteer from "puppeteer";
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Runtime.createScriptFromCode (../node_modules/jest-runtime/build/index.js:1350:14)
I'm eager to learn, but not sure how to trouble-shoot this.
I don't think Jest supports ES6.
Have you checked Jest docs for support -> https://jestjs.io/docs/ecmascript-modules
I'm trying to use PrimeReact components on a Next.js project but I'm getting an error when I try to import the core css styles as shows in their documentation (https://www.primefaces.org/primereact/#/setup), I have used these components with a create-react-app project, but this time I'm having the following error:
Next js error
I'm using "#zeit/next-sass" and "node-sass" to work with SASS files, I read that is required to create a "webpack.config.js" to manually apply the right loaders but the problem persist (I'm not a webpack expert), I was wondering if someone can give me a hint of what I'm missing.
Thank you in advance.
I'm currently trying to build a web app compatible with the Google Progressive Web Apps specs. To do this i use Angular with Dart and Polymer based Webcomponents instead of the Angular components. So far everything works as expected. To make the app offline capable utilizing the Service-Worker API i use the following dart lib: https://github.com/isoos/service_worker
Using either Polymer or Service-Worker works fine but combining booth just exits with an error on app startup.
This is my AppComponent startup routine:
// ... other imports
import 'package:service_worker/window.dart' as sw; // <-- import alone causes the error
Future main() async {
await initPolymer(); // <-- causes the error in combination with the import above
bootstrap(AppComponent);
if (sw.isNotSupported) {
print('ServiceWorkers are not supported.');
return;
}
//... initializing service worker
}
The error occurs even if i'm not initializing the Service-Worker, importing the Service-Worker module is enough to cause the error.
Building the app works without any errors.
I'm new to Dart and the Polymer and Angular eco systems and the error message i get is not very helpful to me:
Uncaught Error: NoSuchMethodError: method not found: js_helper.dart:1742 'h' (J.Q(...).h is not a function)
at Object.J.H (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:9747:15)
at http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:10559:1584
at Isolate.e.(anonymous function) (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:10608:15)
at Object.yK (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:9291:22)
at http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:9282:10
at yM.a (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:2612:72)
at yM.dart.yM.$2 (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:2828:24)
at y9.dart.y9.$1 (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:2824:31)
at xM.bi (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:3767:40)
at xk.$0 (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:3167:16)
Can you give me a hint what could cause the error and how to fix it? I would very much like to use the Polymer components instead of the plain Angular components but i need the Service-Worker for offline caching support.
This looks like an issue caused by incompatibility between dart:js (the old style, used by the original polymer package) and package:js (the new style, used by all new packages, including package:service_worker).
You might want to have a look at the polymerize project, which brings Polymer via the new-style interop. Then you'll have no conflict.
Unlike other components of React Native, ProgressBarAndroid isn't exported from react-native module, rather you need to include it as a separate module like this
var ProgressBar = require('ProgressBarAndroid');
It is very much clear from the source code that the files are loaded from here
https://github.com/facebook/react-native/tree/v0.25.1/Libraries/Components/ProgressBarAndroid
It works well when imported in the project but the same require() statement fails to find the module inside another third party library which I am writing.
Where could be the resolution definition for this file? Is it something to do with Babel's React Native preset? The same require() statement doesn't find the module with Node CLI tool.