I am using Math.js to parse and evaluate a mathematical expression, and am following the example at https://mathjs.org/docs/custom_bundling.html#numbers-only as I only need basic number support. "mathjs": "^8.1.1", is listed in my package.json dependencies.
When I run the example code below, I get Module not found: Error: Can't resolve 'mathjs/number':
// use light-weight, numbers only implementations of functions
import { create, all } from 'mathjs/number'
const math = create(all)
Looks like maybe the documentation hasn't caught up. I was able to get this working by changing the line
import { create, all } from 'mathjs/number';
to
import { create, all } from 'mathjs/lib/esm/number';
Related
I have a project which uses flutter_libserialport library on macOS.
I am modifying it to work on web however this library does not work on web.
I am building a web implementation using navigator.serial in javascript which works fine.
However when I attempt to build the project for web I get the following error
/opt/homebrew/Caskroom/flutter/2.2.3/flutter/.pub-cache/hosted/pub.dartlang.org/libserialport-0.2.0+3/lib/src/config.dart:25:8: Error: Not found: 'dart:ffi'
import 'dart:ffi' as ffi;
This makes sense since FFI is not available on web.
But I don't even need the libserialport library on web any way.
How can I get flutter to ignore it?
I tried this however it doesn't contain information on how to exclude a package.
It also does not contain information on how to ignore it specifically for web. It seems to just ignore it in general.
Maybe you should guard your usages of libserialport with the kIsWeb predicate like following:
if(!kIsWeb){
// libserialport code execution here
}
I searched a lot as well and didn't find a way you can do that, I think this should be handled by the package itself not the package's users like in path_provider for instance.
As a workaround I have created a dummy libserialport's SerialPort class for web only as follows:
dummy_serialport.dart:
class SerialPort {
final String name;
static List<String> availablePorts = ['dummy'];
static SerialPortError? lastError;
SerialPort(this.name);
bool openReadWrite() {
return false;
}
}
class SerialPortError {}
// add more properties and functions as needed
main.dart:
import 'package:libserialport/libserialport.dart'
if (dart.library.html) './dummy_serialport.dart'
if (dart.library.io) 'package:libserialport/libserialport.dart';
....
if (!kIsWeb) {
final name = SerialPort.availablePorts.first;
final port = SerialPort(name);
if (!port.openReadWrite()) {
print(SerialPort.lastError);
exit(-1);
}
}
....
....
It's bad, I know :( but it works! maybe you can contact the package author to get more insight and if opening a PR where the interfaces are separated from the FFI implementation so that importing the classes wouldn't break web or something.
On this fiddle https://jsfiddle.net/k2c5upfo/1/, extern modules are called using the import method. I don't use node on my project. I'd like to convert all these import files into regular javascript files. How can I built them without using node.js ?
import * as THREE from "https://cdn.jsdelivr.net/npm/three#0.118.2/build/three.module.js";
import { OrbitControls } from "https://cdn.jsdelivr.net/npm/three#0.118.2/examples/jsm/controls/OrbitControls.js";
import { EffectComposer } from 'https://cdn.jsdelivr.net/npm/three#0.118.2/examples/jsm/postprocessing/EffectComposer.js';
import { ShaderPass } from 'https://cdn.jsdelivr.net/npm/three#0.118.2/examples/jsm/postprocessing/ShaderPass.js';
import { RenderPass } from 'https://cdn.jsdelivr.net/npm/three#0.118.2/examples/jsm/postprocessing/RenderPass.js';
import { ClearPass } from 'https://cdn.jsdelivr.net/npm/three#0.118.2/examples/jsm/postprocessing/ClearPass.js';
import { MaskPass, ClearMaskPass } from 'https://cdn.jsdelivr.net/npm/three#0.118.2/examples/jsm/postprocessing/MaskPass.js';
import { CopyShader } from 'https://cdn.jsdelivr.net/npm/three#0.118.2/examples/jsm/shaders/CopyShader.js';
For example, I was able to call 'OrbitControls.js' on a older version of three.js by simply add another file. Can I still use this method ? Thank you
EDIT :
I managed to convert my workflow using es6 modules. I've been wondering if there's a way to only import specific modules. My generated output file has the same weight with theses two different lines.
import {Scene, PerspectiveCamera, WebGLRenderer, CylinderBufferGeometry, MeshNormalMaterial, Mesh} from "../node_modules/three/build/three.module.js";
import * THREE from "../node_modules/three/build/three.module.js";
Is there a way to only have the part of code that I need in my final output ? Thank you.
Using global scripts is actually deprecate since r117. At the end of the year, using ES6 modules is the only way of importing example files.
I don't use node on my project.
Not sure I understand this sentence. The above fiddle is unrelated to node.js. You can import ES6 modules directly in HTML files as long as you put the import statements into script tags that look like so:
<script type="module">
</script>
This approach is also used by the official examples.
I'm hitting some problems extending Quill.
I want to modify the List and ListItem classes in Quill, so I tried to copy formats/list.js into my code base as a starting point. I then import my local copy and register it with Quill like so...
import { List, ListItem } from './quill/list';
Quill.register({
'formats/list': List,
'formats/list/item': ListItem
}, true);
However, when I attempt to create a list in the editor the code crashes in the List class with the following error:
ParchmentError {message: "[Parchment] Unable to create list-item blot", name: "ParchmentError"}
This happens on this line... https://github.com/quilljs/quill/blob/develop/formats/list.js#L99
I assume it relates to the imports I was forced to change, but I can't figure out what's wrong. I've not made any other changes to list.js. The original file has the following:-
import Block from '../blots/block';
import Container from '../blots/container';
Which I changed to this:-
import Quill from 'quill';
let Block = Quill.import('blots/block');
let Container = Quill.import('blots/container');
Is the way I am importing wrong? What is causing the error?
Figured it out (well a colleague did).
I needed to import Parchment like so :-
let Parchment = Quill.import('parchment');
instead of import Parchment from 'parchment';
This is because you'll end up with a different static Parchment class to the one used internally to Quill, so asking Quill for it's instance ensures you are both working with the same one (ie, the one where the blots were registered).
I came across that problem a couple hours ago.
In Quill's source code, List is a default export while ListItem is a named export.
So your import should look like this:
import List, { ListItem } from './quill/list';
Be sure to export them appropriately on your custom list.js file.
Good luck!
I have project structure like this
|--src
|--app.component
|--index.ts
|--home.component
|--index.ts
|--tsconfig.json
|--webpack.config.js
And I'm trying to do stuff below in app.component-index.ts
import { HomeComponent } from 'components/home.component'
Typescript couldn't find this module and throws
error TS2307: Cannot find module 'home.component'
Typescript docs say next:
A non-relative import to moduleB such as import { b } from "moduleB",
in a source file /root/src/folder/A.ts, would result in attempting the
following locations for locating "moduleB":
/root/src/folder/moduleB.ts
/root/src/moduleB.ts
/root/moduleB.ts
/moduleB.ts
So for my case I expect it would be like
/src/components/app.component/components/home.component
/src/components/components/home.component
/src/components/home.component
Thanks in advance.
P.S. In my webpack.config I've setted root.resolve to src and everything bundles correct. Typescript-loader prints errors to terminal but everything is bundled and works correctly
So I can guess at the "why" portion of this but I'm relatively new to TypeScript. I have gotten this to work though so I'll try explaining based on that solution as best I can.
What you expect based on the TypeScript Docs would be mostly correct if:
'components/home.component'
were treated as a 'Non-relative import'. I'm fairly certain (based on the solution that worked for me) that TypeScript treats it as an absolute path from the 'compilerOptions.baseUrl' field in your tsconfig.json.
What worked for me was to set it like so:
{
"compilerOptions": {
"baseUrl": ".",
// Other options
}
}
Which essentially tells TypeScript to try and find something like
'components/home.component'
by looking in the same directory as the tsconfig.json file for a directory called 'components' and then to look for a file/directory within it called 'home.component'.
So if your structure looks like:
|--src
|--app.component
|--index.ts
|--home.component
|--index.ts
|--tsconfig.json
|--webpack.config.js
And you set baseUrl to "." you would probably need to format your import like
import { HomeComponent } from 'src/home.component'
my code is like:
import Render from './AppeRender';
import { Component } from 'react';
export default class appDB extends Component {
render () {
return Render.call(this, this.props, this.state);
}
}
and what i'm getting is:
Module parse failed: /home/projects/node_modules/DB/Db.js Line 5: Unexpected token
You may need an appropriate loader to handle this file type.
Note: Error only comes in web setup, it's working fine in android and in IOS i haven't tried yet.
Does anyone have any idea regarding this.
I think what is wrong here is that you using import twice (and the second one is a destructure.
Try this instead:
import { Component } from 'react';
import Render from './AppeRender';
You can bind Component in one import.
The second import could have been changed to a straight destructure:
const { Component } = React;
But, there is no reason to do this if you are only using Component.
Using import on an Object is not really correct (however, it might work with some implementations), I assume that is why the error was occurring.