I've implemented an angular 2 app which utilize Kendo UI Grid:
I am stuck when deploying app with AoT + Rollup:
Error: 'GridModule' is not exported by node_modules\#progress\kendo-angular-grid\dist\npm\js\main.js (imported by app\app.module.js).
Tried this from Rollup documentation but I don't understand how to configure namedExports:
commonjs({
namedExports: {
'node_modules/#progress/kendo-angular-grid/dist/npm/js/main.js': [ 'GridModule' ]
}
});
Using above configuration doesn't solve the problem.
EDIT:
finally my working configuration for grid is:
namedExports: {
'#progress/kendo-angular-grid': ['GridModule'],
'#progress/kendo-angular-intl/dist/npm/js/intl.service': ['IntlService'],
'#progress/kendo-angular-intl/dist/npm/js/cldr-intl.service': ['CldrIntlService'],
'#progress/kendo-angular-grid/dist/npm/js/grid.module': ['GridModule'],
'#progress/kendo-angular-grid/dist/npm/js/shared.module': ['SharedModule'],
'#progress/kendo-angular-grid/dist/npm/js/grid.component': ['GridComponent', 'DEFAULT_SCROLLER_FACTORY'],
'#progress/kendo-angular-grid/dist/npm/js/browser-support.service': ['BrowserSupportService'],
'#progress/kendo-angular-grid/dist/npm/js/selection.service': ['SelectionService'],
'#progress/kendo-angular-grid/dist/npm/js/details.service': ['DetailsService'],
'#progress/kendo-angular-grid/dist/npm/js/column.component': ['ColumnComponent'],
'#progress/kendo-angular-grid/dist/npm/js/header-template.directive': ['HeaderTemplateDirective'],
'#progress/kendo-angular-grid/dist/npm/js/col-group.component': ['ColGroupComponent'],
'#progress/kendo-angular-grid/dist/npm/js/cell-template.directive': ['CellTemplateDirective'],
'#progress/kendo-angular-grid/dist/npm/js/header.component': ['HeaderComponent'],
'#progress/kendo-angular-grid/dist/npm/js/resizable.directive': ['ResizableContainerDirective'],
'#progress/kendo-angular-grid/dist/npm/js/list.component': ['ListComponent'],
'#progress/kendo-angular-grid/dist/npm/js/pager.component.js': ['PagerComponent'],
'#progress/kendo-angular-grid/dist/npm/js/template-context.directive': ['TemplateContextDirective'],
'#progress/kendo-angular-grid/dist/npm/js/footer.component': ['FooterComponent'],
'#progress/kendo-angular-grid/dist/npm/js/selectable.directive': ['SelectableDirective'],
'#progress/kendo-angular-grid/dist/npm/js/table-body.component': ['TableBodyComponent'],
'#progress/kendo-angular-grid/dist/npm/js/field-accessor.pipe': ['FieldAccessorPipe'],
'#progress/kendo-angular-grid/dist/npm/js/list.component': ['ListComponent', 'SCROLLER_FACTORY_TOKEN','DEFAULT_SCROLLER_FACTORY']
}
It doesn't work if 'include' section is enabled
Update (Dec 7, 2016): All packages are updated to export ES2015 module bundles, so integration with Rollup should work out of the box.
Nov 7, 2016: At the time of writing, the NPM packages of Kendo UI for Angular do not provide module entry points (that use imports/export), which are required for Rollup to work automatically. We plan on introducing them in the future; until they are in place, this problem can be resolved via namedExports.
See the related GitHub issue
Related
Background
I'm creating an application that allows users to interact with basic web controls which output controller events through emulated virtual controllers (so user slides a slider, and that manifests in the system as an axis being changed on a virtual controller). I'm building this as an Electron app which contains an Angular CLI project.
To get the virtual controller functionality I'm consuming a project which wraps native virtual controller functionality and exposes it for node applications. (node-ViGEmClient)
Issue
I've created the basic project and imported the required package. However, when I build the project with ng-build I get the following errors:
./node_modules/vigemclient/lib/DS4Controller.js:1:20-59 - Error: Module not found: Error: Can't resolve '../build/Release/vigemclient' in 'C:\Develop\WebDev\Node\deskpad\node_modules\vigemclient\lib'
Tracking these errors down, they come from files like this:
Looking further into the package's structure, it should be looking for vigemclient.node in build/Release, and that file is indeed present:
I feel like there is some configuration I need to do in Angular (something to do with webpack?) but I don't know what it is. Can anyone point me in the right direction?
In case anyone wants to poke around with my (currently barebones) project, it's located here: DeskPad
Project Details
Node: v16.17.0
Angular CLI: v14.2.3
REPRODUCING
Create a new Angular CLI project:
ng new testProj
Install ViGEmClient package:
npm install vigemclient
Note: This seems to require libraries related to building C++ code which are prompted during the initial install for Node.
Add this line to tsconfig.json to allow synthetic default imports:
"allowSyntheticDefaultImports": true,
Reference the package in the default app component so that it is used:
import { Component } from '#angular/core';
import ViGEmClient from 'vigemclient';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'vigTestAngular';
client = new ViGEmClient();
}
Attempt to build the project with the command "npm run build"
Outcome: These errors should be produced:
./node_modules/vigemclient/lib/DS4Controller.js:1:20-59 - Error: Module not found: Error: Can't resolve '../build/Release/vigemclient' in 'C:\Develop\WebDev\Node\vigTestAngular\node_modules\vigemclient\lib'
./node_modules/vigemclient/lib/ViGEmClient.js:1:20-59 - Error: Module not found: Error: Can't resolve '../build/Release/vigemclient' in 'C:\Develop\WebDev\Node\vigTestAngular\node_modules\vigemclient\lib'
./node_modules/vigemclient/lib/ViGEmTarget.js:5:20-59 - Error: Module not found: Error: Can't resolve '../build/Release/vigemclient' in 'C:\Develop\WebDev\Node\vigTestAngular\node_modules\vigemclient\lib'
./node_modules/vigemclient/lib/X360Controller.js:1:20-59 - Error: Module not found: Error: Can't resolve '../build/Release/vigemclient' in 'C:\Develop\WebDev\Node\vigTestAngular\node_modules\vigemclient\lib'
I was experiencing the exact same error with a native package. In my case this is also an Electron app with angular ~14.2 on Windows.
A friend pointed me to the problem: I was importing the native package from the angular web app code (renderer), but apparently when using native packages in an Electron application, they can only be imported in the Electron main process (main.ts).
Hope this helps!
After upgrading Swiper to Version 7.0.7, I'm getting this annoying error:
Error: Cannot find module 'swiper/react'
.
.
.
Source
.next\server\pages\items.js (1:0) # Object.swiper/react
> 1 | module.exports = require("swiper/react");
In the previous Version (6.8) I didn't see this error. I also checked the migration guide and github issues but found no helpful answer.
The thing is "import cost" extension in VSCode is showing the size of the imported module, so I think there's a problem with Next.js or webpack exporting it, but have no idea how to make it work.
I copy/pasted the exact code from Swiper docs, but will write it here too if it helps:
/* _app.js - imported here because Next doesn't allow global css imports elsewhere */
import 'swiper/scss';
/* slider component which is used inside pages/items.js */
import { Swiper, SwiperSlide } from "swiper/react"; /* 72.4k (gzipped 21.4k) */
export default function CategoriesBar() {
return (
<Swiper
spaceBetween={50}
slidesPerView={3}
onSlideChange={() => console.log('slide change')}
onSwiper={(swiper) => console.log(swiper)}
>
<SwiperSlide>Slide 1</SwiperSlide>
<SwiperSlide>Slide 2</SwiperSlide>
<SwiperSlide>Slide 3</SwiperSlide>
<SwiperSlide>Slide 4</SwiperSlide>
</Swiper>
);
}
Update
after upgrading Next.js to 11.1.2, the error message changed to:
Error: Not supported
I found the solution. It was not related to next.js nor webpack. ESM modules support started from Node.js 12.20 and mine was 12.16. Upgraded my Node.js installation & everything is working fine now!
https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c
I am trying to use graphql-upload in a typescript express app (graphql api) built with webpack. When I run with ts-node my app works fine. But when I compile with webpack and then run I get a weird error when I try to upload a file.
My setup
Typescript app
Apollo server / Typegraphql
Build with webpack
My Code
(stripped down to the essentials)
https://github.com/ziggy6792/graphql-file-uploads
My Problem
When I run with ts-node yarn start:ts:node then run yarn test an image gets uploaded no problem
But then I build with webpack yarn start then run yarn test I get the following error
/Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:56105
if (!isObject(operations) && !Array.isArray(operations))
^
TypeError: isObject is not a function
at Busboy.<anonymous> (/Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:56105:18)
at Busboy.emit (node:events:378:20)
at Busboy.module.exports../node_modules/busboy/lib/main.js.Busboy.emit (/Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:32204:33)
at PartStream.onEnd (/Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:32528:15)
at PartStream.emit (node:events:390:22)
at Dicer.onPart (/Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:32386:13)
at Dicer.emit (node:events:378:20)
at Dicer.module.exports../node_modules/dicer/lib/Dicer.js.Dicer.emit (/Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:45439:35)
at Dicer.module.exports../node_modules/dicer/lib/Dicer.js.Dicer._oninfo (/Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:45540:12)
at SBMH.<anonymous> (/Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:45486:10)
[nodemon] app crashed - waiting for file changes before starting...
My Attempts to solve
I am not sure if this actually a problem with graphql-upload or webpack or something else. I also noticed that my issue looks similar to this issue, but I didn't really understand if there were any fixes to that issue and if indeed it is the same issue I am facing.
I tried to upgrade webpack (branch upgraded-packages) but this made the problem worse as I get this issue when I start the server
TypeError: Cannot read property 'graphql' of undefined
at getPeerDependencyGraphQLRequirement (/Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:104216:44)
at Object.ensureInstalledCorrectGraphQLPackage (/Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:104221:32)
at Function.checkForErrors (/Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:103346:27)
at Function.generateFromMetadataSync (/Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:103325:14)
at Function.generateFromMetadata (/Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:103315:29)
at Object.buildSchema (/Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:103940:61)
at /Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:99831:41
at Generator.next (<anonymous>)
at /Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:99819:71
at new Promise (<anonymous>)
Any help would be greatly appreciated.
My best guess at the problem
From reading the linked issue it seems like isObject seems to ship ECMA Script modules with a newer version. Webpack might pick the ES modules version, but this version differs in the sense that the default export is now default and Apollo Server would have to import it as such or call isObject.default. In this changelog they say it might be breaking for users using bundlers.
Your two options now:
You could use yarn force the dependency to a previous version of isobject:
{
...
"resolutions": {
"graphql-file-uploads/isobject": "3.0.1"
}
}
Or you could simply not bundle your app and use TypeScript for building instead. You lose the benefits of bundling, but you are using an environment that is much more common for running node apps. Furthermore you will use TypeScript as a compiler just like ts-node unifying your development and production tooling.
You can compile using TypeScript like this:
yarn tsc 'src/**/*.ts'
In your TSConfig you should configure the output so that it also emits files to /dist.
I have a library that requires:
rnkata.js when running in react native
webkata.js when running in a browser
nodekata.js when running in node
This hack works OK as long as I'm only targeting node/web:
if (getEnv() == "node") {
eval('require')('nodekata')
} else {
require('webkata')
}
But once I started targeting mobile, metro bundler would complain "webkata not available":
if (getEnv() == "node") {
eval('require')('nodekata')
} else if (getEnv() == "mobile") {
require('rnkata')
} else {
require('webkata')
}
Obviously, I can't use the same eval hack - or I break either webpack or RN. Is there some documentation on how to manage this situation? IE: how can i suppress bundling or interpreting of a 'require' call by platform.
Is there a "suppress by module name" feature? Or some other way to have a platform-specific module?
Metro recently added support for Optional imports. It should be available in React Native v0.63.0. See this issue and this PR for more details.
You could also consider doing naming the files to show which platforms they support. For example:
index.js - web version
index.native.js - android & ios only version
index.android.js - android version
index.ios.js - ios version
My project is created using angular cli [ version - 6.1.3 ].
I installed npm module - is-reachable and used it in my code as -
const isReachable = require('is-reachable');
appDetailsFromJson.forEach(app => {
isReachable(app.server).then(reachable => {
console.log('Hey --> ',reachable);
//=> true
});
However, on running the project it throws the exception - error TS2304: Cannot find name 'require'.
What is the root cause for this & what is the correct way to import a library in angular 6 ?
From the NPM page of isReachable it says (my emphasis):
Works in Node.js and the browser (with browserify).
This means that it is unlikely to work natively in an Angular application as the Angular CLI uses webpack and the standard typescript compiler (rather than browserify) to resolve imports and package dependencies.
In general, imports in Angular are standard ES6-style 'import' statements, e.g.:
import { isReachable } from 'is-reachable';
... or ...
import * as isReachable from 'is-reachable';
If is-reachable itself does not use any further require() statements, this may work, but if it uses require within its own code to bring in its dependencies, you would be in for a lot of difficulty in getting it to work at all - and it would almost certainly be better to find a different way to meet your requirement.