I'm facing following issue: If I try to build my Ionic 3 app for ios with the --prod flag, I get following error:
typescript error
Cannot determine the module for class OverlayPortal in
C:/.../node_modules/ionic-angular/umd/components/app/overlay-portal.d.ts!
Add OverlayPortal to the NgModule to fix it. Cannot determine the module for class IonicApp in
C:/.../node_modules/ionic-angular/umd/components/app/app-root.d.ts!
Add IonicApp to the NgModule to fix it. Cannot determine the module for class ClickBlock in
C:/.../node_modules/ionic-angular/umd/components/app/click-block.d.ts!
Add ClickBlock to the NgModule to fix it.
Build command used:
ionic cordova build ios --prod
The error does not appear if I build without the --prod flag or if I use ionic serve. I'm not using any of the classes mentioned in the error message in my code.
I resolved the issue by searching through my code and removing any reference to Ionics Page class, which is suggested here.
Example: Turn let page : Page; into let page;
Also make sure to remove any imports of the Page class, which might look like this:
import { Page } from 'ionic-angular/umd/navigation/nav-util';
Related
Somehow I updated my module version and it shows below error :
Type Login in F:/ionic/PkjshopCourier/src/pages/login/login.ts is part of the declarations of 2 modules:
AppModule in F:/ionic/PkjshopCourier/src/app/app.module.ts and LoginModule in
F:/ionic/PkjshopCourier/src/pages/login/login.module.ts! Please consider moving Login in
F:/ionic/PkjshopCourier/src/pages/login/login.ts to a higher module that imports AppModule in
F:/ionic/PkjshopCourier/src/app/app.module.ts and LoginModule in
F:/ionic/PkjshopCourier/src/pages/login/login.module.ts. You can also create a new NgModule that exports and
Your issue is shown in the output... you have login.ts declared in two places. app.module.t and login.module.ts.
You probably want to remove it from app.module.ts
Whenever I am trying to add PhotoLibrary plugin in ionic, I am not able to add it in app.module.ts . I am getting the following error
Type 'PhotoLibraryOriginal' is not assignable to type 'Provider'.
Type 'PhotoLibraryOriginal' is missing the following properties from type 'FactoryProvider': provide, useFactory [2322]
(alias) const PhotoLibrary: PhotoLibraryOriginal
import PhotoLibrary
Please check the below image for full error.
import from /ngx for all latest ionic native plugins used with ionic-angular apps...
import { PhotoLibrary } from '#ionic-native/photo-library/ngx';
Else fallback to version 4.* of plugins
Hey i i am working with the latest version of material UI, i have a problem when i am trying to create build (react-scripts build).
this is the error that i got:
Creating an optimized production build...
Failed to compile.
Failed to minify the code from this file:
./node_modules/#material-ui/core/es/styles/createMuiTheme.js:17
i didn't found any solution for my problem. i am using createMuiTheme for override some components.
thank you very much.
This is a common error with material-ui that occurs when you import a component with /es in the path.
Search on your code if at some point you import createMuiTheme. You most likely import it from #material-ui/core/es/styles..., instead, import it this way:
import { createMuiTheme } from '#material-ui/core/styles';
I'm trying to add OfficeUI fabric components in a blog build using gatsby js.
As soon as I'm importing any component, the site stop to works.
Using develop command, I can see in the browser console : SyntaxError: export declarations may only appear at top level of a module
How to fix this ? (I'm very new to node dev).
Searches I've done suggest problems with babel not using the es2015 preset. However, I double checked, the .babelrc file is mentioning this preset.
Here's the complete operations I've done (on Windows 10 x64 if it matters):
cloned the gatsby-starter-blog-no-styles repo :
gatsby.cmd new someblog https://github.com/noahg/gatsby-starter-blog-no-styles
cd someblog
npm install
drink a coffee (will move to yarn soon)
Check that works
gatsby develop
Opened the browser (http://localhost:8000). Its Ok
added office ui fabric react components
npm install --save office-ui-fabric-react
Restart gatsby develop. Still working
change src/layouts/index.js file to import an office component
import React from 'react'
import Link from 'gatsby-link'
import { Button } from 'office-ui-fabric-react/lib/Button'
class Template extends React.Component {
....
And voilà! it stop to works. In the browser console, I see an error : SyntaxError: export declarations may only appear at top level of a module
I put in GH a complete reproduction repository : https://github.com/stevebeauge/repro-gatsbyjs-officeui-error
[Edit] Digging a bit I can see in the generated 'common.js' file the error :
/***/ "./node_modules/office-ui-fabric-react/lib/Button.js":
/***/ (function(module, exports) {
export * from './components/Button/index';
//# sourceMappingURL=Button.js.map
/***/ }),
The export here seems to be forbidden, which leads to Babel issue (not found how to solve though)
Recently i stumbled upon the similar error, my solution was to explicitly import from lib-commonjs:
import { Button } from 'office-ui-fabric-react/lib-commonjs/Button';
instead of
import { Button } from 'office-ui-fabric-react/lib/Button'
Seems to be the error occurs since babel isn't converting office-ui-fabric-react to CommonJS module.
I'm building an ionic app and would like to add unit tests for a couple of services. I'm trying to get jest working with typescript but it doesn't seem to play well.
I'm getting this error:
/myuser/project/node_modules/#ionic/storage/dist/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { NgModule } from '#angular/core';
^^^^^^
SyntaxError: Unexpected token import
Now I have read that you have to add the babel-plugin-transform-es2015-modules-commonjs and use that in the test env of babel. However I am using babel 7 and this plugin is not available for babel 7. Is there a different solution?
I will also provide my package.json and .babelrc below.
gist
You just need to add #ionic/storage to your transformIgnorePatterns in jest config. For example, here's mine, take note of the #ionic/storage part:
"transformIgnorePatterns": [
"node_modules/(?!#ngrx|moment|#ionic/storage|#ionic-native)"
]
Additionally, make sure in your tsconfig compiler options you have module: 'commonjs'
Also, if you need localstorage mocks, you can just use the following npm module:
npm install --save-dev jest-localstorage-mock
and then (in your setupJest.ts file)
import 'jest-localstorage-mock
Lastly, I recommend taking a look at:
https://github.com/thymikee/jest-preset-angular
for more help with jest + ionic configurations.