я к тому что, это уже не будет монокомпонент

Я это сказал глядя на структуру файла-компонента
У vue это

<script />
<style />

У react

Component
StyledComponent

<script />
<style />

Component
StyledComponent

Разница в том что в css in js это часть общего похода - все в js который за счёт общей платформы позволяет использовать все это как конструктор в любых валидных для js комбинациях очевидным способом (в идеале), по крайней мере достаточно очивидным для машины которая например будет проверять типы

Vue более человеко-ориентирован и создаёт условия для плавного перехода от верстки в разработку, используя привычные вещи и скрывая детали реализации внутри себя (взял и ползуешься), а реакт экосистема культивирует идею расширяемости и кастомизации жертвуя производительностью и немногословностью

+ в отличии от vue, где не пойми какая каша.

По вебпаку и ts-loader кто шарит?

Что за ошибка:

ERROR in ./extension.ts 16:53
Module parse failed: Unexpected token (16:53)
File was processed with these loaders:
 * ../../node_modules/ts-loader/index.js
You may need an additional loader to handle the result of these loaders.
|                 chrome.tabs.getCurrent((tab) => {
|                     console.info("%c%s", "color: #D73B02", `Create a tab for Office file with id: ${tab.id}`);
>                     state.officeOnline.fileUrl = tab?.url;
|                 });
|                 state.downloader.allowDownload = false;
 @ ./index.ts 1:0-40 2:22-31

webpack.config.js:

const path = require('path');

module.exports = {
  entry: './index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        include: __dirname,
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ],
  },
  output: {
    filename: 'extension.js',
    path: path.resolve('../../dist/prevent-download-and-view-online/extension'),
  },
};

tsconfig.json:

{
    "compilerOptions": {
        "moduleResolution": "Node",
        "removeComments": true,
        "module": "ES2020",
        "rootDir": ".",
        "outDir": "../../dist/prevent-download-and-view-online/extension",
        "target": "ES2020",
        "declaration": false,
        "incremental": true,
        "sourceMap": false
    }
}

ERROR in ./extension.ts 16:53
Module parse failed: Unexpected token (16:53)
File was processed with these loaders:
 * ../../node_modules/ts-loader/index.js
You may need an additional loader to handle the result of these loaders.
|                 chrome.tabs.getCurrent((tab) => {
|                     console.info("%c%s", "color: #D73B02", `Create a tab for Office file with id: ${tab.id}`);
>                     state.officeOnline.fileUrl = tab?.url;
|                 });
|                 state.downloader.allowDownload = false;
 @ ./index.ts 1:0-40 2:22-31

const path = require('path');

module.exports = {
  entry: './index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        include: __dirname,
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ],
  },
  output: {
    filename: 'extension.js',
    path: path.resolve('../../dist/prevent-download-and-view-online/extension'),
  },
};

{
    "compilerOptions": {
        "moduleResolution": "Node",
        "removeComments": true,
        "module": "ES2020",
        "rootDir": ".",
        "outDir": "../../dist/prevent-download-and-view-online/extension",
        "target": "ES2020",
        "declaration": false,
        "incremental": true,
        "sourceMap": false
    }
}

Проблема решена! Если в tsconfig.json поменять target на ES2019, то всё будет гуд

У меня есть очень легаси проект. готорый собирался гулпом + вебпак и я хочу выкинуть из него гулп

С JS всё относительно лекго получилось, щас проблема с CSS

Там мега микс из PostCSS и SASS

При чём они никуда не ипортятся просто гулп по всей файловой системе ходит и собирает их в один файл

В вебпак как я понял оно должно импортиться

Я сделал application.css.scss и туда засунул всё

Я так понял там PostCSS плагины надо подключать, там их вооще много, но я начал пытаться с первого

вот так не завелось

В общем пробовал по-разному но чё-то ничего не работает и я хз куда копать

Как-нибудь можно имена для классов css-модулей в css-loader поддерживать уникальными? Чтобы при совпадении имени генерировалось какие-то другое?

Сейчас, например, у меня так

const cssLoader = {
    loader: 'css-loader',
    options: {
        modules: {
            mode: 'local',
            localIdentName: '[contenthash:3]'
        }
    }
}

Я хочу быть уверен, что при трех символах я не встречу повтора в названии

Например, если взять сайт medium, то они полюбому проверяют на уникальность. Скорее даже при именовании ведут последовательный учет используемых имен

Всем привет! Очень нужна помощь, ибо сам я глупенький :(
Смотрите, хочу собирать фронт с помощью вебпака, есть конфиг: (Первые 3 скрина),
Вроде всё нормально собирает, но есть 2 проблемы:
1) Он из 2 JS файлов(Весят они вместе 10кб) бандлит 400кб JS с непонятным, и абсолютно бесполезным кодом.
2) У меня есть файл, script.js, в нем есть функции, это функции вызываются из HTML (Onlick прямо на button повешаны), а вот его, он просто игнорирует, или рерайтит, так и не понял, но функции этих просто нет. Очень нужна помощь, ибо уже 2 часа гуглю :(