ngochai9a7 opened a new issue, #23877:
URL: https://github.com/apache/superset/issues/23877
I am creating a custom plugin Hello-world. I want to add components from
PrimeReact library to HelloWorld.tsx, and it required these css
```
//theme
import "primereact/resources/themes/lara-light-indigo/theme.css";
//core
import "primereact/resources/primereact.min.css";
```
When I run `npm run dev-server` in superset-frontend I got this error
`module parse failed unexpected token (1:0) you may need an appropriate
loader to handle this file type
".primereact/resources/themes/lara-light-indigo/theme.css"`
The problem is it can run normally with css style if I set `symlinks: false`
in webpack.config.js. But when I did that, superset will not automatically
rebuild whenever changes are made in my custom plugin project and I have to
close the terminal and run `npm run dev-server` again. It took about over 5
minutes to run again instead of 15-20 seconds with `symlinks: true` and I don't
want to wait so long just to see the results of 1 or 2 lines code
#### Here my plugin .tsx
```
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
//theme
import "primereact/resources/themes/lara-light-indigo/theme.css";
//core
import "primereact/resources/primereact.min.css";
import React, { useEffect, createRef } from "react";
import { styled } from "@superset-ui/core";
import {
SupersetPluginChartHelloWorldProps,
SupersetPluginChartHelloWorldStylesProps,
} from "./types";
import { DataTable } from "primereact/datatable";
import { Column } from "primereact/column";
// The following Styles component is a <div> element, which has been styled
using Emotion
// For docs, visit https://emotion.sh/docs/styled
// Theming variables are provided for your use via a ThemeProvider
// imported from @superset-ui/core. For variables available, please visit
//
https://github.com/apache-superset/superset-ui/blob/master/packages/superset-ui-core/src/style/index.ts
const Styles = styled.div<SupersetPluginChartHelloWorldStylesProps>`
padding: ${({ theme }) => theme.gridUnit * 4}px;
height: ${({ height }) => height}px;
width: ${({ width }) => width}px;
h3 {
/* You can use your props to control CSS! */
margin-top: 0;
margin-bottom: ${({ theme }) => theme.gridUnit * 3}px;
font-size: ${({ theme, headerFontSize }) =>
theme.typography.sizes[headerFontSize]}px;
font-weight: ${({ theme, boldText }) =>
theme.typography.weights[boldText ? "bold" : "normal"]};
}
`;
/**
* ******************* WHAT YOU CAN BUILD HERE *******************
* In essence, a chart is given a few key ingredients to work with:
* * Data: provided via `props.data`
* * A DOM element
* * FormData (your controls!) provided as props by transformProps.ts
*/
export default function SupersetPluginChartHelloWorld(
props: SupersetPluginChartHelloWorldProps
) {
// height and width are the height and width of the DOM element as it
exists in the dashboard.
// There is also a `data` prop, which is, of course, your DATA 🎉
const { data, height, width } = props;
const rootElem = createRef<HTMLDivElement>();
// Often, you just want to get a hold of the DOM and go nuts.
// Here, you can do that with createRef, and the useEffect hook.
useEffect(() => {
const root = rootElem.current as HTMLElement;
console.log("Plugin element", root);
});
console.log("Plugin props", props);
return (
<Styles
ref={rootElem}
boldText={props.boldText}
headerFontSize={props.headerFontSize}
height={height}
width={width}
>
<h3>{props.headerText} 1234</h3>
<DataTable value={data} rowGroupMode="rowspan" groupRowsBy="element"
tableStyle={{ minWidth: '50rem' }}>
<Column field="element" header="Element"></Column>
<Column field="material" header="Material"></Column>
<Column field="quantity" header="Quantity"></Column>
</DataTable>
</Styles>
);
}
```
### Here is my webpack.config.ts (inside my plugin project)
```
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const config = {
entry: './src/SupersetPluginChartHelloWorld.tsx',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
"style-loader",
"css-loader",
],
include: [
path.resolve(path.join(__dirname, 'node_modules'))
]
},
{
test: /\.ts(x)?$/,
use:[
{
loader: 'babel-loader',
options: {
compact:true,s
}
},
],
exclude: /node_modules/,
},
]
},
plugins: [new HtmlWebpackPlugin()],
resolve: {
extensions: [
'.tsx',
'.ts',
'.js',
'.css'
]
},
devServer: {
historyApiFallback: true,
contentBase: './'
}
};
module.exports = config;
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
