ошибка при использовании dotenv-webpack с реактивным проектом

Привет, я пытаюсь использовать dotenv-webpack с моим конфигурационным файлом webpack, и я не могу понять, что делать со следующей ошибкой...

.definitions is not a valid Plugin property
- Maybe you meant to use
"plugin": [
  ["@babel/plugin-transform-runtime", {
  "definitions": {
    "process.env.REACT_APP_WEATHERAPI": "\"XXXXXXX\""
  }
}]
]

Я следую документам по использованию dotenv-webpack.

Here is my webpack.config fileconst currentTask = process.env.npm_lifecycle_event;
const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { postcss } = require("postcss-mixins");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const fse = require("fs-extra");
const webpack = require("webpack");
const dotenv = require("dotenv-webpack");

const postCSSPlugins = [
  require("postcss-import"),
  require("postcss-mixins"),
  require("postcss-simple-vars"),
  require("postcss-nested"),
  require("postcss-hexrgba"),
  require("autoprefixer")
];

class RunAfterCompile {
  apply(compiler) {
    compiler.hooks.done.tap("Copy images", function () {
      fse.copySync("./app/assets/images", "./docs/assets/images");
    });
  }
}

let cssConfig = {
  test: /\.css$/i,
  use: [
    "css-loader?url=false",
    { loader: "postcss-loader", options: { plugins: postCSSPlugins } }
  ]
};

let pages = fse
  .readdirSync("./app")
  .filter(function (file) {
    return file.endsWith(".html");
  })
  .map(function (page) {
    return new HtmlWebpackPlugin({
      filename: page,
      template: `./app/${page}`
    });
  });

let config = {
  entry: "./app/assets/scripts/App.js",
  plugins: pages,
  module: {
    rules: [
      cssConfig,
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-react", "@babel/preset-env"],
            plugins: ["@babel/plugin-transform-runtime", new dotenv()] <---- ERROR HERE!
          }
        }
      }
    ]
  }
};

if (currentTask == "dev") {
  cssConfig.use.unshift("style-loader");
  config.output = {
    filename: "bundled.js",
    path: path.resolve(__dirname, "app")
  };
  config.devServer = {
    before: function (app, server) {
      server._watch("./app/**/*.html");
    },
    contentBase: path.join(__dirname, "app"),
    hot: true,
    port: 3000,
    host: "0.0.0.0",
    historyApiFallback: { index: "/" }
  };
  config.mode = "development";
}

if (currentTask == "build") {
  cssConfig.use.unshift(MiniCssExtractPlugin.loader);
  postCSSPlugins.push(require("cssnano"));
  config.output = {
    filename: "[name].[chunkhash].js",
    chunkFilename: "[name].[chunkhash].js",
    path: path.resolve(__dirname, "docs")
  };
  config.mode = "production";
  config.optimization = {
    splitChunks: { chunks: "all" }
  };
  config.plugins.push(
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({ filename: "styles.[chunkhash].css" }),
    new RunAfterCompile()
  );
}

module.exports = config;

webpack reactjs javascript dotenv
person Nick    schedule 23.10.2020    source источник
comment
Отвечает ли это на ваш вопрос? использование dotenv с реакцией и веб-пакетом   -  person Jayce444    schedule 23.10.2020
comment
нет, это не ответило на мой вопрос, потому что у меня все еще та же ошибка:/   -  person Nick    schedule 23.10.2020

Ответы (1)


arrow_upward
1
arrow_downward

EDIT: Ваш new dotenv() помещен в неправильный массив плагинов. Документы.

Это должно быть в глобальных плагинах, а не в babel-loader. Поскольку вы уже создали массив HtmlWebpackPlugin, вам нужно будет добавить его в существующий массив

Ваш массив плагинов должен быть:


let config = {
  ...
  plugins: [
    ...pages,
    new dotenv()
  ]
  ...
};
person saulmaldonado    schedule 23.10.2020
comment
Спасибо за ответ. к сожалению, я все еще получаю ту же самую ошибку после вашего предложения. - person Nick; 23.10.2020
comment
Извините, только что понял, что у вас есть new dotenv() внутри babel-loader плагинов, тогда как он должен быть помещен в глобальный массив плагинов. Я отредактировал свой ответ. - person saulmaldonado; 23.10.2020
comment
После изменения моей конфигурации на plugins: [pages, new dotenv()] я получил Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. Спасибо за попытку помочь. - person Nick; 23.10.2020
comment
Просто чтобы убедиться, вы добавили new dotenv() в массив pages? pages — это массив, и вам нужно добавить объект dotenv в массив. Мое решение имеет plugins: [...pages, new dotenv()] - person saulmaldonado; 23.10.2020
comment
Оно работает!!! я закончил тем, что добавил config.plugins.push('new dotenv()) к своему if(currentTask == "dev"){...}, и это помогло - person Nick; 23.10.2020