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.
Related
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';
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!
Since the JSX plugin is deprecated I've been struggling to have Babel handle my jsx files. I finally managed to convince SystemJS to load my app with:
System.import('scripts/app.jsx!babel')
But this doesn't import any imported jsx files like:
import Login from './components/Login' // File is Login.jsx
With the old plugin this worked but now I am not sure how to get it working now.
One step in the right direction would be adding this to your config:
"packages": {
"components": { // Packages could of course be replaced with what you want
// to affect. Even "." is valid.
meta: {
'*.jsx': {
loader: 'babel'
}
}
}
}
This allows you to load files as such: import .. from './components/Login.jsx'.
You could take this one step further by adding "defaultExtension": "jsx" under "components". I'd only use this if the folder/modules was jsx-only though. That would allow you to import as import .. from './components/Login' as you wanted to.
Is there any way to disable the use of import once I've finished using it? I'm using IronPython as a scripting engine and I don't want users to be able to import anything. This could be done in LuaInterface by the use of setfenv:
luanet.load_assembly("System.Windows.Forms")
luanet.load_assembly("System.Drawing")
Form=luanet.import_type("System.Windows.Forms.Form")
-- Only allow the use of the form class
local env = { Form = _G.Form }
setfenv(1, env)
Or by setting the import functions to nil before parsing the script file:
luanet.load_assembly = nil
luanet.import_type = nil
Is this possible in IronPython?
One option is to pre-check the scripts you are executing and disallow any that have import statements (or from ... import statements).
foreach(line in script) {
if(line.TrimeStart().StartsWith("import") || line.TrimeStart().StartsWith("from") {
throw ...;
}
}
It's not foolproof (__import__ is still an issue), but it will cover the vast majority of cases.
You can create a hook to the import function and deal with user import anyway you like.
In you case you can just return null for any import that your hook gets.
It was explained how to do it here: https://stackoverflow.com/a/4127766/448547