Rollup and material-components-web - issue transforming a node module - es6-modules

I am attempting to make a build file for the browser using rollup.js and Google's library material-components-web. I seem to be hitting a issue with material-components-web's drawer component:
$ rollup --config
data/www/assets/scripts/app.js รข data/www/assets/scripts/bundle.js...
[!] Error: 'default' is not exported by node_modules/focus-trap/index.js
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
node_modules/#material/drawer/util.js (23:9)
21: * THE SOFTWARE.
22: */
23: import { default as createFocusTrap } from 'focus-trap';
^
24: export function createFocusTrapInstance(surfaceEl, focusTrapFactory) {
25: if (focusTrapFactory === void 0) { focusTrapFactory = createFocusTrap; }
Error: 'default' is not exported by node_modules/focus-trap/index.js
at error (/home/one/.nvm/versions/node/v12.7.0/lib/node_modules/rollup/dist/rollup.js:5365:30)
at Module.error (/home/one/.nvm/versions/node/v12.7.0/lib/node_modules/rollup/dist/rollup.js:9708:9)
at handleMissingExport (/home/one/.nvm/versions/node/v12.7.0/lib/node_modules/rollup/dist/rollup.js:9625:21)
at Module.traceVariable (/home/one/.nvm/versions/node/v12.7.0/lib/node_modules/rollup/dist/rollup.js:10018:17)
at ModuleScope.findVariable (/home/one/.nvm/versions/node/v12.7.0/lib/node_modules/rollup/dist/rollup.js:8685:39)
at FunctionScope.findVariable (/home/one/.nvm/versions/node/v12.7.0/lib/node_modules/rollup/dist/rollup.js:3056:38)
at ChildScope.findVariable (/home/one/.nvm/versions/node/v12.7.0/lib/node_modules/rollup/dist/rollup.js:3056:38)
at BlockScope.findVariable (/home/one/.nvm/versions/node/v12.7.0/lib/node_modules/rollup/dist/rollup.js:3056:38)
at Identifier$1.bind (/home/one/.nvm/versions/node/v12.7.0/lib/node_modules/rollup/dist/rollup.js:4394:40)
at AssignmentExpression.bind (/home/one/.nvm/versions/node/v12.7.0/lib/node_modules/rollup/dist/rollup.js:3143:23)
Here is my rollup config:
import resolve from '#rollup/plugin-node-resolve';
export default {
input: 'data/www/assets/scripts/app.js',
output: {
file: 'data/www/assets/scripts/bundle.js',
format: 'iife'
},
plugins: [resolve()]
};
Am I doing anything wrong on my side?

Related

* Invalid account: #0 for network: mumbai - Expected string, received undefined

When ever I run
npx hardhat run scripts/deploy.js --network mumbai
Error HH8: There's one or more errors in your config file:
Invalid account: #0 for network: mumbai - Expected string, received undefined
I have no clue what to do to fix this I have been at this for like 4 days now.
Should I delete account 0 how do I even do that?
Here are 2 reference both dont work for me.
Error HH8: There's one or more errors in your config file: * Invalid value undefined for HardhatConfig.networks.rinkeby.url - Expected a value of t
H88 Error: Invalid account: #0 for network: mumbai - Expected string, received undefined
/* hardhat.config.js */
require("#nomiclabs/hardhat-waffle");
module.exports = {
defaultNetwork: "hardhat",
networks: {
hardhat: {
chainId: 1337
},
mumbai: {
url: "https://rpc-mumbai.maticvigil.com",
accounts: [process.env.privateKey]
}
},
solidity: {
version: "0.8.4",
settings: {
optimizer: {
enabled: true,
runs: 200
}
}
}
}
You are not loading the private key correctly from your .env file.
Do a:
npm install dotenv --save-dev
and add this at the top of your config:
require('dotenv').config()
console.log(process.env) // remove this after you've confirmed it working
The console log should now return your dotenv object

gulp-imagemin: error "pPipe(...) is not a function"

Running gulp-imagemin causes the following error:
/.../node_modules/imagemin/index.js:64
const pipe = opts.plugins.length > 0 ? pPipe(opts.plugins)(input) : Promise.resolve(input);
^
TypeError: pPipe(...) is not a function
Source:
import plugins from 'gulp-load-plugins';
...
gulp.task('img:production', () =>
gulp.src(`${config.dirs.src}/img/**/*`)
.pipe(plugins().imagemin())
.pipe(gulp.dest(`${config.dirs.dist}/img`))
);
...
gulp.task('build:production',
[
'img:production',
'html:production',
'css:production',
'js:production',
'copy',
'critical',
],
);
Gulp: 3.9.1
Gulp-Imagemin: 3.2.0
This seems to be an issue with the current version of gulp-imagemin. But it should be fixed with the upcomming version, according to that issue: https://github.com/sindresorhus/gulp-imagemin/issues/261

Webpack runs Babel against PNG

Here is my webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
context: __dirname,
entry: {
javascript: './static/jsx/main.jsx'
},
output: {
path: path.resolve('./static/js/app/'),
filename: 'bundle.js'
},
module: {
preLoaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'source-map'
}
],
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.(jpg|png)$/,
loader: 'url-loader?limit=25000',
include: path.resolve('./static/images/')
}
]
},
};
Here is example of using png in a jsx file
import L from 'leaflet';
import { LayersControl, Marker, Popup } from 'react-leaflet';
const src = require('./marker-icon-red.png');
//Extend the Default marker class
let RedIcon = L.Icon.Default.extend({
options: {
iconUrl: src
}
});
let redIcon = new RedIcon();
When I run webpack for my jsx files (using gulp)
gulp.task('transform', function() {
return gulp.src(path.JS)
.pipe(webpack( require('./webpack.config.js') ))
.on('error', swallowError)
.pipe(gulp.dest(path.DEST_BUILD));
});
I get this error
[15:14:10] Starting 'transform'...
Error in plugin 'webpack-stream'
Message:
./static/jsx/map/markers/marker-icon-red.png
Module parse failed: D:\work\Cycling\static\jsx\map\markers\marker-icon-red.png
Unexpected character '?' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '?' (1:0)
at Parser.pp$4.raise (D:\work\Cycling\node_modules\webpack\node_modules\acor
n\dist\acorn.js:2221:15)
at Parser.pp$7.getTokenFromCode (D:\work\Cycling\node_modules\webpack\node_m
odules\acorn\dist\acorn.js:2756:10)
at Parser.pp$7.readToken (D:\work\Cycling\node_modules\webpack\node_modules\
acorn\dist\acorn.js:2477:17)
at Parser.pp$7.nextToken (D:\work\Cycling\node_modules\webpack\node_modules\
acorn\dist\acorn.js:2468:15)
at Parser.parse (D:\work\Cycling\node_modules\webpack\node_modules\acorn\dis
t\acorn.js:515:10)
at Object.parse (D:\work\Cycling\node_modules\webpack\node_modules\acorn\dis
t\acorn.js:3098:39)
at Parser.parse (D:\work\Cycling\node_modules\webpack\lib\Parser.js:902:15)
at DependenciesBlock.<anonymous> (D:\work\Cycling\node_modules\webpack\lib\N
ormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (D:\work\Cycling\node_modules\webpack-cor
e\lib\NormalModuleMixin.js:310:10)
at nextLoader (D:\work\Cycling\node_modules\webpack-core\lib\NormalModuleMix
in.js:275:25)
# ./static/jsx/map/markers/parkings_markers.jsx 19:10-42
[15:14:21] Version: webpack 1.13.2
Asset Size Chunks Chunk Names
bundle.js 1.48 MB 0 [emitted] javascript
ERROR in ./static/jsx/map/markers/marker-icon-red.png
Module parse failed: D:\work\Cycling\static\jsx\map\markers\marker-icon-red.png
Unexpected character '?' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '?' (1:0)
at Parser.pp$4.raise (D:\work\Cycling\node_modules\webpack\node_modules\acor
n\dist\acorn.js:2221:15)
at Parser.pp$7.getTokenFromCode (D:\work\Cycling\node_modules\webpack\node_m
odules\acorn\dist\acorn.js:2756:10)
at Parser.pp$7.readToken (D:\work\Cycling\node_modules\webpack\node_modules\
acorn\dist\acorn.js:2477:17)
at Parser.pp$7.nextToken (D:\work\Cycling\node_modules\webpack\node_modules\
acorn\dist\acorn.js:2468:15)
at Parser.parse (D:\work\Cycling\node_modules\webpack\node_modules\acorn\dis
t\acorn.js:515:10)
at Object.parse (D:\work\Cycling\node_modules\webpack\node_modules\acorn\dis
t\acorn.js:3098:39)
at Parser.parse (D:\work\Cycling\node_modules\webpack\lib\Parser.js:902:15)
at DependenciesBlock.<anonymous> (D:\work\Cycling\node_modules\webpack\lib\N
ormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (D:\work\Cycling\node_modules\webpack-cor
e\lib\NormalModuleMixin.js:310:10)
at nextLoader (D:\work\Cycling\node_modules\webpack-core\lib\NormalModuleMix
in.js:275:25)
# ./static/jsx/map/markers/parkings_markers.jsx 19:10-42
[15:14:21] Finished 'transform' after 11 s
As I understood it's babel tries to read png file, although I told webpack that png files should be treated by url-loader not babel.
What am I doing wrong?
Thanks for help!
Your url-loader config is set to only consider images from ./static/images, because of the include property:
{
test : /\.(jpg|png)$/,
loader : 'url-loader?limit=25000',
include : path.resolve('./static/images/')
}
However, the image you're trying to require is located in a different directory (./static/jsx/map/markers/).
If you remove the include, it'll probably work.
Renaming img1.PNG to img1.png solved it in my case.

Gradle loads mysql-connector jar but no dbunit jar as external dependencies, why?

Please give me some lights about what I'm doing wrong here. First of all I'm newbie with Gradle and Groovy and for learning purposes I'm playing with them and DBUnit.
I tried the code listed below, my goal is to generate a dataset getting the data from a mysql db.
import groovy.sql.Sql
import org.dbunit.database.DatabaseConnection;
import org.dbunit.database.IDatabaseConnection;
import org.dbunit.dataset.IDataSet;
import org.dbunit.dataset.xml.FlatXmlDataSet;
repositories {
mavenCentral()
}
configurations {
dbunit
}
dependencies {
dbunit 'dbunit:dbunit:2.2',
'junit:junit:4.11',
'mysql:mysql-connector-java:5.1.25'
}
URLClassLoader loader = GroovyObject.class.classLoader
configurations.dbunit.each { File file -> loader.addURL(file.toURL()) }
task listJars << {
configurations.dbunit.each { File file -> println file.name }
}
task listTables << {
getConnection("mydb").eachRow('show tables') { row -> println row[0] }
}
task generateDataSet << {
def IDatabaseConnection conn = new DatabaseConnection(getConnection("mydb").connection)
def IDataSet fullDataSet = conn.createDataSet()
FlatXmlDataSet.write(fullDataSet, new FileOutputStream("full.xml"))
}
static Sql getConnection(db) {
def props = [user: 'dbuser', password: 'userpass', allowMultiQueries: 'true'] as Properties
def url = (db) ? 'jdbc:mysql://host:3306/'.plus(db) : 'jdbc:mysql://host:3306/'
def driver = 'com.mysql.jdbc.Driver'
Sql.newInstance(url, props, driver)
}
What is weird to me is that all MySQL methods work well, I can get the list of tables and for instance the connection was done well so the mysql-connector-java.jar is being loaded (I think), but when I add the DBUnit stuff (import libs and the generateDataSet method) it seems the dbunit jar is not available for the script, I got the following errors:
FAILURE: Build failed with an exception.
* Where:
Build file '/home/me/tmp/dbunit/build.gradle' line: 5
* What went wrong:
Could not compile build file '/home/me/tmp/dbunit/build.gradle'.
> startup failed:
build file '/home/me/tmp/dbunit/build.gradle': 5: unable to resolve class org.dbunit.dataset.xml.FlatXmlDataSet
# line 5, column 1.
import org.dbunit.dataset.xml.FlatXmlDataSet;
^
build file '/home/me/tmp/dbunit/build.gradle': 2: unable to resolve class org.dbunit.database.DatabaseConnection
# line 2, column 1.
import org.dbunit.database.DatabaseConnection;
^
build file '/home/me/tmp/dbunit/build.gradle': 3: unable to resolve class org.dbunit.database.IDatabaseConnection
# line 3, column 1.
import org.dbunit.database.IDatabaseConnection;
^
build file '/home/me/tmp/dbunit/build.gradle': 4: unable to resolve class org.dbunit.dataset.IDataSet
# line 4, column 1.
import org.dbunit.dataset.IDataSet;
^
4 errors
But if I call the listJars task, I got this:
:listJars
junit-4.11.jar
mysql-connector-java-5.1.25.jar
hamcrest-core-1.3.jar
xercesImpl-2.6.2.jar
xmlParserAPIs-2.6.2.jar
junit-addons-1.4.jar
poi-2.5.1-final-20040804.jar
commons-collections-3.1.jar
commons-lang-2.1.jar
commons-logging-1.0.4.jar
dbunit-2.2.jar
BUILD SUCCESSFUL
Which in my understanding means all those jars were loaded and are available for the script, am I right? or am I doing something wrong with the class loader stuff?
Thanks very much.
The GroovyObject.class.classLoader.addURL hack is not the right way to add a dependency to the build script class path. It's just sometimes necessary to get JDBC drivers to work with Groovy (long story). Here is how you add a dependency to the build script class path:
buildscript {
repositories {
mavenCentral()
}
dependencies {
classpath "some:library:1.0"
}
}
// library can be used in the rest of the build script
You can learn more about this in the Gradle User Guide.

Logging errors in a grails application in the logs

When my Grails application crashes, it shows the error and the stacktrace on the error page because the error.gsp page has the following snippet <g:renderException exception="${exception}" />. However nothing gets logged in the log file.
How can I change this? because for the production application I plan to remove the renderException because I don't want users to see the entire stacktrace.
My log4j settings are as follows:
appenders {
rollingFile name:'catalinaOut', maxFileSize:1024, fileName:"${System.properties.getProperty('catalina.home')}/logs/mylog.log"
}
root {
error 'catalinaOut'
debug 'catalinaOut'
additivity = true
}
error 'org.codehaus.groovy.grails.web.servlet', // controllers
'org.codehaus.groovy.grails.web.pages', // GSP
'org.codehaus.groovy.grails.web.sitemesh', // layouts
'org.codehaus.groovy.grails.web.mapping.filter', // URL mapping
'org.codehaus.groovy.grails.web.mapping', // URL mapping
'org.codehaus.groovy.grails.commons', // core / classloading
'org.codehaus.groovy.grails.plugins', // plugins
'org.codehaus.groovy.grails.orm.hibernate', // hibernate integration
'org.springframework',
'org.hibernate',
'net.sf.ehcache.hibernate',
'grails.app'
debug 'grails.app'
}
I'm running the app in development as grails run-app
I use these settings for console and file based logging. You can remove stdout if you don't want/need console. Just copy all your error classes in the corresponding list.
log4j = {
def loggerPattern = '%d %-5p >> %m%n'
def errorClasses = [] // add more classes if needed
def infoClasses = ['grails.app.controllers.myController'] // add more classes if needed
def debugClasses = [] // add more classes if needed
appenders {
console name:'stdout', layout:pattern(conversionPattern: loggerPattern)
rollingFile name: "file", maxFileSize: 1024, file: "./tmp/logs/logger.log", layout:pattern(conversionPattern: loggerPattern)
}
error stdout: errorClasses, file: errorClasses
info stdout: infoClasses, file: infoClasses
debug stdout: debugClasses, file: debugClasses
}