If I try to include a .png file using Parcel bundler it tells me:
Unhandled Promise Rejection: Error: Cannot find module 'shared/logo.png'
And this is what I do:
import LogoSrc from './logo.png'
export default () => {
return (<img src={LogoSrc} />)
}
What am I missing?
Related
I am using Parcel to bundle my Javascript files. Everything works fine when using the localhost server to test out the build, however in production it doesn't like dynamic imports.
Here is the code snippet that I am importing:
if (condition) {
await import('./components/modify_root.js');
} else {
await import('./components/index_root.js');
}
My exact error is this. The app.js error is pointing to the second line in the code snippet.
The libraries I am using are PreactJS for frontend framework and node-sass for CSS.
I am generating a csv file from a List<List<dynamic>> named rows as follows ...
String csv = const ListToCsvConverter().convert(rows);
Then, If I'm on a mobile (Android or IOS) I send the file to an email and if I'm on the web I download it to the device using AnchorElement that is part of import 'dart: html' as html as follows:
if (_prefs.platform == 'isWeb')
{
html.AnchorElement(href: "data:text/plain;charset=utf-8,$csv")
..setAttribute("download", "report.csv")
..click();
} else {
//To write csv as a file in a path and send it using FlutterEmailSender
}
It's working right on Web, but when I try to compile in Android or IOS an error appears:
: Error: Not found: 'dart:html' import 'dart:html' as html;
^
: Error: Method not found: 'AnchorElement'.
html.AnchorElement(href: "data:text/plain;charset=utf-8,$csv")
I think It's because dart:html is not supported by IOS and Android, so my questions are:
What other package / function can I use to download a CSV file on the Web, without generating compilation errors (cross-platform)?
As an alternative solution, can I use some command so that the Widget uses dart:html only if it is running in a web environment?
You can use this instead:
import 'package:universal_html/html.dart' as html hide Text;
I'm having issues getting PostgreSQL to run on my local machine with react-native. I work primarily as a database developer so it's possible I'm missing something, but in my opinion this is something that should be well documented.
I run the following commands to create a react native project (npm v 4.6.1)
npm install -g expo cli
expo init needhelp
cd needhelp
then I paste in my app.js file and it runs fine. This is my app.js file.
import React, { Component } from 'react';
import { Text, View, Image } from 'react-native';
//const { Client } = require('pg')
//const { Pool, Client } = require('pg')
export default class HelloWorldApp extends Component {
render() {
return (
<View style = {{flex: 1, flexDirection: 'column', alignItems: 'center',}}>
<Text>Hello World!</Text>
</View>
);
}
}
The problem is, when I try and include pg in any way I get errors. The first error I get is "unable to resolve module pg." Then after I run npm install pg, I get
[22:32:20] The package at "node_modules\pg\lib\index.js" attempted to import the Node standard library module "util". It failed because React Native does not include the Node standard library. Read more at https://docs.expo.io/versions/latest/introduction/faq.html#can-i-use-nodejs-packages-with-expo
[22:32:20] Failed building JavaScript bundle.
Then after installing this I get:
[22:34:03] The package at "node_modules\pg\lib\connection.js" attempted to import the Node standard library module "net". It failed because React Native does not include the Node standard library. Read more at https://docs.expo.io/versions/latest/introduction/faq.html#can-i-use-nodejs-packages-with-expo
[22:34:03] Failed building JavaScript bundle.
Building JavaScript bundle [===================================================================================== ] 9>
Then
[2:36:57] The package at "node_modules\pg\lib\client.js" attempted to import the Node standard library module "events". It failed because React Native does not include the Node standard library. Read more at https://docs.expo.io/versions/latest/introduction/faq.html#can-i-use-nodejs-packages-with-expo
[22:36:57] Failed building JavaScript bundle.
then
[00:38:48] The package at "node_modules\pg\lib\connection.js" attempted to import the Node standard library module "tls". It failed because React Native does not include the Node standard library. Read more at https://docs.expo.io/versions/latest/introduction/faq.html#can-i-use-nodejs-packages-with-expo
[22:38:48] Failed building JavaScript bundle.
Then finally, the error that dooms me:
metro bundler has encountered an internal error, please check your terminal error output for more details.
How can I get the systemjs builder to ignore third party libraries? We are evaluating wijmo controls for use in an app and they provide wijmo.angular2.min.js, wijmo.input.min.js and wijmo.min.js. We load these after SystemJS in our web page and that works fine because those files register the wijmo modules. However, when we try to bundle it throws an error because it cannot find the files. Sample error:
Unhandled rejection Error on fetch for vendor/wijmo/wijmo.angular2.input.js
at file:///C:/git/prj/dist/vendor/wijmo/wijmo.angular2.input.js
I can add this path to my config but then I get a different error:
'wijmo/*': 'vendor/wijmo/wijmo.angular2.min.js'
Error:
Unhandled rejection TypeError: Error compiling register module "wijmo/wijmo.angular2.input"
at vendor\wijmo\wijmo.angular2.min.js
Source vendor\wijmo\wijmo.angular2.min.js is already a bundle file, so can't
be built as a module.
Edit
Adding this path lets bundling work (at least it builds the bundles), but keeping the line in my config causes the app to error out, apparently being unable to find the class I'm importing (throws unexpected directive 'undefined')...
'wijmo/wijmo.angular2.input': 'vendor/wijmo/wijmo.input.min.js'
I got it to work by adding a 'meta' section to my SystemJS config that told it not to build that path:
var meta = {
'wijmo/*': {
format: 'global',
build: false,
}
};
My project was working perfectly fine.. But after doing a git push, I'm suddenly getting an error when I run gulp:
{ [Error: ModuleParseError: Module parse failed:
/Users/xyz/project/node_modules/iconv-lite/encodings/tables/gb18030-ranges.json
Line 1: Unexpected token :
You may need an appropriate loader to handle this file type.
| {"uChars":[128,16 ....
Why is this happening? I have uninstalled and reinstalled this module iconv-lite, but it doesn't seem to help.
I received this same exact error. You'll want to install a JSON loader module. I'm using json-loader in this example.
npm install json-loader --save
Then, you need to add this loader to your webpack.config.js
module: {
loaders: [
{ test: /\.json$/, loader: "json-loader"}
]
}
I had this dependency by an indirect dependency on node-fetch and fixed the issue by adding the following to my webpack.config.js:
externals: {
'node-fetch': 'fetch'
}
Deleting the file solved the issue.