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.
Related
I'm trying to make a luxon example in stackblitz, but the imports are not working.
The luxon library and its types are added, and it is imported at the beginning of the file:
However I get the message that it is undefined!
I tried to find other examples of stackblitz (google: "luxon stackblitz") however none of them seem to work or use and old version, which is imported via CDN
Do I somehow have to add the whole luxon library to the project?
Code (super simple)
// Import stylesheets
import './style.css';
import { DateTime } from 'luxon';
// Write TypeScript code!
const appDiv: HTMLElement = document.getElementById('app');
appDiv.innerHTML = `luxon sample -->"${DateTime.now()}"<--`;
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 working on a jspm/systemjs app and would like to better understand how SystemJS handles multiple versions of the same dependency. Consider the following (simplified) SystemJS config example:
map: {
"react": "npm:react#0.14.8"
"npm:foo": {
"react": "npm:react#0.14.7"
}
}
I assumed when my code imported react it would get v0.14.8, while code in the "foo" dependency would receive v0.14.7. However, my browser console prints warnings about multiple copies of react being found.
Questions:
How does SystemJS supports multiple versions of dependencies,
Why would I be receiving an error like this if the different versions are kept separate?
Since SystemJS uses import-maps, you can use this approach:
Using Multiple Versions of the Same Module
It's easy to require multiple versions of the same package with import maps. All you need to do is use a different import specifier in the mapping as shown below:
<script type="importmap">
{
"imports": {
"lodash#3/": "https://unpkg.com/lodash-es#3.10.1/",
"lodash#4/": "https://unpkg.com/lodash-es#4.17.21/"
}
}
</script>
You can also use the same import specifier to refer to different versions of the same package through the use of scopes. This allows you to change the meaning of an import specifier within a given scope.
<script type="importmap">
{
"imports": {
"lodash/": "https://unpkg.com/lodash-es#4.17.21/"
},
"scopes": {
"/static/js": {
"lodash/": "https://unpkg.com/lodash-es#3.10.1/"
}
}
}
</script>
With this mapping, any modules in the /static/js path will use the https://unpkg.com/lodash-es#3.10.1/ URL when referring to the lodash/ specifier in an import statement, while other modules will use https://unpkg.com/lodash-es#4.17.21/.
Source: https://www.honeybadger.io/blog/import-maps/
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.