Having a project here not using TypeScript and trying to implement a Dropdown.
But I fail importing the Dropdown Option. Like documented in https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown
import { Dropdown, DropdownMenuItemType, IDropdownStyles, IDropdownOption } from '#fluentui/react/lib/Dropdown';
It cannot find the IDropdownOption export. It does not exist in the JS file, but in the TypeScript file.
Does that mean TypeScript is mandatory?
Thanks for any hints
Related
I wrote myself a small package which I use to share different React components between my projects.
The "exports" field in my package.json looks like this:
Since this is a TypeScript project, the transpiled .js in the output directory are specified below.
"exports": {
".": "./lib/index.js"
}
My index.ts file looks like this:
export * from "./Grids";
Then inside my Grids folder i have another index.ts file with the following content:
export * from "./UniversalGrid";
And finally inside the UniversalGrid folder, there is another index.ts file, in which the actual components is getting exported:
export * from "./UniversalGrid";
Now when I want to use the component in my app, I am shown two import suggestions, namely:
import {UniversalGrid} from "#privateComponents/react-components"
and
import {UniversalGrid} from "#privateComponents/react-components/lib/Grids/UniversalGrid"
The first approach (import from /react-components), works without problems.
However, with the second possible import statement (import from /react-components/lib/Grids/UniversalGrid) the following occurs:
Module not found: Error: Package path ./lib/Grids/UniversalGrid is not exported from package C:\Users\<user>\WebstormProjects\PKD\node_modules\#privateComponents\react-components
However, this way the component can be imported without any problems, and also when I select "Jump to definition" I am led to the correct file.
Now I have two questions, first, why is this happening?
And second, how can I import/export my components separately.
Say: Grid1 should be imported from /Grids/Grid1.
Grid 2 should be imported from /Grids/Grid2.
But none of the modules should be imported directly from the /Grids folder.
Thank you very much in advance!
Just dont export Grid in Grids/index.ts, change your transpiled to this
"exports": {
".": "./lib/index.js",
"./Grids/Grid1": "./lib/Grids/Grid1/index.js",
"./Grids/Grid2": "./lib/Grids/Grid2/index.js"
...
},
Now you can import Grid1 from /Grids/Grid1 not from /Grids
I am trying to use tabulator in svelte. But it seems tabulator does not expose package type as module in package.json file. Because of that, we cannot import tabulator_esm as module.
When I try to import that as module, I get error from vite like Unexpected token export. Though there is other way to import like await import('tabulator-tables');.
Should not this option (`"type": "module") be in package.json?
You can import Tabulator using the standard esm import sytanx, because the Tabulator library exports its core functionality seperate from its modules, you need to make sure you import the bits of the library you need:
To get the basic Tabulator core functionality:
import {Tabulator} from 'tabulator-tables';
To get the basic Tabulator core functionality with specific modules:
import {Tabulator, FormatModule, EditModule} from 'tabulator-tables';
Tabulator.registerModule([FormatModule, EditModule]);
To get full tabulator with all modules installed (this will be a much bigger source file):
import {TabulatorFull as Tabulator} from 'tabulator-tables';
created a new project in expressjs. I want to create my own class. So I created a file MyClass.js in /routes/.
class MyClass {
constructor() {
}
}
export default MyClass;
And in /routes/index.js i added:
import MyClass from './MyClass';
And I have an error:
import MyClass from './MyClass;
^^^^^^
SyntaxError: Cannot use import statement outside a module
[...]
What I'm doing wrong?
Your project is not set up properly to interpret the file that has the error as an ESM module file. It is, instead, being interpreted as a CommonJS module (where you use require(), not import) which is the nodejs default.
There are a number of ways to tell nodejs that your file is supposed to be an ESM module.
You can give it a file extension of .mjs.
You can add "type": "module" to your package.json file.
You can use the --input-type=module command line argument when starting node.js if this file is your top level file you're executing.
See nodejs doc here on this subject.
FYI, you could just switch to the CommonJS syntax of using require() and module.exports instead of import and export, but I assume what you really want to do is to tell nodejs that you want to use ESM modules so you can use the more modern import and export syntax.
Well first of all to export your class you suppose to use exports or module.export
and to import it you suppose to use require('') not import.
Those features are only available with .mjs or if you will setup babel though soome es6 features are yet to land in
I have these import:
import {Input, InputTxtCenter} from '../../../components/forms/input/input.js';
import {ButtonRed} from '../../../components/buttons/';
import {TxtCenter} from '../../../components/misc/texts/texts.js';
and I want to transform these routes into something similar to this
import {ButtonRed, ButtonWarning} from 'buttons';
import {TxtCenter} from 'misc/text';
import {TxtCenter} from 'forms/input';
that is, that the system knows that importing will always be from the "components" folder
Is it possible to do this?
Without having to create the component in node_modules?
I think this less of a React question, and more of a module resolution/aliasing one.
I assume that you are using some tool like babel, in which you can try babel-plugin-module-resolver.
The main idea is to define aliases in your .babelrc file so that you can avoid keeping track of relative directory structure when importing.
You can create .env file containing NODE_PATH=src if you're using create-react-app.
I recommend you to start any project using CRA with possible eject option if you really require customization.
I coded all js classes according to ES6 and added all JSDoc comments using with eslint.
I created index.js file for the module which exports necessary classes of node module.
After linking(npm link) the module and import the classes from other node application I can't see the class files.
Would you write if there is a proper way to create, export modules and import them in order to see every types, properties etc in VS Code intellisense?
Should I generate .d.ts file and import it somehow in VS Code to see them in intellisense?