getting conditionNames required warning, but my config has conditionNames property in webpack config

Question

getting conditionNames required warning, but my config has conditionNames property in webpack config

elirov opened this issue 3 years ago · 8 comments

$ yarn watch
yarn run v1.23.0-20220130.1630

WARNING: You should add "svelte" to the "resolve.conditionNames" array in your webpack config. See https://github.com/sveltejs/svelte-loader#resolveconditionnames for more information

webpack config file:

  config.resolve = {
    fallback: { assert: false },
    extensions: ['.cjs', '.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.css', '.scss', '.svelte'],
    modules: ['src', 'lib', 'node_modules', 'tmpls'],
    alias: {
      vendor: __dirname + '/lib/vendor',
      jquery: __dirname + '/lib/vendor-adapters/jquery-global-adapter',
      jqueryNonGlobal: __dirname + '/node_modules/jquery',
      moment: __dirname + '/lib/vendor-adapters/moment-global-adapter',
      momentNonGlobal: __dirname + '/node_modules/moment',
      xdoc: __dirname + '/src/xdoc',
      client: __dirname + '/src/client',
      node_modules: 'node_modules',
      test: __dirname + '/src/test',
      svelte: __dirname + '/node_modules/svelte',
      src: __dirname + '/src',
      tmpls: __dirname + '/tmpls',
    },
    conditionNames: ['svelte'],
  };

Any places I should check? Is the warning looking at the value of the property? Or is it trying to parse the config file itself?

Answer 1 · 2023-02-17T16:31:29.000Z

Could you post the complete config file (including where/how the export of it happens; you can redact any sensitive strings)? Check happens here and should find your settings, so that's strange

Answer 2 · 2023-02-18T21:31:27.000Z

const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const fs = require('fs');
const path = require('path');
const { merge } = require('webpack-merge');
const crypto = require('crypto');
const uuidv4 = require('uuid/v4');
const FORM_KEY = 'f0';
const XDOC_CONTAINER_ID = 'XDocContainer-' + FORM_KEY;
const argv = require('yargs')(process.argv.slice(2)).argv;
const { processNestedHtmlFactory, addTemplateAliases } = require('./webpack-utils');
const buildStaticFields = require('./build-utils/xdoc-static-field-processor');
const buildDynamicFields = require('./build-utils/xdoc-static-to-dynamic-field-converter');
const { pipe } = require('lodash/fp');
const sveltePreprocess = require('svelte-preprocess');

const ROOT = path.resolve(__dirname);
const rootPath = path.join.bind(path, ROOT);

const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
const smp = new SpeedMeasurePlugin();

const getTmplConfig = async (env, tmplSettings) => {
  const tmplName = env.tmpl;
  let tmplDefinedSettings;
  try {
    //tmplDefinedSettings = require(rootPath(`/tmpls/${tmplName}/xdoc-platform-settings.mjs`)).default;
    tmplDefinedSettings = await import(rootPath(`/tmpls/${tmplName}/xdoc-platform-settings.mjs`));
  } catch (err) {
    console.log(`${tmplName} needs to provide tmpls/${tmplName}/xdoc-platform-settings.mjs`, err);
    throw err;
  }
  let fieldMapPath;
  if (fs.existsSync(`${__dirname}/tmpls/${tmplName}/fieldmap/fieldmap.js`)) {
    fieldMapPath = `tmpls/${tmplName}/fieldmap/fieldmap.js`;
  } else {
    fieldMapPath = `tmpls/${tmplName}/fieldMap.json`;
  }

  let fieldConverter;
  if (tmplDefinedSettings.build?.convertFieldsToDynamic) {
    console.log(`converting tmpls/${tmplName}/fieldMap.json static fields to dynamic fields`);
    fieldConverter = buildDynamicFields;
  } else {
    console.log(`NOT converting static fields defined in tmpls/${tmplName}/fieldMap.json`);
    fieldConverter = buildStaticFields;
  }
  const config = {
    infrastructureLogging: {
      level: 'warn',
    },
    entry: {},
    target: 'web',
    module: {
      rules: [
        {
          test: /\.html$/,
          use: [
            {
              loader: 'html-loader',
              options: {
                esModule: false,
                preprocessor: (content, loaderContext) => {
                  content = content.replace(/__IMPORT_TEMPLATE_PATH__/g, rootPath(`/tmpls/${tmplName}`));
                  const combineHtmlPreprocessor = processNestedHtmlFactory(rootPath, rootPath(`/tmpls/${tmplName}`));
                  const combined = combineHtmlPreprocessor(content, loaderContext);
                  return fieldConverter(combined, {
                    context: loaderContext,
                    fieldMapPath: rootPath(fieldMapPath),
                    formKey: FORM_KEY,
                  });
                },
              },
            },
          ],
        },
      ],
    },
    plugins: [
      new webpack.NormalModuleReplacementPlugin(/__IMPORT_TEMPLATE_PATH__/, (res) => {
        res.request = res.request.replace(/__IMPORT_TEMPLATE_PATH__/g, `${__dirname}/tmpls/${tmplName}`);
      }),
      new webpack.NormalModuleReplacementPlugin(/__IMPORT_FIELDMAP_PATH__/, (res) => {
        res.request = res.request.replace(/__IMPORT_FIELDMAP_PATH__/g, fieldMapPath);
      }),
      new webpack.NormalModuleReplacementPlugin(/__IMPORT_TEMPLATE_INIT_SCRIPT__/, (res) => {
        res.request = res.request.replace(
          /__IMPORT_TEMPLATE_INIT_SCRIPT__/g,
          `${__dirname}/${tmplSettings.initScript}`
        );
      }),
      new webpack.NormalModuleReplacementPlugin(/__FORM_KEY__/, (res) => {
        res.request = res.request.replace(/__FORM_KEY__/g, FORM_KEY);
      }),
      new HtmlWebpackPlugin({
        inject: true,
        chunks: [tmplName],
        template: `src/client/dev/index.ejs`,
        filename: `${tmplName}.html`,
      }),
    ],
  };
  config.entry[tmplName] = `${__dirname}/src/client/dev/main.js`;
  return config;
};

const getMainConfig = (env, tmplSettings) => {
  var config = {};
  config.devtool = 'eval-cheap-module-source-map';
  config.mode = 'development';
  config.optimization = {
    usedExports: true,
  };
  config.resolve = {
    fallback: { assert: false },
    extensions: ['.cjs', '.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.css', '.scss', '.svelte'],
    modules: ['src', 'lib', 'node_modules', 'tmpls'],
    alias: {
      vendor: __dirname + '/lib/vendor',
      jquery: __dirname + '/lib/vendor-adapters/jquery-global-adapter',
      jqueryNonGlobal: __dirname + '/node_modules/jquery',
      moment: __dirname + '/lib/vendor-adapters/moment-global-adapter',
      momentNonGlobal: __dirname + '/node_modules/moment',
      xdoc: __dirname + '/src/xdoc',
      client: __dirname + '/src/client',
      node_modules: 'node_modules',
      test: __dirname + '/src/test',
      svelte: __dirname + '/node_modules/svelte',
      src: __dirname + '/src',
      tmpls: __dirname + '/tmpls',
    },
  };
  pipe(addTemplateAliases)(config.resolve.alias);
  // console.log('aliases = ', config.resolve.alias);
  config.resolveLoader = {
    modules: ['node_modules', path.resolve(__dirname, 'build-utils', 'loaders')],
  };
  config.output = {
    path: __dirname + '/dist/dev',
    filename: '[name].js',
  };
  config.module = {
    rules: [
      {
        test: /\.(svelte)$/,
        use: {
          loader: 'svelte-loader',
          options: {
            compilerOptions: {
              dev: true,
            },
            preprocess: sveltePreprocess({}),
            // ignore a11y errors
            onwarn: (warning, handler) => {
              if (warning.code.toLowerCase().startsWith('a11y-')) {
                return;
              }
              handler(warning);
            },
          },
        },
      },
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'esbuild-loader',
            options: {
              loader: 'ts',
              target: 'es2020',
              //onlyCompileBundledFiles: true,
              //transpileOnly: true,
            },
          },
        ],
      },
      {
        test: /\.c?m?jsx?$/,
        resolve: {
          fullySpecified: false,
        },
        use: { loader: 'esbuild-loader' },
        exclude: {
          and: [/node_modules/],
        },
      },
      {
        test: require.resolve('jquery'),
        use: [
          {
            loader: 'expose-loader',
            options: {
              exposes: ['jQuery', '$'],
            },
          },
        ],
      },
      {
        test: /\.dot$/,
        use: [
          {
            loader: 'raw-loader',
          },
        ],
      },
      {
        test: /\.scss$/,
        include: path.resolve(__dirname, 'src/client/dev'),
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: { url: false, sourceMap: true },
          },
          {
            loader: 'sass-loader',
            options: {
              additionalData: `$templateId: '${tmplSettings.templateId}';`,
            },
          },
          {
            loader: 'xdoc-sass-loader',
            options: {
              tmplPath: `${__dirname}/tmpls/${env.tmpl}`,
            },
          },
        ],
      },
      {
        test: /\.scss$/,
        exclude: path.resolve(__dirname, 'src/client/dev'),
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: { url: false, sourceMap: true },
          },
          {
            loader: 'sass-loader',
            options: {
              additionalData: `$templateId: '${tmplSettings.templateId}';`,
            },
          },
        ],
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: { url: false, sourceMap: true },
          },
          {
            loader: 'less-loader',
            options: { sourceMap: true },
          },
        ],
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: { sourceMap: true },
          },
        ],
      },
      {
        test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: 'url-loader?limit=10000',
      },
      {
        test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
        use: 'file-loader',
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        use: ['file-loader?name=images/[name].[ext]'],
      },
    ],
  };

  // optionally disables pdf printing if narrative styling is not used within the passed in template
  if (!fs.existsSync(`./tmpls/${env.tmpl}/narrative.scss`)) {
    config.module.rules.push({
      test: /pdf-print.js/,
      loader: 'null-loader',
    });
    if (env.tmpl && process.env.BABEL_ENV !== 'test') {
      console.log(`${env.tmpl} does not use narrative.scss. dev tool PDF printing disabled.`);
    }
  }

  config.plugins = [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: __dirname + '/server',
          to: __dirname + '/dist/dev/server',
        },
        {
          from: __dirname + '/node_modules/material-design-icons-iconfont/dist/fonts',
          to: __dirname + '/dist/dev/server/global-resources/fonts',
        },
        {
          from: __dirname + '/node_modules/tinymce',
          to: __dirname + '/dist/dev/servlet/gwt/assets/tinymce',
        },
      ],
    }),
    new webpack.ProgressPlugin(),
    new webpack.ProvidePlugin({
      autosize: 'autosize',
      _: 'lodash',
      doT: 'dot',
    }),
    new webpack.DefinePlugin({
      __FORM_KEY: JSON.stringify(FORM_KEY),
      __XDOC_CONTAINER_ID: JSON.stringify(XDOC_CONTAINER_ID),
      __TEMPLATE_ID: JSON.stringify(tmplSettings.templateId),
      __TEMPLATE_HEADER_ID: JSON.stringify(tmplSettings.templateHeaderId),
      __TEMPLATE_BODY_ID: JSON.stringify(tmplSettings.templateBodyId),
      __TEMPLATE_RDE_NAME__: JSON.stringify(env.tmpl),
      __APP_ENV: "'DEV'",
      __API_BASE_URL: "'" + (argv.apiUrl ?? '/servlet') + "'",
    }),
  ];
  return config;
};

const buildTmplSettings = (env) => {
  const settings = {
    templateId: 'NA',
    templateHeaderId: undefined,
    templateBodyId: undefined,
    initScript: `tmpls/${env.tmpl}/init.js`,
  };

  // yarn test
  // yarn watch supernote
  // yarn watch without a template name - error

  if (!env.ideAnalyzer) {
    const hash = crypto.createHash('sha1');
    hash.update(fs.readFileSync(settings.initScript) + fs.readFileSync(`tmpls/${env.tmpl}/template.html`));
    settings.templateId = hash.digest('hex');
    settings.templateHeaderId = uuidv4().replace(/-/g, '');
    settings.templateBodyId = uuidv4().replace(/-/g, '');
  }

  return settings;
};

const knownEnvVars = ['WEBPACK_BUNDLE', 'WEBPACK_BUILD', 'WEBPACK_WATCH', 't', 'tmpl', 'template', '--template'];

function findTemplateName(env) {
  const envKeys = Object.keys(env);
  const unknownArguments = envKeys.filter((v) => !knownEnvVars.includes(v));
  if (unknownArguments.length === 1) {
    // if only one unknown arg, then it's the template name
    return unknownArguments[0];
  }
  return undefined;
}

module.exports = async (env) => {
  if (process.env.BABEL_ENV !== 'test') {
    env.tmpl = env.tmpl ?? env.template ?? env.t ?? findTemplateName(env);
  }
  if (!env.tmpl) {
    throw Error(`No template name given. Args given: ${Object.keys(env)}. use yarn watch TEMPLATE`);
  }
  if (env.tmpl === 'development') {
    env.ideAnalyzer = true;
  }
  const tmplSettings = buildTmplSettings(env);
  const webpackConfig = await getTmplConfig(env, tmplSettings);
  return merge(
    getMainConfig(env, tmplSettings),
    process.env.WATCH_STATS === 'on' ? smp.wrap(webpackConfig) : webpackConfig
  );
};

Answer 3 · 2023-02-18T21:32:46.000Z

I guess the interesting part of this config is that we're returning an async function instead of a complete object. But that's because we need to do some async actions before we have our complete config. As far as I know this type of setup is supported by webpack.

Answer 4 · 2023-02-18T21:40:11.000Z

Also, I see that we're depending on env, and it looks like the only way for us to get the "env" parameter is to have module.exports be assigned to a function as opposed to an object.
see: https://webpack.js.org/guides/environment-variables/

Answer 5 · 2023-02-27T18:27:21.000Z

@elirov Your final config seems to be lacking conditionNames: ['svelte']. I was struggling with the same issue. But neither module.exports = env => {...} nor module.exports = env => [...] seem to be a problem. I verified this by playing with https://github.com/sveltejs/template-webpack template.

For me it was definitively the missing conditionNames: ['svelte']

🤞

Answer 6 · 2023-02-27T18:38:20.000Z

@elirov Sorry for the false information above! (env) => ... IS the problem. The template had an older version of svelte-loader. 3.1.5 barks if config returns a function. Maybe you can get rid of env by using "build": "cross-env NODE_ENV=production webpack" and const mode = process.env.NODE_ENV || 'development' as demonstrated in the template.

Answer 7 · 2023-02-27T18:42:20.000Z

Returning multiple configurations won't work either. I would need this for an Electron Build (main and renderer configs.)

At least, I would expect module.exports = [config] from working without warnings.

Answer 8 · 2023-02-27T19:40:51.000Z

@dummdidumm

All working flawlessly in 3.1.7:
mode.export = config
mode.export = [config]
mode.export = env => config
mode.export = env => [config]

Thank! 👍