After globally uninstalling create-react-app, I was still getting an error that my create-react-app was out of date. Here’s what solved that for me: After sudo npm uninstall -g create-react-app Run npx clear-npx-cache Then try reinstalling create-react-app in the proper working directory: npx create-react-app my-app
UPDATE: The syntax is now supported by the latest versions of @typescript-eslint/parser and @typescript-eslint/eslint-plugin. ESLint support for TS import type syntax is working in progress. Issue: https://github.com/typescript-eslint/typescript-eslint/issues/1436 Pull request: https://github.com/typescript-eslint/typescript-eslint/pull/1465
// This is the piece we were missing ——————–v const connect = function (Component: React.FC): React.FC<Props> { const ComponentWrapper = function (props: Props): JSX.Element { return <Component {…props} />; }; return ComponentWrapper; }; and after restarting the compiler it’ll work fine. The type of the return value of the connect function is a functional component … Read more
It’s perfectly reasonable to want to share code between your front and back end. It’s one of the reasons to code in javascript instead of Ruby or PHP. You can accomplish exactly what you want by using yarn instead of npm and yarn workspaces: https://yarnpkg.com/lang/en/docs/workspaces/. At the top level you set up three modules/packages in … Read more
Unfortunately this is something you will have to do yourself. You can use a tool like npm-watch to accomplish what you want though: Install npm-watch npm i –save-dev npm-watch package.json { “name”: “react-app”, “version”: “0.1.0”, “private”: false, “devDependencies”: { “npm-watch”: “^0.1.8”, “react-scripts”: “0.9.5”, }, “dependencies”: { “react”: “^15.4.2”, “react-dom”: “^15.4.2” }, “scripts”: { “start”: “react-scripts … Read more
An alternative solution, as suggested here, is to use the rewire package to manipulate Create React App’s webpack config, e.g. Create a new file scripts/build.js // npm install rewire const rewire = require(‘rewire’); const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’); const defaults = rewire(‘react-scripts/scripts/build.js’); const config = defaults.__get__(‘config’); // Consolidate chunk files instead config.optimization.splitChunks = { cacheGroups: { … Read more
To allow components to contain children and render them correctly, you have to use this.props.children. This is passed to all components with children as a prop and contains the children of the component, as explained by the React documentation: Containment Some components don’t know their children ahead of time. This is especially common for components … Read more
It is a known issue. If you are using yarn, you can easily get around it using resolutions. Add the following to your package.json to allow yarn to resolve babel-loader version 8.1.0 (the version required by CRA, not Storybook): “resolutions”: { “babel-loader”: “8.1.0” }, After that, make sure to run yarn install to refresh your … Read more
Just use a / before the name, this will make it relative to the output root, which includes anything in the public folder (provided the finished hosted application is served at the root of a domain). so for the question asked above: .App-header { background-color: #222; height: 150px; padding: 20px; color: white; background-image: url(“/example.png”); } … Read more
Just update react-scripts. I solved it by uninstall and install again. In command line: uninstall: npm uninstall react-scripts –save and install again: npm i react-scripts