We have a simple setup of Webpack 4 / Babel 7 in a React app.
I would expect if an import is missing in one of the JSX files - Webpack would kill the build
but we came across cases, for example:
export default class SomeClass extends Component {
render() {
return (<Button>click</Button>)
}
Where the build does not give us indication that something is wrong (just the built-in es-list in IntelliJ)
Is there some configuration in Webpack that can prevent this?
Related
I am probably missing a verry basic understanding of loading less files in ReactJS, but I am unable to solve the following issue.
I have created components and created less files for each of them, for example:
import * as React from 'react';
import Row from 'antd/lib/row';
import Col from 'antd/lib/col';
import { NavLink } from 'react-router-dom';
import '../styles/how-it-works-styles.less';
import Icon from 'antd/lib/icon';
class HowItWorksComponent extends React.PureComponent<Props> {
public constructor(props: Props) {
super(props);
}
public render() {
return (
<Row className={'steps-row'}>
Now when I load a page where this component is not at all used, the less file is stilling being loaded into the dom. Could someone explain why this is happening and how i can prevent this from happening?
Your problem is not really about less, but a general problem of how to bundle a web app optimally. Since you're not providing your main app component or your webpack config (assuming you're using webpack for bundling), I obviously don't know the details of your setup. In general however, the standard configuration is to bundle all the components and other imports reachable from the entry point file into one big file. The fact that you use react router or similar to split your app into "pages" doesn't change this, as react router only affects which components are rendered when, not the bundling.
If you need to split your app into multiple bundles (which IMO requires a relatively large app to consider) you can use dynamic imports to make some of your components "Loadable". This means they will be placed in a separate bundle which is only loaded as needed. There is a tutorial in the react router documentation on how to set this up: https://reacttraining.com/react-router/web/guides/code-splitting
Well, recently I've started using the React.js library, and now I'm trying to use it with Firebase Hosting, with the TypeScript language. But, every time I try to write some code using tsx it just doesn't work, for example:
import * as React from "react"; //red underline under "react"
import "./App.css";
import logo from "./logo.svg";
class App extends React.Component {
render() {
return <h1>Hello</h1>; //red underline under <h1> and </h1>
}
}
export default App;
that way I just can't write any jsx code here, because it always appears the issue:
test.tsx(1,1): error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists
Can somebody please help me with this?
How did you create your react application? If you used create-react-app you'll need to use react-scripts-ts as your --scripts-version flag. This should install the #types packages along side React's dependencies, eliminating your problem.
Also, it should get you started with an App.tsx file as the one provided in your snippet is not a valid typescript react component (i.e. the your render() method is not public).
Happy hacking!
I solved this issue by reloading VSCode.
ctrl+shift+P > Developer: Reload Window
I often get this message even at the beginning when I run my code:
"You attempted to import ______which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/." Did not have this problem before.
What I don't understand if why it happens even when files etc are within src directory? And I have not moved anything. All attempts at doing a React JS project is a fail, as a result.
I considered the issue could be the installation of ESLINT or webconfig as guessed by someone. I am in the very beginning of my code when I get this error message. This happens from all the create-react-app work I do.
This is the code in my App.js
import React, { Component } from 'react';
import Layout from './components/Layout/Layout';
import BurgerBuilder from '/containers/BurgerBuilder/BurgerBuilder';
class App extends Component {
render() {
return (
BurgerBuilder
);
}
}
export default App;
This problem apparently occurs if React is an older version (15 in this case when it should be React 16).
I have made a component in my React app that I would like to publish to NPM. It's consists of just one file index.js
import React from 'react'
import PropTypes from 'prop-types';
export default class Test extends React.Component {
//I seem to be getting a specific issue with the lines below
//Do I need a special loader for these?
static displayName = 'Test'
static defaultProps = {
live: true,
}
}
Originally the component was in a components directory of my main app and I include it using:
import Test from './components/Test'
Since then I have created a new folder (not part of my main app) and added a package.json file and the index.js file. I have also published it to NPM which worked fine but when I try to use it after installing...
npm i -S package-name
import Test from 'package-name'
I get an error: You may need an appropriate loader to handle this file type...
My package.json file doesn't have any dependencies or devDependencies at the moment. Do I need to do something with Webpack and Babel?
Do I need to do something with Webpack and Babel?
Most likely. If you are using ES6 syntax in package-name then babel needs to transcode that library as well. When I have encountered that error this has always been the case. I suggest updating your Webpack / Babel configuration to include that library.
I have a React project which uses Browserify externals. What's the best approach for testing components which reference external dependencies in Jest? For example - I have something like this...
import React from 'react';
import someExternal from 'someExternal';
class MyClass extends React.Component {
methodToTest() {
...
someExternal.doStuff();
...
}
}
This works as expected in the browser, the bundle which exposes someExternal is available, so someExternal's path can be resolved.
However in my unit test, the path to someExternal can't be resolved, because the bundle which contains someExternal is not available.
Sooo what's the best approach here?
OK solved. You can use manual mocks, which Jest loads before it tries to load the actual module.
https://facebook.github.io/jest/docs/manual-mocks.html