I'm trying to use devextreme datagrid in my spfx application and I'm not able to load the webpack handler. Please point me in the right direction. I've tried different variations on how to include the handlers in module.export by following guidance from previous stack overflow questions but none of them helped.
Below is my gulpfile.js file:
'use strict';
const build = require('@microsoft/sp-build-web');
//const path = require('path');
module.exports = {
module: {
rules:[
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(woff|woff2|ttf|eot)$/,
use: 'file-loader?name=fonts/[name].[ext]!static'
}
]
}
}
build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
var getTasks = build.rig.getTasks;
build.rig.getTasks = function () {
var result = getTasks.call(build.rig);
result.set('serve', result.get('serve-deprecated'));
return result;
};
build.initialize(require('gulp'));
build.tslintCmd.enabled = false;
I've installed css-loader, style-loader, url-loader and file-loader. Below is my package.json
{
"name": "search-based-list-view-webpart",
"version": "0.0.2",
"private": true,
"main": "lib/index.js",
"scripts": {
"build": "gulp bundle",
"clean": "gulp clean",
"test": "gulp test"
},
"dependencies": {
"@devexpress/dx-react-core": "^3.0.4",
"@devexpress/dx-react-grid": "^3.0.4",
"@devexpress/dx-react-grid-material-ui": "^3.0.4",
"@emotion/react": "^11.9.3",
"@emotion/styled": "^11.9.3",
"@microsoft/rush-stack-compiler-4.2": "^0.1.2",
"@microsoft/sp-core-library": "1.14.0",
"@microsoft/sp-lodash-subset": "1.14.0",
"@microsoft/sp-office-ui-fabric-core": "1.14.0",
"@microsoft/sp-property-pane": "1.14.0",
"@microsoft/sp-webpart-base": "1.14.0",
"@mui/material": "^5.9.0",
"@pnp/graph": "^3.4.1",
"@pnp/sp": "^3.4.1",
"@pnp/spfx-controls-react": "3.8.1",
"devextreme": "22.1.3",
"devextreme-react": "22.1.3",
"office-ui-fabric-react": "7.174.1",
"react": "16.13.1",
"react-dom": "16.13.1"
},
"devDependencies": {
"@microsoft/rush-stack-compiler-3.9": "0.4.47",
"@microsoft/sp-build-web": "1.14.0",
"@microsoft/sp-module-interfaces": "1.14.0",
"@microsoft/sp-tslint-rules": "1.14.0",
"@types/react": "16.9.51",
"@types/react-dom": "16.9.8",
"@types/webpack-env": "1.13.1",
"ajv": "~5.2.2",
"css-loader": "^6.7.1",
"file-loader": "^6.2.0",
"gulp": "~4.0.2",
"style-loader": "^3.3.1",
"url-loader": "^4.1.1"
}
}
In the .tsx file, I'm trying to import the css file as shown below:
import 'devextreme/dist/css/dx.light.css';
No matter what I try, I get the following error when I try to do gulp serve
Error - [webpack] 'dist':
./node_modules/devextreme/dist/css/icons/dxicons.woff2 1:4
Module parse failed: Unexpected character ' ' (1:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
@ ./node_modules/devextreme/dist/css/dx.light.css (./node_modules/@microsoft/spfx-heft-plugins/node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??postcss!./node_modules/devextreme/dist/css/dx.light.css) 4:38-70
@ ./node_modules/devextreme/dist/css/dx.light.css
@ ./lib/webparts/searchBasedListViewWebpart/components/SearchBasedListViewWebpart.js
@ ./lib/webparts/searchBasedListViewWebpart/SearchBasedListViewWebpartWebPart.js
CodePudding user response：
I had the same issue.
Just extend your gulpfile.js with this:
...
// Font loader configuration for webfonts
const fontLoaderConfig = {
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d \.\d \.\d )?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}]
};
// Merge custom loader to web pack configuration
build.configureWebpack.mergeConfig({
additionalConfiguration: (generatedConfiguration) => {
generatedConfiguration.module.rules.push(fontLoaderConfig);
return generatedConfiguration;
}
});
...
Link to solution: