You need to define what your props and state will look like using an interface and TypeScript’s generic implementation of React.Component import React, {Component} from ‘react’; import “./Recipe.css”; interface IRecipeProps { ingredients?: string[]; title?: string; img?: string; instructions?: string; } interface IRecipeState { } class Recipe extends Component<IRecipeProps, IRecipeState> { render() { const ingredients = … Read more
Like (almost) any tool ‘/x’ means ‘x’ in the root of your filesystem. Babel doesn’t actually look at the paths, it just compiles import {myFunc} from ‘/my-module’; into var _myModule = require(‘/my-module’); And node actually looks up the module. If you really want to import relative to the root of the project, you could use … Read more
Delete the package-lock.json file and the node_modules directory in your project and then run npm install on your terminal.
Babel 7 does not need ts-loader. As of Babel 7 the ts-loader is unnecessary, because Babel 7 understands TypeScript. Complete details of a TypeScript + Babel7 + Webpack setup are here. An overview of the set up without ts-loader. Install Babel’s TypeScript support. Only @babel/preset-typescript is mandatory; the other three add additional features that TypeScript … Read more
Add the following to your nuxt.config.js file under the build section. nuxt.config.js build: { babel:{ plugins: [ [‘@babel/plugin-proposal-private-methods’, { loose: true }] ] } }
That is not actually a babel issue, you are just trying to run CommonJS code (transpiled from ES6 export) in the browser without preparation. CommonJS doesn’t run on the browser, you need to use a tool to package it for the browser, such as Webpack or Browserify. Just by coincidence this week I created a … Read more
Yes. You can target TypeScript compiler to ES6. For example add this to your command line args: –target es6
here is the final setting that solved problem for me. .babelrc { “presets”: [ “@babel/preset-env”, “@babel/preset-react” ], “plugins”: [ “@babel/plugin-proposal-object-rest-spread” ] } For a better understanding, here is my package.json’s devDependencies: “devDependencies”: { “@babel/core”: “^7.1.6”, “@babel/plugin-proposal-object-rest-spread”: “^7.0.0”, “@babel/plugin-transform-object-assign”: “^7.0.0”, “@babel/plugin-transform-react-jsx”: “^7.1.6”, “@babel/preset-env”: “^7.1.6”, “@babel/preset-react”: “^7.0.0”, “babel-loader”: “8.0.4”, “prop-types”: “15.6.2”, “react”: “^16.6.3”, “react-dom”: “^16.6.3”, “style-loader”: “^0.23.1”, … Read more
If you want to compile ES6 to ES5 you need to install Babel ES2015 preset. npm install babel-preset-es2015 Then you need to enable this preset. One way to enable this ES6 to ES5 compilation is using babel-loader query string: module: { loaders: [ { test: /\.js$/, loader: ‘babel-loader?presets[]=es2015’ } ] } or query option: module: … Read more
The definitions of “transpiler” and “compiler” are blurry. Both of them do translate a program from one language to another language while keeping the behaviour. We usually name it a “compiler” when it produces an executable binary. However, binary is just another language, which can be interpreted by a CPU. Every program is “executable” on … Read more