i'm using these npm modules for the ag-grid:
"#ag-grid-community/react": "^25.0.1",
"#ag-grid-enterprise/all-modules": "25.0.1",
"ag-grid-community": "^25.0.1",
"ag-grid-enterprise": "^25.0.1",
"ag-grid-react": "^25.0.1",
and these imports :
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-enterprise';
import { ModuleRegistry, AllModules } from '#ag-grid-enterprise/all-modules';
import '#ag-grid-community/all-modules/dist/styles/ag-grid.css';
import '#ag-grid-community/all-modules/dist/styles/ag-theme-material.css';
import { LicenseManager } from '#ag-grid-enterprise/core';
LicenseManager.setLicenseKey(
'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
);
ModuleRegistry.registerModules(AllModules);
Why i'm getting this warning in the console and how i can get rid of it ?
ag-Grid: You are mixing modules (i.e. #ag-grid-community/core) and packages (ag-grid-community) - you can only use one or the other of these mechanisms.
You only need the following in your package.json file as these packages contain all the code you need following the AG Grid 'package' approach.
"ag-grid-community": "^25.0.1",
"ag-grid-enterprise": "^25.0.1",
"ag-grid-react": "^25.0.1",
From the docs
It is important that you do not mix packages and modules in the same
application as this will result in AG Grid being included twice and
doubling your bundle size! All modules are scoped by either
#ag-grid-community/* or #ag-grid-enterprise/* and should not be mixed
with the standalone packages of ag-grid-community and
ag-grid-enterprise.
Modules
Packages
#ag-grid-community/xxxxx
ag-grid-community
#ag-grid-enterprise/xxxxx
ag-grid-enterprise
I have written about this more in this blog post.
You are getting the warning because quite simply, you are mixing modules and packages. The library ag-grid-community contains everything in ag-Grid community whereas #ag-grid-community/core contains the core items from ag-Grid community. You need to install one or the other, depending on whether you are using modules or packages.
From ag-Grid:
There are two main ways to install ag-Grid - either by using packages
, or by using modules. packages are the easiest way to use ag-Grid,
but by default include all code specific to each package, whereas
modules allow you to cherry pick what functionality you want, which
will allow for a reduced overall bundle size.
Take a look at the documentation around packages and modules here.
Related
I have an app (just frontend) whose code is structured in a monorepo. There are separate packages for each custom widget. I would also like to have one package with all the translations. In this way, if another package need a translation I just need to import that package. So I created the translation package and in its main file I just wrote (here I use intl):
export 'package:flutter_gen/gen_l10n/app_localizations.dart';
Now, if I import that package in another package and I import the file with:
import 'package:l10n/l10n.dart';
It tells me that that import is not used and gives me error when I use the translation with AppLocalizations.of(context)!.foo
If you use VScode (don't know for other editors) you have to manualy import the generated translation package:
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
It seems that it's not possible to export generated file by design (check out this github issue). The best solution that I've found to fix my problem is the following:
Create a translation package inside your project, like in packages/translations and add that package to the pubspec.yaml of your your main project. Like this:
dependencies:
flutter:
sdk: flutter
translations:
path: packages/translations
In that package create a l10n.yaml file like this:
arb-dir: lib
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart
synthetic-package: false
If you are working in a git repo, add packages/translations/lib/app_localizations*.dart in your .gitignore
Now if you run flutter packages get && flutter gen-l10n in that translations packages all the translations will be automatically generated (assuming they are in packages/translations/lib/app_xx.arb)
Now you can import the translation file from you main package with import 'package:translations/app_localizations.dart';
The only drawback is that the translations are not automatically generated when you type flutter pub get (see this issue). In order to regenerate them you have to type flutter gen-l10n inside the translations package every time. The solution could be improved by using a tool for managing Dart monorepo projects like melos.
An example implementation of what I described (including melos) could be found in this github repo
i am writing an an angular project with ag-grid and I want to try out the row grouping. Below is the test code from ag-grid website. However the grid shows regular grid and receive following in the debug window.
ag-Grid: enableRowGroup is only valid in ag-Grid-Enterprise, your column definition should not have enableRowGroup
Any idea, how to use trial version of ag-grid-enterprise?
Sample code: https://www.ag-grid.com/javascript-grid-grouping/
add below in app.modules.ts resolves the issue
import { AgGridModule } from '#ag-grid-community/angular';
To use ag-grid-enterprise features first of all you need to install the following npm package:
npm install --save ag-grid-enterprise
Then, add the import to app.module.ts:
import 'ag-grid-enterprise';
If everything is ok, you should see a message in the console that tells you there is no enterprise license key.
I have a lot of successful rest accesses in grails 2.x.x
I simply coded
import grails.plugins.rest.client.*
import grails.util.Holders
import org.codehaus.groovy.grails.web.json.JSONObject
import org.codehaus.groovy.grails.web.json.JSONArray
and Classes JSONObject, JSONArray, RestBuilder, RestResponse where available for further use.
What are the corresponding imports in 4.0.1 and what jars resp. what lines in build.gradle are necessary?
What are the corresponding imports in 4.0.1 and what jars resp. what
lines in build.gradle are necessary?
Grails 4 offers better options than to interact with the classes you asked about but to answer the question as asked...
org.grails.web.json.JSONObject is in grails-web-common-4.0.1.jar. Use import org.grails.web.json.JSONObject.
org.grails.web.json.JSONArray is in grails-web-common-4.0.1.jar. Use import org.grails.web.json.JSONArray.
grails.plugins.rest.client.RestBuilder is in grails-datastore-rest-client-6.1.12.RELEASE.jar. Use import grails.plugins.rest.client.RestBuilder.
grails.plugins.rest.client.RestResponse is in grails-datastore-rest-client-6.1.12.RELEASE.jar. Use import grails.plugins.rest.client.RestResponse.
Depending on what other dependencies you may have in your project those may or may not be pulled in transitively so you may not need to add them to your build.gradle directly. The most likely scenario is you won't need to add anything to pull in grails-web-common-4.0.1.jar but you probably will need to pull in grails-datastore-rest-client-6.1.12.RELEASE.jar which can be done by adding the following to your build.gradle:
compile "org.grails:grails-datastore-rest-client:6.1.12.RELEASE"
If you want to pull in grails-web-common explicitly you could use the following:
compile "org.grails:grails-web-common:4.0.1"
If you are using the BOM correctly, you could simplify that with the following:
compile "org.grails:grails-web-common"
I hope that helps.
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 am using create-react-app and trying to install mapbox-gl-draw.
npm install #mapbox/mapbox-gl-draw
This works with some npm warnings. I then try to pull mapbox-gl-draw into a component like this:
import React,{Component} from 'react';
import mapboxgl from 'mapbox-gl/dist/mapbox-gl.js';
import ReactMapboxGl from 'react-mapbox-gl';
import MapboxDraw from '#mapbox/mapbox-gl-draw/dist/mapbox-gl-draw'
console.log(MapboxDraw)
I just get an empty object.
I am using create-react-app. Do I need to use a different webpack .config file.
What is the best way to import mapbox modules like this?
If you're using webpack, you need to alias to use mapbox-gl dist file, here is how I have done it using webpack2:
resolve: {
modules: ['src', 'node_modules'],
extensions: ['.js', '.jsx', '.json', '.css', '.svg'],
alias: {
// mapbox-gl related packages in webpack should use dist instead of the default src
'#mapbox/mapbox-gl-draw': path.resolve(root, 'node_modules/#mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.js'),
},
},
Variable "root" was defined earlier in the file to refer to the root directory of the project, on the same level as package.json etc.
The same problem can happen in react-map-gl-alt where you need to alias 'mapbox' to 'node_modules/mapbox/dist/distfilehere.js'.
To expand upon medv's answer, at current, in your package.json, you need to add the mapbox-gl v0.270 - v0.38.0, like:
"mapbox-gl": ">=0.27.0 <=0.38.0 when using "#mapbox/mapbox-gl-draw": "^1.0.1".
This is explained at the 'Requires' line here & if you look at the peerDependencies in the package.json.