getting conditionNames required warning, but my config has conditionNames property in webpack config #226
Comments
|
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 |
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
);
}; |
|
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. |
|
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. |
|
@elirov Your final config seems to be lacking For me it was definitively the missing 🤞 |
|
@elirov Sorry for the false information above! |
|
Returning multiple configurations won't work either. I would need this for an Electron Build (main and renderer configs.) At least, I would expect |
|
All working flawlessly in 3.1.7: Thank! 👍 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
$ 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:
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?
The text was updated successfully, but these errors were encountered: