Importing reactstrap components uses wrong syntax - javascript

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?

Related

Why am I not able to import the following File

This is my src directory -
And while importing the last file (StateProvider.js) in Product.js, this is the error I get while importing StateProvider -
My import statement from Product.js-
Can anyone guide me, why my import is not working?
The error occurs because StateProvider.js is not in the same directory as Product.js. You have to specify the import statement like this:
import StateProvider from '../../StateProvider';
Probably 2 errors.
First, If you export the default file you're good to go.
export default StateProvider
Second is if you are on the correct directory.
it shouild be
import StateProvider from '../../StateProvider'
import StateProvider from '../../StateProvider'
I also recommend using "Auto Import" extension if you working with Visual Studio Code.

How do i import my file to app.js using javascript?

I'v been trying to import a javascript file to app.js found in create-react-app package. I used this code to import my file :
note:my file is located in a folder called components where you find the folder Navigation and its in that folder.
import script from './components/Navigation/script;
and i exported the file using :
export default App;
but in my terminal i got an error saying
Module not found : cant resolve'./components/Navigation/script'
Could someone please tell me how i can fix this error.
Thank you in advance :-)
You got the syntax wrong.
import script from './components/Navigation/script;
actually imports the default export from script.js
export default function() {}
You can also import named exports like this:
import {something} from "./script.js"
Which imports
const something = 42;
export something;
I guess you could import js(and css) files with
import "./scripts.js" //or import "./style.css"
But you generally want to export individual functions, values etc.
You can also import everything from a module like this
import * as React from "react";
But create-react-app configuration allows you to use this as
import React from "react"; //Internally equals to import * as React from "react";

Using imports with Nodejs doesn't recognize a default export

I'm using expo-server-sdk, and I haven't had this issue with other packages yet, but I'm thinking that this isn't an issue specific to this package.
Basically, my IDE recognises that this package has a default export, and correctly autoimports it as,
import { Expo } from 'expo-server-sdk';
The problem is that this doesn't compile and throws the error,
SyntaxError: The requested module 'expo-server-sdk' does not provide an export named 'Expo'
I'm using the experimental ESM module loader with Node v13.13.0. When I initially set up the config and environment, I was able to use import instead of require, however I am supposed to append the extension of each file I import.
What can be wrong here?
Expo post for reference
If it's exported as default you only need
import Expo from 'expo-server-sdk';
instead of
import { Expo } from 'expo-server-sdk';
I managed to work around this by doing the following:
import Expo from 'expo-server-sdk';
...
let expo = Expo.Expo()
...
if (!Expo.Expo.isExpoPushToken(pushToken)) {
...
}
...
Just import Expo from 'expo-server-sdk'; did not work.

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

External react component cannot see React.Component

The external React component says Uncaught TypeError: Cannot read property 'Component' of undefined when I link as npm package.
I link a package in package.json as "react-mapbox": "https://github.com/varya/react-mapbox.git". Then I use it in code
import {render} from 'react-dom';
import MapBox from "react-mapbox";
render(
<div>
<h1>Hello, world!</h1>
<MapBox />
</div>
,
document.getElementById('example')
);
But nothing works, I get that error. The full repo is here https://github.com/varya/react-mapbox-test I made a small example to illustrate.
The react-mapbox package is my own, maybe I build it wrongly? This is its repo https://github.com/varya/react-mapbox
I built it with webpack, like that https://github.com/varya/react-mapbox/blob/master/webpack.config.js As I suppose, this build does not include react package assuming that this will be at the project which link it. But the component still do not see react object.
UPD
I added import React from 'react'; as #aulizko suggested, but this only provided React object onto a page. It still was not visible for the component.
To fix this I had to provide this changes https://github.com/varya/react-mapbox/commit/2687d66025aaa84553a79850aa8686e88f1f39d9
I required react in the code of the component as well.
And I have to build with Babel. For some reason the webpack build gives the same error even if react is required. I created a branch to illustrate this https://github.com/varya/react-mapbox/tree/webpack Now I'm happy with Babel, but with this branch you can see what's wrong with webpack if interested.
You're probably bundling your module as UMD which is causing the bundle to utilized a global React variable which doesn't exist in the consumer app. You need to export the bundle as a CommonJS or AMD module using https://webpack.github.io/docs/configuration.html#output-librarytarget. Simple add libraryTarget: 'commonjs2 or libraryTarget: 'amd' to the output key in the webpack config and make sure you are importing react in your component.
I added import React from 'react'; as #aulizko suggested, but this only provided React object onto a page. It still was not visible for the component.
To fix this I had to provide this changes https://github.com/varya/react-mapbox/commit/2687d66025aaa84553a79850aa8686e88f1f39d9
I required react in the code of the component as well.
And I have to build with Babel. For some reason the webpack build gives the same error even if react is required. I created a branch to illustrate this https://github.com/varya/react-mapbox/tree/webpack Now I'm happy with Babel, but with this branch you can see what's wrong with webpack if interested.
The thing is that the jsx-code that you see in your editor is not the code that will be executed by node or browser.
If you look into code that are generated by the babel, you'll see something like this:
(0, _reactDom.render)(React.createElement(
'div',
null,
React.createElement(
'h1',
null,
'Hello, world!'
),
React.createElement(_reactMapbox2['default'], null)
), document.getElementById('example'));
So as you can see it uses React constant under the hood.
You need to explicitely import React if you want to use jsx-code.
Add something like this in your code and it'll work:
import React from 'react'; // <!--- add this!!!
import {render} from 'react-dom';
import MapBox from "react-mapbox";
// the rest of your code goes here...
You have to import React's Component it this way:
import {Component} from 'react';
or even:
import React, { Component, PropTypes } from 'react';

Categories