и фраза 'для тех кто в танке' теперь звучит: 'для тех кто на санках'😂

Кто-нибудь сталкивался с проблемоой: Webpack 4 + React функциональные компоненты созданные стрелочной функцией не работают, пишет синтаксическая ошибка, а через function работает, при этом .jsx тоже не понимает

package.json в студию

{ "name": "app-from-t2", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "jest", "start": "webpack-dev-server --mode development --open --hot", "build": "webpack --mode production" }, "author": "", "license": "ISC", "devDependencies": { "@babel/core": "^7.6.4", "@babel/preset-env": "^7.6.3", "@babel/preset-react": "^7.6.3", "babel-jest": "^24.9.0", "babel-loader": "^8.0.6", "css-loader": "^3.2.0", "html-webpack-plugin": "^3.2.0", "identity-obj-proxy": "^3.0.0", "jest": "^24.9.0", "jest-cli": "^24.9.0", "node-sass": "^4.12.0", "regenerator-runtime": "^0.13.3", "sass-loader": "^8.0.0", "style-loader": "^1.0.0", "webpack": "^4.41.2", "webpack-cli": "^3.3.9", "webpack-dev-server": "^3.8.2" }, "dependencies": { "axios": "^0.19.0", "file-loader": "^4.2.0", "prop-types": "^15.7.2", "react": "^16.10.2", "react-dom": "^16.11.0", "react-redux": "^7.1.1", "redux": "^4.0.4", "redux-form": "^8.2.6", "redux-thunk": "^2.3.0" }, "jest": { "moduleNameMapper": { "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/mocks/fileMock.js", "\\.(css|scss)$": "identity-obj-proxy" } } }

import React from 'react’?

Да, import React from 'react';

Кто-нибудь сталкивался с проблемоой: Webpack 4 + React функциональные компоненты созданные стрелочной функцией не работают, пишет синтаксическая ошибка, а через function работает, при этом .jsx тоже не понимает

babel-preset-react

возможно https://stackoverflow.com/questions/33460420/babel-loader-jsx-syntaxerror-unexpected-token

скрин ошибки б

так же конфиг проверь

``` .... resolve: { extensions: ['', '.js', '.jsx'], } }; ```

да чтоб тебя...

ну ты понял

ёёё

ну и webpack.config.js тоже скинь

const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry: "./src/index.js", output: { path: path.join(__dirname, "/dist"), filename: "index-bundle.js" }, module: { rules: [ { test: /\.js?$/, exclude: /node_modules/, use: 'babel-loader' }, { test: /\.json$/, exclude: /node_modules/, use: 'file-loader' }, { test: /\.s[ac]ss$/i, use: ['style-loader', 'css-loader', 'sass-loader'] }, { test: /\.(jpe?g|png|gif|svg)$/i, use: "file-loader?name=images/[name].[ext]" }, ], }, plugins: [ new HtmlWebpackPlugin({ template: "./src/index.html" }) ] };

babel-preset-react не помогло

resolve: { extensions: ['.js', '.jsx'], }

https://stackoverflow.com/questions/38529554/cannot-es6-import-jsx-modules-in-webpack

в .babelrc { "presets": ["@babel/preset-env", "@babel/preset-react"]}

да, резолв добав

Стартовать с resolve перестало

для стрелочных если не ошибаюсь нужен "babel-plugin-transform-es2015-arrow-functions" пример babel.rc: { "plugins": [ "transform-es2015-arrow-functions", "@babel/plugin-proposal-class-properties", "@babel/plugin-syntax-dynamic-import" ], "presets": ["@babel/preset-env"] } для jsx в вебпак конфиге достаточно: module: { rules: [ { test: /\.jsx?/, include: APP_DIR, loader: 'babel-loader', }, ], },

а ты куда резолв то добавил?

webpack.config.js

Из-за '' регается. Когда убераю стартует, но старая ошибка остается

'' убери первый

ну вот эту пустую строку удали да

Возвращается предыдущая ошибка неизвестного токена

как выше module: { rules: [ { test: /\.jsx?/, include: APP_DIR, loader: 'babel-loader', }, ], },

ну и попробуй этот мб установить плаген transform-es2015-arrow-functions

APP_DIR is not defined

это константа можешь вручную прописать: var path = require('path'); var APP_DIR = path.resolve(__dirname, 'src');

модуль path нужно добавить если не найдет (вообще мне кажется проще с cra работать до поры)

Заработало

rules: [ { test: /\.jsx?/, include: APP_DIR, loader: 'babel-loader', },

отлично)

👍

резолв убрал продолжело работать

Т.е по сути получилась проблема в var APP_DIR = path.resolve(__dirname, 'src'); и include: APP_DIR,

Спасибо огромное за помощь

я вообще не помню что это за resolve не сталкивался с таким параметром)

не за что

Да в мануалах куча лишнего. Я собирал конфиг проверяя что на что влияет и оставляю его минимальным

Просто вебпак 4 из их документации обходится без многих параметров которые раньше нужны были

https://webpack.js.org/configuration/resolve/

а ну тогда понятно, да нужно смотреть на версии, может это из прежних

а все вспомнил

И почему то import Header from "./header/Header"; не работает, начинает рабодать когда в путь .jsx добавляешь

встречал, это типа алиасы делать чтобы в модулях не писать import * from '../../.. и т.п.'

Так и должно быть?

в целом вещь удобная

да, типа так

resolve: { extensions: ['.ts', '.tsx', '.js', '.jsx'], alias: { 'ui': path.resolve(__dirname, 'src/ui'), 'entities': path.resolve(__dirname, 'src/entities'), } },

обычно обрубать должно js и jsx насколько я помню, и еще имена файлов не зависимо от того классы или нет лучше писать прописными полностью

некоторые люди предпочитают не использовать расширение jsx оно и с js будет работать если вебпак правильно настроен

тс требует) tsx и ts разные вещи

но возможно есть настройки

если конечный файл index.js его вообще можно пропустить например вместо 'header/index.js' писать просто 'header'

+

ts классный язык мне шарпы напоминает (автор тот же) тут толково расписан, если кому интересно

ts классный язык мне шарпы напоминает (автор тот же) тут толково расписан, если кому интересно

ts язык?

интересно

Typescript - это не "еще один язык программирования". В двух словах - это просто надмножество Javascript (ES6) с опциональной статической типизацией.

но забавно как многие считают его языком

отличается он заметно

все же, typescript это не надмножество

все же это язык

язык программирования

https://www.typescriptlang.org/docs/home.html

кому же верить оф доке или википедии

вот вопрос

Поскольку TypeScript является подмножеством JavaScript, он не имеет шаблона по умолчанию - их было бы слишком много.

если перевести первое предложение

я бы не назвал его подмножеством, в нем совершенно иные концепции заложены в отличие от js а то что он в него компилируется ну так это просто его особенность, я думаю его можно было бы при желании и в питон компилировать

точнее транспилировать (чтобы не нарушать терминологию)