ES6 import - What does the question mark mean? - javascript

I noticed while digging through material UI's codebase that some of the files have import statements that include a ? mark in the import path. For example import * as pageProps from 'docs/data/material/getting-started/overview/overview.md?#mui/markdown'; notice the ?#mui/markdown at the end. What does this mean? Or do?

Related

When do I use {} and when do I not in import in JavaScript [duplicate]

This question already has answers here:
When should I use curly braces for ES6 import?
(11 answers)
Closed 1 year ago.
I am learning Vue JS and find that sometimes we import {} sometimes we import without {}. What is the difference, please?
import Home from '#/views/Home.vue'
import { createRouter, createWebHistory } from 'vue-router'
Thank you
The import with {} is called named import and without {} is called default import.
When you export a component as export Component_Name you import it as import {Component_Name } from 'path_to_component';
When you export a component as export default Component_Name you import it as import Component_Name from 'path_to_component';
It's nothing vue specific, it's just a feature of ES6 version of Javascript.
If you want all or more function(component) of the package you can use import Home from '#/views/Home.vue',
If you want a specific function(component) from the package you can use import { createRouter, createWebHistory } from 'vue-router'
To my mind, the way Javascript does imports is confusing, and is a common source of programming errors.
The problem is that there are no rules about default exports vs named exports, and there are no errors that come from importing the wrong thing.
For example,
import moment from 'moment' // The _right_ way to import it
const now = moment()
Compare that with this code, which looks remarkably similar, only the braces on the import are different:
import { moment } from 'moment' // The _wrong_ way to import it,
// but it doesn't throw an error (until you try and use it)
const now = moment() // Will throw an error, because moment is undefined
There is a good article here on the subject: https://humanwhocodes.com/blog/2019/01/stop-using-default-exports-javascript-module/
Conclusion
I’ve had several productivity problems importing default
exports in my projects. While none of the problems are necessarily
impossible to overcome, using named imports and exports seems to
better fit my preferences when coding. Making things explicit and
leaning heavily on tooling makes me a productive coder, and insofar as
named exports help me do that, I will likely favor them for the
foreseeable future. Of course, I have no control over how third-party
modules I use export their functionality, but I definitely have a
choice over how my own modules export things and will choose named
exports.

Cannot import Module without curly braces in react even after 'export default'

I have read somewhere that importing module in react with curly braces around imports the entire library instead and effectively increases the bundle size. I was using this concept and was successfull in importing modules without curly braces, like this:
import Jumbotron from 'reactstrap';
and it was working fine. I don't know why the next time I build the code, it started showing me this warning:
WARNING in ./React Coursera/Header.js 5:71-77
export default (imported as Jumbotron) was not found in reactstrap.
Also the app didn't run in browser.
Then I went to node_modules to check if export default is present in jumbotron or not, and I found this statement:
export default Jumbotron;
It means that indeed it was exporting the Jumbotron as default, then why it showed me this warning.
Can you help me guys to fix this problem?
Thanks in advance!
Where did you read that importing with curly will increase the bundle size, it's reverse,
// below line will import everything
import * as reactstrap from 'reactstrap'
But
// this will import only specific module
import { Jumbotron } from 'reactstrap'
By this line :
// will import from /reactstrap/index.js
import Jumbotron from 'reactstrap';
You are importing nothing https://github.com/reactstrap/reactstrap/blob/master/src/index.js , as there is export default
So I don't know how it worked before in your case
Below line :
// and this line is not inside the /reactstrap/index.js but /reactstrap/Jumbotron.js
export default Jumbotron;
is here : https://github.com/reactstrap/reactstrap/blob/master/src/Jumbotron.js
So you can do :
import { Jumbotron } from 'reactstrap'
It depends on your build setup and/or how the library code is setup. Some libraries are built in a way that won't import the entire library when you use curly braces. You can also have something enabled in your build tools called "tree shaking" which will remove all code that is unused.
I'm guessing what you were trying to do was import Jumbotron individually which is a safe bet when you are unsure if the whole lib will be imported. Again, it depends on the file structure of the library but you are probably missing the sub-directory in your import. There should be directories inside of the node_module folder for each component. Might be something like node_modules/reactstrap/Jumbotron. The default export you saw was probably on the Jumbotron file. When you use import Jumbotron from 'reactstrap' you are asking it do find a default export for the "main" file of the library. This would be defined in the package.json file of the library.
What you need to do is add the sub-directory to your import like so (just guessing here) import Jumbotron from 'reactstrap/Jumbotron'. Just think of reactstrap/ being the root directory of the library, you can select any file like you normally would.
If you are using webpack, there's this awesome plugin where you can check to see what is included in your bundles just to make sure you are indeed only importing the code that you need https://github.com/webpack-contrib/webpack-bundle-analyzer

Bundling import es6 modules expressions across all javascript files

Let's say I have multiple javascript files, along with several node modules, and in each file I do something like this:
import 'node_module_a'
import 'node_module_b'
import 'node_module_c'
I find myself repeating this same code across all my javascript files, so I'm wondering is there a compact way (like bundling) to add all this to a single file, and just import from that?
Like:
in all_the_things.js:
import 'node_module_a'
import 'node_module_b'
import 'node_module_c'
Then add only this line in all javascript files:
import * from 'all_the_things.js'
I tried reading some documentation to give me ideas, but I'm at a loss here.
I had no idea I literally wrote the answer in the question. I tried all kinds of stuff, except what I posted. When I tried it, it worked.
If you put
in all_the_things.js:
import 'node_module_a'
import 'node_module_b'
import 'node_module_c'
then you do this in the caller js file:
import 'all_the_things'
it will import all the nodes. Also, I found out if you put those imports in a parent file, loading only once, it will be viewed by other child components.

Importing reactstrap components uses wrong syntax

According to the docs, I should be able to do this to import a component for use in my React App:
import { Alert } from 'reactstrap';
However, this will cause webpack to complain like this:
| Module not found: Error: Can't resolve 'reactstrap' in '~/project/client/app/bundles/Frontend/components/team'
Then, I switch the import to this:
import Alert from 'reactstrap/lib/Alert';
And the import & functionality works!
This probably means (?) some configuration or module exports are not working for this module. Where can I start debugging / fixing this?

Is there any solution to reduce number of `import` lines in es6? [duplicate]

What is the best way to import some modules in all of the files of the project, so I don't have to write stuff like:
import React from 'react';
import Reflux from 'reflux';
import reactMixin from 'react-mixin';
in almost every single file?
The other answer covers this, but not with valid ES6, so I'm adding my own.
Make a central file to import your react components, in some central react.js file
export {default as React} from 'react';
export {default as Reflux} from 'reflux';
export {default as reactMixin} from 'react-mixin';
Then in the files where you need to use these three, you could do
import {React, Reflux, reactMixin} from './react';
to import all three into your component file.
Create a "base" that declares common imports, then you can import that one file.

Categories