dilanx
commented
2 years ago Is that craco config the same one you used with craco 6?
Open asurwt opened 2 years ago
dilanx
commented
2 years ago Is that craco config the same one you used with craco 6?
asurwt
commented
2 years ago Is that craco config the same one you used with craco 6?
yes the shared config is of craco 6, but i have made some required changed as per craco 7. Below is the config.
const path = require('path');
const { addBeforeLoader, loaderByName, throwUnexpectedConfigError } = require('@craco/craco');
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const throwError = (message) =>
throwUnexpectedConfigError({
packageName: 'craco',
githubRepo: 'gsoft-inc/craco',
message,
githubIssueQuery: 'webpack',
});
module.exports = {
eslint: {
enable: true,
},
style: {
css: {
loaderOptions: {
modules: { 'localIdentName': '[local]_[hash:base64:5]' }
}
}
},
webpack: {
alias: {
react: path.resolve(__dirname, '../node_modules', 'react'),
'react-dom': path.resolve(__dirname, '../node_modules', 'react-dom'),
'modernizr': path.resolve(__dirname, "./.modernizrrc.js")
},
configure: webpackConfig => {
webpackConfig.resolve.fallback = {
fs: false,
path: require.resolve("path-browserify")
};
// Adding modernizr loader Start
const modernizrLoader = {
loader: "webpack-modernizr-loader",
test: /\.modernizrrc\.js$/,
};
const { isAdded: modernizrLoaderIsAdded } = addBeforeLoader(webpackConfig, loaderByName('url-loader'), modernizrLoader);
console.log("modernizrLoaderIsAdded: ", modernizrLoaderIsAdded)
if (!modernizrLoaderIsAdded) throwError('failed to add webpack-modernizr-loader');
// Adding modernizr loader End
const scopePluginIndex = webpackConfig.resolve.plugins.findIndex(
({ constructor }) => constructor && constructor.name === 'ModuleScopePlugin'
);
const [clientSrc] = webpackConfig.resolve.plugins[scopePluginIndex].appSrcs;
const psvServices = path.resolve(clientSrc, '../..');
webpackConfig.resolve.plugins[scopePluginIndex].appSrcs.push(psvServices);
return webpackConfig;
}
}
}
rahulagarwal11
commented
1 year ago @dilanx @asurwt: did you able to figure out the solution to above issue?
We are also trying to upgrade the react-scripts from V4.0.3 => V5.0.1. and then also upgrade craco from V6.0.0 => V7.0.0.
After upgrade I see below error:
Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
- configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$".
BREAKING CHANGE since webpack 5: The devtool option is more strict.
Please strictly follow the order of the keywords in the pattern.
- configuration.optimization has an unknown property 'namedChunks'. These properties are valid:
object { checkWasmTypes?, chunkIds?, concatenateModules?, emitOnErrors?, flagIncludedChunks?, innerGraph?, mangleExports?, mangleWasmImports?, mergeDuplicateChunks?, minimize?, minimizer?, moduleIds?, noEmitOnErrors?, nodeEnv?, portableRecords?, providedExports?, realContentHash?, removeAvailableModules?, removeEmptyChunks?, runtimeChunk?, sideEffects?, splitChunks?, usedExports? }
-> Enables/Disables integrated optimizations.
Did you mean optimization.chunkIds: "named" (BREAKING CHANGE since webpack 5)?
- configuration.output has an unknown property 'jsonpFunction'. These properties are valid:
object { assetModuleFilename?, asyncChunks?, auxiliaryComment?, charset?, chunkFilename?, chunkFormat?, chunkLoadTimeout?, chunkLoading?, chunkLoadingGlobal?, clean?, compareBeforeEmit?, crossOriginLoading?, cssChunkFilename?, cssFilename?, devtoolFallbackModuleFilenameTemplate?, devtoolModuleFilenameTemplate?, devtoolNamespace?, enabledChunkLoadingTypes?, enabledLibraryTypes?, enabledWasmLoadingTypes?, environment?, filename?, globalObject?, hashDigest?, hashDigestLength?, hashFunction?, hashSalt?, hotUpdateChunkFilename?, hotUpdateGlobal?, hotUpdateMainFilename?, iife?, importFunctionName?, importMetaName?, library?, libraryExport?, libraryTarget?, module?, path?, pathinfo?, publicPath?, scriptType?, sourceMapFilename?, sourcePrefix?, strictModuleErrorHandling?, strictModuleExceptionHandling?, trustedTypes?, umdNamedDefine?, uniqueName?, wasmLoading?, webassemblyModuleFilename?, workerChunkLoading?, workerWasmLoading? }
-> Options affecting the output of the compilation. `output` options tell webpack how to write the compiled files to disk.
Did you mean output.chunkLoadingGlobal (BREAKING CHANGE since webpack 5)?Upgrading to craco v7 includes upgrading webpack from v4 to v5, and these issues (at least the one that @rahulagarwal11 sent) involve configuration that was valid in the older version but is no longer valid in the newer one. Follow the webpack migration instructions to ensure that your config is valid for webpack 5.
rahulagarwal11
commented
1 year ago @dilanx Thank you for your output, I looked into the shared link, still see the same issue, here is my craco.config
const { DefinePlugin } = require('webpack');
const configureMx = require('@soluto-private/mx-webpack-configure-mx');
module.exports = {
devServer: {
https: true,
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
},
},
webpack: {
configure: (webpackConfig, argv) => {
const config = configureMx(webpackConfig, {
enabled: true,
env: argv.env,
paths: argv.paths,
orgName: 'soluto',
projectName: 'gallery',
prefix: '',
rootDirectoryLevel: 1,
mxRequire: require,
mxApp: 'mx-app.tsx',
additionalExternals: [/^@soluto-private\/mx-.*/, 'react', 'react-dom'],
});
return config;
},
plugins: [
new DefinePlugin({
ROUTE_PREFIX: JSON.stringify(''),
}),
],
},
babel: {
plugins: ['babel-plugin-styled-components'],
},
};@rahulagarwal11 the issue might lie within the @soluto-private/mx-webpack-configure-mx. The package is private so I can't view it myself. Does that package use webpack 5? Your webpack configuration is using properties that are no longer valid, and that might be from that package.
In existing project we were trying to upgrade react-scripts from
V4.0.3 => V5.0.1. After upgrade, Craco also need upgradation, so we have upgraded Craco V6.1.2 => V7.0.0. It creating issue with webpack-modernizr-loader. webpack-dev-server also not working. Below i have mentioned errors which i am facing.CRACO config
package.json
Additional information (anything else that could be useful for us to help you solve your problem)