webpack

.env и .env.local Как задавать, переопределять и использовать Переменные окружения в коде React-приложения create-react-app

Если конфиг вебпака не извлечен (стандартное состояние create-react-app)

Для React 17 (и, скорее всего всех более новых версий) значения из файла .env (создаем его в корне проета) подтягиваются автоматически, далее все переменные с обязательным префиксом REACT_APP_ можно получить в коде через обращение к process.env.REACT_APP_ИмяПеременной, например, если задали в .env как:

REACT_APP_AUTH_HOST = 'test.loc'

то в коде приложения получаем получаем как:

[webpack-cli] ReferenceError: require is not defined Ошибка

[webpack-cli] Failed to load '.../webpack.config.js' config
[webpack-cli] ReferenceError: require is not defined

Решение

Решил удалением из из package.json строки:

  "type": "module"

(т.е. вообще не указываем теперь type). Можно разобраться и указать что-то более конкретное, но и без указания работает.

Cannot find module '...' or its corresponding type declarations React Typescript Ошибка для использования псевдонима пути alias

Cannot find module '...' or its corresponding type declarations

Возникает для строки:

import SortSign from '@app-universal/SortSign';

Задача

Рассмотрим решение для следующей ситуации, компонент без псевдонимов имопртируется так (в какой-то из родительских компонентов):

import SortSign from '../../../universal/SortSign';

а требуется его импортировать так:

import SortSign from '@app-universal/SortSign';

или так:

react webpack The resource from ... was blocked due to MIME type (“text/html”) runtime

The resource from “http://localhost:8080...” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

Возможная причина

Убедитесь, что на порту 8080 не запущена какая-то другая система (например jenkins, просто откройте ссылку на runtime.js в новой вкладке), которая естественно не готова отдавать вам эти js-файлы.
Остановите эту систему и ещё раз запустите dev-server.

webpack DefinePlugin Использование env переменных из файла в javascript. Пример конфигурации

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

Базования идея (требуется установить npm-пакет dotenv):

jest import export Включить поддержку импорта и экспорта (babel в package.json)

В .babelrc или в секции package json добавляем конфигурацию:

{
  "env": {
    "test": {
      "plugins": ["@babel/plugin-transform-modules-commonjs"]
    }
  }
}

И устанавливаем этот плагин:

npm install --save-dev @babel/plugin-transform-modules-commonjs

После этого код вроде:


import jswl from '../src/jswl.js';

test('"123" not empty ', () => {
  expect(jswl.isEmpty('123')).toBe(false);
});

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

webpack SVG в CSS url файла: ModuleNotFoundError: Module not found: Error: Can't resolve '...' Ошибка подключения

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve '...'

Чтобы использовать svg в css файле, просто укажите правильный относительный путь, например:

.login-page .bg_center_dot {
    position: absolute;
    top: 26.6927%;
    left: 72.2689%;
    width: 3.3613%;
    height: 50%;
    background: url(../images/bg-center-dot.svg) no-repeat 50% 0;
    background-size: 100% auto
}

webpack encore Настройка пседонима пути для файлов javascript

В Symfony 4.3 можно использовать вызов (webpack.config.js):

Encore
    .addAliases({ // псевдонимы путей для более удобной загрузки 
// вне зависимости от уровня вложенности файл в приложении
        '@universal': path.resolve(__dirname, 'assets/js/react/components/universal'),
      },
    );

После чего вместо путей типа:

import FormSection from '../../../universal/form/FormSection'

использовать:

webpack Как узнать версию

Перейдите в папку проекта и выполните:

npm list webpack

react Warning: Invalid DOM property class Как разрешить обычные html атрибуты

Warning: Invalid DOM property class

Известно что вместо напр. class в React надо писать className,
подобные проблемы можно убрать используя babel-plugin-react-html-attrs

Стандартная установка идет так:

Pages

Subscribe to RSS - webpack