search

Grafikart / filemanager-element

A simple file browser distributed as a custom element
MIT License
79 stars 13 forks source link

Erreur compilation avec webpack #10

Closed moudarir closed 2 years ago

moudarir commented 2 years ago

Salut,

J'ai eu une erreur de compilation en utilisant Webpack.

ERROR in ./node_modules/filemanager-element/FileManager.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
ParserError: Syntax Error at line: 1, column 57
    at /home/vagrant/domain.com/node_modules/filemanager-element/FileManager.css:1:6481
    at Parser.error (/home/vagrant/domain.com/node_modules/postcss-values-parser/lib/parser.js:127:11)
    at Parser.operator (/home/vagrant/domain.com/node_modules/postcss-values-parser/lib/parser.js:162:20)
    at Parser.parseTokens (/home/vagrant/domain.com/node_modules/postcss-values-parser/lib/parser.js:245:14)
    at Parser.loop (/home/vagrant/domain.com/node_modules/postcss-values-parser/lib/parser.js:132:12)
    at Parser.parse (/home/vagrant/domain.com/node_modules/postcss-values-parser/lib/parser.js:51:17)
    at parse (/home/vagrant/domain.com/node_modules/postcss-custom-properties/index.cjs.js:47:30)
    at /home/vagrant/domain.com/node_modules/postcss-custom-properties/index.cjs.js:333:24
    at /home/vagrant/domain.com/node_modules/postcss/lib/container.js:72:18
    at /home/vagrant/domain.com/node_modules/postcss/lib/container.js:55:18
    at Rule.each (/home/vagrant/domain.com/node_modules/postcss/lib/container.js:41:16)
    at processResult (/home/vagrant/domain.com/node_modules/webpack/lib/NormalModule.js:753:19)
    at /home/vagrant/domain.com/node_modules/webpack/lib/NormalModule.js:855:5
    at /home/vagrant/domain.com/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /home/vagrant/domain.com/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/home/vagrant/domain.com/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/home/vagrant/domain.com/node_modules/postcss-loader/dist/index.js:96:7)
 @ ./src/dashboard/js/styles/file-manager.js 1:0-45

1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack 5.69.1 compiled with 2 errors in 49283 ms

Pas d'erreur en mode watch.

Fichier de configuration:

const path = require("path")
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const { WebpackManifestPlugin } = require("webpack-manifest-plugin")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")
const TerserWebpackPlugin = require("terser-webpack-plugin")
const MomentLocalesPlugin = require("moment-locales-webpack-plugin")

const build = process.env.NODE_ENV === "local"
const watch = process.env.NODE_ENV === "watch"
const output = {
  path: path.resolve(__dirname, "public_html/dist/dashboard"),
  publicPath: "https://statics.domain.com/dashboard/",
  filename: "js/[name].[chunkhash:8].js",
  assetModuleFilename: "img/[hash][ext][query]"
}
const rules = [
  {
    test: /\.(png|jpe?g|gif|svg)$/i,
    type: "asset",
    parser: {
      dataUrlCondition: {
        maxSize: 1024 // 1 Ko
      }
    }
  },
  {
    test: /\.(woff2?|eot|ttf|otf|svg)$/i,
    exclude: [/images/],
    type: "asset/resource",
    generator: {
      filename: "fonts/[name][ext][query]"
    }
  },
  {
    test: /\.(s[ac]|c)ss$/i, // scss, sass or css
    use: [
      {
        loader: MiniCssExtractPlugin.loader,
        options: {
          publicPath: "../"
        }
      },
      "css-loader",
      "postcss-loader",
      "sass-loader"
    ]
  },
  {
    test: /\.jsx?$/,
    exclude: /node_modules/,
    use: {
      loader: "babel-loader"
    }
  },
]
const mode = build === false ? "development" : "production"
const target = build === false ? "web" : "browserslist"
const stats = build === false ? "errors-warnings" : "normal"
const devtool = mode !== "production" ? "source-map" : false
const manifestFilename = path.resolve(__dirname, "app/manifest-dashboard.json")

const plugins = [
  new CleanWebpackPlugin({
    cleanOnceBeforeBuildPatterns: ["**/*", "!../js", "../js/auth/**"],
    cleanAfterEveryBuildPatterns: ["css/*.js"],
    dangerouslyAllowCleanPatternsOutsideProject: true,
    protectWebpackAssets: false,
    verbose: true,
    dry: false
  }),
  new MiniCssExtractPlugin({ filename: "css/[name].[chunkhash:8].css" }),
  new MomentLocalesPlugin({
    localesToKeep: ["fr"],
  }),
  new WebpackManifestPlugin({
    fileName: manifestFilename
  }),
]

const styleEntries = {
  "style": {
    import: "./src/dashboard/js/styles/style.js",
    filename: "css/[name].[chunkhash:8].js"
  },
  "style-dark": {
    import: "./src/dashboard/js/styles/style-dark.js",
    filename: "css/[name].[chunkhash:8].js"
  },
  "intl-tel-input": {
    import: "./src/dashboard/js/styles/intl-tel-input.js",
    filename: "css/[name].[chunkhash:8].js"
  },
  "file-manager": {
    import: "./src/dashboard/js/styles/file-manager.js",
    filename: "css/[name].[chunkhash:8].js"
  },
}
const authEntries = {
  "signup": {
    import: "./src/dashboard/js/auth/signup.js",
    filename: "../js/auth/[name].[chunkhash:8].js",
    dependOn: "app"
  },
  "login": {
    import: "./src/dashboard/js/auth/login.js",
    filename: "../js/auth/[name].[chunkhash:8].js",
    dependOn: "app"
  },
  "forgot-password": {
    import: "./src/dashboard/js/auth/forgot-password.js",
    filename: "../js/auth/[name].[chunkhash:8].js",
    dependOn: "app"
  },
  "forgot-password-confirm": {
    import: "./src/dashboard/js/auth/forgot-password-confirm.js",
    filename: "../js/auth/[name].[chunkhash:8].js",
    dependOn: "app"
  },
  "reset-password": {
    import: "./src/dashboard/js/auth/reset-password.js",
    filename: "../js/auth/[name].[chunkhash:8].js",
    dependOn: "app"
  },
}
const dashboardEntries = {
  "moderators": {
    import: "./src/dashboard/js/moderators/index.js",
    filename: "js/moderators/[name].[chunkhash:8].js",
    dependOn: "app"
  },
  "moderators-crud": {
    import: "./src/dashboard/js/moderators/crud.js",
    filename: "js/moderators/[name].[chunkhash:8].js",
    dependOn: "app"
  },
  "newest-brands": {
    import: "./src/dashboard/js/newest/brands/index.js",
    filename: "js/newest/brands/[name].[chunkhash:8].js",
    dependOn: "app"
  },
  "newest-brands-crud": {
    import: "./src/dashboard/js/newest/brands/crud.js",
    filename: "js/newest/brands/[name].[chunkhash:8].js",
    dependOn: "app"
  },
  "brand-sale-points": {
    import: "./src/dashboard/js/newest/brands/sale-points.js",
    filename: "js/newest/brands/[name].[chunkhash:8].js",
    dependOn: "app"
  },
  "brand-sale-point-crud": {
    import: "./src/dashboard/js/newest/brands/sale-point-crud.js",
    filename: "js/newest/brands/[name].[chunkhash:8].js",
    dependOn: "app"
  },
  "newest-cars": {
    import: "./src/dashboard/js/newest/cars/index.js",
    filename: "js/newest/cars/[name].[chunkhash:8].js",
    dependOn: "app"
  },
  "newest-cars-crud": {
    import: "./src/dashboard/js/newest/cars/crud.js",
    filename: "js/newest/cars/[name].[chunkhash:8].js",
    dependOn: "app"
  },
  "newest-cars-show": {
    import: "./src/dashboard/js/newest/cars/show.js",
    filename: "js/newest/cars/[name].[chunkhash:8].js",
    dependOn: "app"
  },
  "posts": {
    import: "./src/dashboard/js/posts/index.js",
    filename: "js/posts/[name].[chunkhash:8].js",
    dependOn: "app"
  },
  "posts-crud": {
    import: "./src/dashboard/js/posts/crud.js",
    filename: "js/posts/[name].[chunkhash:8].js",
    dependOn: "app"
  },
  "media-pictures": {
    import: "./src/dashboard/js/media/pictures/index.js",
    filename: "js/media/pictures/[name].[chunkhash:8].js",
    dependOn: "app"
  },
  "adserver-advertisers-crud": {
    import: "./src/dashboard/js/adserver/advertisers/crud.js",
    filename: "js/adserver/advertisers/[name].[chunkhash:8].js",
    dependOn: "app"
  },
  "adserver-campaigns-index": {
    import: "./src/dashboard/js/adserver/campaigns/index.js",
    filename: "js/adserver/campaigns/[name].[chunkhash:8].js",
    dependOn: "app"
  },
}

let Config = {
  mode: mode,
  target: target,
  stats: stats,
  entry: {
    app: ["./src/dashboard/js/app.js"],
    ...styleEntries,
    ...authEntries,
    ...dashboardEntries,
  },
  output: output,
  module: {
    rules: rules
  },
  plugins: plugins,
  devtool: devtool
}

if (mode === "production") {
  Config.optimization = {
    minimize: true,
    minimizer: [
      new TerserWebpackPlugin({
        terserOptions: {
          format: {
            comments: false
          }
        },
        extractComments: false
      }),
      new CssMinimizerPlugin()
    ]
  }
}

if (watch === true) {
  Config.watchOptions = {
    ignored: /node_modules/,
    poll: 1000,
  }
}

module.exports = Config
moudarir commented 2 years ago

Erreur solutionnée après la mise à jour de toutes les devDependencies vers leurs dernières versions.