I created an app with the SPA Templates. The Angular app is using the primeng components for the UI. In order to get the bootstrap, fontawesome and primeng themes running I ran webpack --config webpack.config.vendor.js so that I could add the css files to the nonTreeShakableModules array. Everything seems to work until I publish.
When I attempt to publish I get the following error
ERROR in ./$$_gendir/~/primeng/components/menu/menu.ngfactory.ts
Module parse failed: .\$$_gendir\node_modules\primeng\components\menu\menu.ngfactory.ts Unexpected token (14:32)
You may need an appropriate loader to handle this file type.
| import * as i3 from '#angular/router';
| import * as i4 from 'primeng/components/dom/domhandler';
| export const MenuModuleNgFactory:i0.NgModuleFactory<i1.MenuModule> = i0.?cmf(i1.MenuModule,
| ([] as any[]),(_l:any) => {
| return i0.?mod([i0.?mpd(512,i0.ComponentFactoryResolver,i0.?CodegenComponentFactoryResolver,
# ./$$_gendir/ClientApp/app/components/locations/locations.component.ngfactory.ts 9:0-99
# ./$$_gendir/ClientApp/app/components/list/list.component.ngfactory.ts
# ./$$_gendir/ClientApp/app/app.module.server.ngfactory.ts
# ./ClientApp/boot.server.ts
I have this error for every primeng component that is used.
You might be experiencing this because The ASP.NET core 2.0 / Angular Template uses different typescript loaders for development and for production : awesome-typescript-loader and angular2-template-loader in development, and #ngtools/webpack in production.
From my experience, #ngtools/webpack doesn't do well with loading some third party angular components. You could try using awesome-typescript-loader and angular2-template-loader for both development and production.
Related
Summary:
I have created projects, with Vue.js and Nuxt.js, where I have installed aws-amplify (which automatically installs aws-sdk) in order that I can implement authentication with AWS Cognito.
In both cases, this works very nicely, but the problems come when I build production versions.
In both cases, I end up with massive bundle sizes which (thanks to webpack-bundle-analyzer) I can immediately see are caused by the aws-sdk which appears to contain code to implement every AWS service, under the sun, despite the fact that I am only importing AWS Cognito's: "Auth" (import { Auth } from 'aws-amplify')
I have tried creating a custom AWS SDK for JavaScript, which only includes the service: AWS.CognitoIdentity, but despite incorporating that (presumably incorrectly), I still end up with the same bundle size (and aws-sdk files) when I build the projects.
As I say, this is happening in both Nuxt and Vue project, but in order to simplify this, I for now just want to find the solution to a very basic sample project created with Vue.
I think I must be doing something dumb, but I can't work out what that is.
Any help would be greatly appreciated! :-)
Steps to reproduce:
Create a basic Vue.js project with defaults. Run: vue create vue-aws-sdk-inv
[Note: Steps 2 - 4, are not crucial to reproduce issue, but install webpack-bundle-analyzer which provides useful extra info.]
In the new project, install webpack-bundle-analyzer. Run: npm install --save-dev webpack-bundle-analyzer
Create root file: vue.config.js
Add the following code to vue.config.js:
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
.BundleAnalyzerPlugin;
module.exports = {
configureWebpack: {
plugins: [new BundleAnalyzerPlugin()]
}
};
As a benchmark, build the project. Run: npm run build
At this stage, the project will build (with no console warnings) and webpack-bundle-analyzer will launch (in the browser) showing the file: chunk-vendors..js, at the top of the tree, containing a bunch of other .js files, all of acceptable size.
Install AWS Amplify (and by default aws-sdk). Run: npm i aws-amplify
Open src/components/HelloWorld.vue and add the following under the tag: import { Auth } from "aws-amplify";
Build the project. Run: npm run build
At this stage, the project will build WITH console warnings regarding the following files being too large:
File Size Gzipped
dist/js/chunk-vendors.013ac3f0.js 3055.78 KiB 550.49 KiB
dist/js/app.fa2a21c4.js 4.67 KiB 1.67 KiB
dist/css/app.53019c4c.css 0.33 KiB 0.23 KiB
If installed, webpack-bundle-analyzer should launch (in the browser) showing an inflated: chunk-vendors..js, due to a hefty: aws-sdk.
aws-sdk will include api: .json files and lib: .js files for every AWS service I can think of!
The attempt to rectify:
Navigate to: https://sdk.amazonaws.com/builder/js/
Clear all services.
Select just: AWS.CognitoIdentity
Download "Minified" aws-sdk-.js
Download "Default" aws-sdk-.min.js
[Note: the following are the steps I am guessing I'm getting wrong?...]
In the project, search the node_modules directory for aws-sdk.js and aws-sdk.min.js.
They were found in /node_modules/aws-sdk/dist
Replace both files with the downloaded files (renaming to aws-sdk.js and aws-sdk.min.js respectively.)
Build the project. Run: npm run build
Project will build with same console warnings and same massive aws-sdk, as before, containing all the same .js and .json files for a bunch of services that are not actually imported in the application.
Final pieces of analysis:
Remove aws-sdk.js and aws-sdk.min.js from project's: /node_modules/aws-sdk/dist
Build the project. Run: npm run build
Project is built without even referencing these files.
Rename /node_modules/aws-sdk to /node_modules/TEMP_aws-sdk and attempt to build the project.
Build fails, and this proves (I think) that I was at least trying to add the custom versions, of aws-sdk.js and aws-sdk.min.js, somewhere in the correct directory!
Source Code:
vue.config.js:
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
.BundleAnalyzerPlugin;
module.exports = {
configureWebpack: {
plugins: [new BundleAnalyzerPlugin()]
}
};
src/components/HelloWorld.vue:
import { Auth } from "aws-amplify";
As said before, any help would be greatly appreciated! :-)
It looks like import { Auth } from "aws-amplify"; doesn't currently allow for tree shaking according to this issue.
Reading through several related issues, it appears that:
import Auth from '#aws-amplify/auth';
is the best you can currently do. I suspect that over time, the AWS team will figure out a way to better separate the internals.
For readers looking for a way to reduce bundle sizes for the aws-sdk package, see this section of the docs.
In my case:
import S3 from 'aws-sdk/clients/s3';
import AWS from 'aws-sdk/global';
cut the bundle size down by quite a lot. That gets it down to ~57k gz to use S3.
Also, for anyone using nuxt you can just run nuxt build -a to get the build analyzer.
I am new to react and also wanted to use office react ui for one of our requirement i followed the git hub and able to use office ui react components in my components but while running my first test case for App.js it is giving me below error.
E:\net_react\my-new-app\ClientApp\node_modules\office-ui-fabric-react\lib\Fabric.js:1
({"Object.":function(module,exports,require,__dirname,__filename,global,jest){export * from './components/Fabric/index';
^^^^^^
SyntaxError: Unexpected token export
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
at Object. (src/components/Login.js:13:592)
at Object. (src/components/Home.js:2:14)
And i have an import statement in my Login.js
import { Fabric } from '../../node_modules/office-ui-fabric-react/lib/Fabric';
The error is because your test harness does not support ES 6 modules (which is what is in lib in Fabric 6).
Try importing instead from office-ui-fabric-react/lib-commonjs/Fabric or office-ui-fabric-react (which has bundle size implications unless you're able to utilize Tree Shaking) or modify your test harness's module map to redirect lib/ imports into lib-commonjs.
Update
To elaborate on the answer above, the Fabric release notes has guidance for Jest configuration:
moduleNameMapper: {
"office-ui-fabric-react/lib/(.*)$": "office-ui-fabric-react/lib-commonjs/$1"
}
I'm using react native 0.54.0, trying to bundle a dependency which relies on some node core apis (net, fs, tls), but those are required only for part of functionality which is not gonna be used on the client. I've successfully bundled that dep for web client by specifying those node core modules as externals for webpack, making it omit them from bundling. Now I'm trying to do the same for metro bundler.
I'm trying to config rn-cli.config.js to handle that with getBlacklistRE:
const blacklist = require('metro/src/blacklist');
getBlacklistRE() {
return blacklist([
/^morgan$/,
/^superagent-proxy$/,
/^fs$/,
/^net$/,
/^tls$/
]);
but it doesn't seem to work, I still get bundling errors about being unable to locate those modules. What am I doing wrong? How can I make the metro bundler omit those?
I'm trying to use the aurelia cli to create a new project
Here are the options I'm using.
Project Name: Test
Default Setup: 3 (custom)
Module Loader: 3 (webPack)
Plaform: 2 (ASP.NET Core)
Transpiler: Babel
Template setup: Default
CSS Processor: 1 (None default)
Test Runner: 2 (Karma)
Integration Testing: 1 (protractor)
Code Editor: 1 (VS Code)
When its complete since I told it I was targeting ASP.NET Core I thought I would be able to do a dotnet run.
I can and it says the app is running and listening on port 5000.
If I navigate to http://localhost:5000 a page comes up and just shows loading...
If you look at the console you see that it cant find app.js, vendor.css, vendor.js
If you go looking for these files, they are nowhere to be found. Its looking for them in the dist folder but they do not exist.
Is this a bug in the cli using these options?
After bundling a simple aurelia application with jspm bundle-sfx I get the following error:
No PLATFORM.Loader is defined and there is neither a System API (ES6) or a Require API (AMD) globally available to load your app.
An example application: https://github.com/Baudin999/jspm-bundling-test
You can use: npm run setup:dev in a non windows env to switch back to the dev settings (which is just a comment/uncomment in the ./src/client/index.html) and you can use npm run setup:prod to switch back to the production environment, bundling will automatically be triggered. all other scripts can be found in the package.json.
I can't link to other questions because I haven't found any questions which relate to this problem. I "think" (which means absolutely nothing) that this might be related to the fact that aurelia needs a full loader even when bundling with bundle-sfx but I haven't found any ways to solve the error.
EDIT (25/01/2017 17:16): I've found out that the error is because I import the aurelia-bootstrapper.
As soon as I add: import * as bootstrapper from 'aurelia-bootstrapper'; I get the error
Please add the code how do you bootstrap your aurelia app.
There is nothing actually to import from bootstrapper apart from bootstrap function.
Which you would use in case of custom manual bootstrapping.
like in
import { bootstrap } from 'aurelia-bootstrapper'
const configure: (au: Aurelia) => {} = async function (au: Aurelia) {
au.use
.standardConfiguration();
await au.start()
au.setRoot() // or au.enchance()
})
bootstrap(configure)
in a happy path scenario with jspm - you System.import('aurelia-bootstrapper')
and it takes over finding the root node of your app and the script to configure Aurelia (main by default)
Have a look at Bootstrapping Aurelia in the docs
Oh.. and bundle-sfx is not supported there are other means to bundle aurelia apps using jspm