(regl) Error compiling fragment shader

[FrancoisRMR]

Hello everyone,
I'have a problem on my angular 5 project.
I try to use this chart : Polar Chart, but i have an error.

Plotly.js version : 1.35.2
Errors :

file number 0: webpack-internal:///../../../../plotly.js/node_modules/regl-scatter2d/scatter.js:188:21
1| ./marker-frag.glsl | ^^^ | syntax error

Error: (regl) Error compiling fragment shader, webpack-internal:///../../../../plotly.js/node_modules/regl-scatter2d/scatter.js:188:21
at Function.raise (regl.js:45)
at Function.checkShaderError [as shaderError] (regl.js:325)
at Object.getShader [as shader] (regl.js:4937)
at eval (regl.js:6201)
at Function.checkOptional [as optional] (regl.js:418)
at parseShader (regl.js:6200)
at parseProgram (regl.js:6226)
at parseArguments (regl.js:7324)
at Object.compileCommand [as compile] (regl.js:8657)
at compileProcedure (regl.js:9250)

---

file number 0: webpack-internal:///../../../../plotly.js/node_modules/regl-scatter2d/scatter.js:200:20
1| ./circle-frag.glsl | ^^^ | syntax error

Error: (regl) Error compiling fragment shader, webpack-internal:///../../../../plotly.js/node_modules/regl-scatter2d/scatter.js:200:20
at Function.raise (regl.js:45)
at Function.checkShaderError [as shaderError] (regl.js:325)
at Object.getShader [as shader] (regl.js:4937)
at eval (regl.js:6201)
at Function.checkOptional [as optional] (regl.js:418)
at parseShader (regl.js:6200)
at parseProgram (regl.js:6226)
at parseArguments (regl.js:7324)
at Object.compileCommand [as compile] (regl.js:8657)
at compileProcedure (regl.js:9250)

I use the framwork correctly with good data.
I checked this issue : #2258 but i'm not sure if my problem is link to this.

Thank's you !

[etpinard]

How are you building your bundle?

See #2502 for a similar report.

[FrancoisRMR]

I installed the latest version of plotly from npm website.
i import plotly like this : import * as Plotly from 'plotly.js';

Then i init my chart exactly like this : https://codepen.io/plotly/pen/wypMvM

i just replace "plot" by "newPlot" in the last line : Plotly.plot('myDiv', data, layout);
by Plotly.newPlot(this.chart1.nativeElement, data, layout);

I have this result :

[etpinard]

I don't think your problem is caused by your JS script. It is caused by how you're building plotly.js (with webpack I presume).

[FrancoisRMR]

Yeah you right, i found my problem:
I did not import this line in my tsconfig.json

"compilerOptions": {
    "paths": {
        "plotly.js": [
            "../node_modules/plotly.js/lib/core.js"
        ]
    }
}

Related to this issue : #2260

I have no errors right now but i can't see bubbles like the example on the website :

[etpinard]

@vador31 you make it very hard to help you.

Can you paste the full webpack config you're using? While at it, can you paste the JS code you're using as well? Looks like the screenshot from #2560 (comment) uses scatterpolar whereas your latest #2560 (comment) uses a legacy r/t scatter trace.

[FrancoisRMR]

@etpinard yeah sorry, it's because i don't really know where i need to watch to resolve my problem.

I checked this commit which resume my problem.
If I understand correctly, to use scatterpolar ,I have to make an eject of the project in order to retrieve the webpack.config.
Then i need to add a loader to use GLSL plots.
Is that correct ??

My chart model :

Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/hobbs-pearson-trials.csv', function (err, rows) {
      function unpack(rows, key) {
        return rows.map(function (row) { return row[key]; });
      }

      var data: any = [
        {
          type: "scatterpolargl",
          r: unpack(rows, 'trial_1_r'),
          theta: unpack(rows, 'trial_1_theta'),
          mode: "markers",
          name: "Trial 1",
          marker: {
            color: "rgb(27,158,119)",
            size: 15,
            line: {
              color: "white"
            },
            opacity: 0.7
          },
          cliponaxis: false
        },
        {
          type: "scatterpolargl",
          r: unpack(rows, "trial_2_r"),
          theta: unpack(rows, "trial_2_theta"),
          mode: "markers",
          name: "Trial 2",
          marker: {
            color: "rgb(217,95,2)",
            size: 20,
            line: {
              color: "white"
            },
            "opacity": 0.7
          },
          "cliponaxis": false
        },
        {
          type: "scatterpolargl",
          r: unpack(rows, "trial_3_r"),
          theta: unpack(rows, "trial_3_theta"),
          mode: "markers",
          name: "Trial 3",
          marker: {
            color: "rgb(117,112,179)",
            size: 12,
            line: {
              color: "white"
            },
            opacity: 0.7
          },
          cliponaxis: false
        },
        {
          type: "scatterpolargl",
          r: unpack(rows, "trial_4_r"),
          theta: unpack(rows, "trial_4_theta"),
          mode: "markers",
          name: "Trial 4",
          marker: {
            color: "rgb(231,41,138)",
            size: 22,
            line: {
              color: "white"
            },
            opacity: 0.7
          },
          cliponaxis: false
        },
        {
          type: "scatterpolargl",
          r: unpack(rows, "trial_5_r"),
          theta: unpack(rows, "trial_5_theta"),
          mode: "markers",
          name: "Trial 5",
          marker: {
            color: "rgb(102,166,30)",
            size: 19,
            line: {
              color: "white"
            },
            opacity: 0.7
          },
          cliponaxis: false
        },
        {
          type: "scatterpolargl",
          r: unpack(rows, "trial_6_r"),
          theta: unpack(rows, "trial_6_theta"),
          mode: "markers",
          name: "Trial 6",
          marker: {
            color: "rgb(230,171,2)",
            size: 10,
            line: {
              color: "white"
            },
            opacity: 0.7
          },
          cliponaxis: false
        }
      ]


      var layout = {
        title: "Hobbs-Pearson Trials",
        font: {
          size: 15
        },
        showlegend: false,
        polar: {
          bgcolor: "rgb(223, 223, 223)",
          angularaxis: {
            tickwidth: 2,
            linewidth: 3,
            layer: "below traces"
          },
          radialaxis: {
            side: "counterclockwise",
            showline: true,
            linewidth: 2,
            tickwidth: 2,
            gridcolor: "white",
            gridwidth: 2
          }
        },
        paper_bgcolor: "rgb(223, 223, 223)",
      }

      Plotly.plot('plotly', data, layout);
    })

My webpack.config.js :

const fs = require('fs');
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ProgressPlugin = require('webpack/lib/ProgressPlugin');
const CircularDependencyPlugin = require('circular-dependency-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const rxPaths = require('rxjs/_esm5/path-mapping');
const autoprefixer = require('autoprefixer');
const postcssUrl = require('postcss-url');
const cssnano = require('cssnano');
const postcssImports = require('postcss-import');

const { NoEmitOnErrorsPlugin, SourceMapDevToolPlugin, NamedModulesPlugin } = require('webpack');
const { ScriptsWebpackPlugin, NamedLazyChunksWebpackPlugin, BaseHrefWebpackPlugin } = require('@angular/cli/plugins/webpack');
const { CommonsChunkPlugin } = require('webpack').optimize;
const { AngularCompilerPlugin } = require('@ngtools/webpack');

const nodeModules = path.join(process.cwd(), 'node_modules');
const realNodeModules = fs.realpathSync(nodeModules);
const genDirNodeModules = path.join(process.cwd(), 'src', '$$_gendir', 'node_modules');
const entryPoints = ["inline","polyfills","sw-register","styles","scripts","vendor","main"];
const minimizeCss = false;
const baseHref = "";
const deployUrl = "";
const projectRoot = process.cwd();
const maximumInlineSize = 10;
const postcssPlugins = function (loader) {
        // safe settings based on: https://github.com/ben-eb/cssnano/issues/358#issuecomment-283696193
        const importantCommentRe = /@preserve|@licen[cs]e|[@#]\s*source(?:Mapping)?URL|^!/i;
        const minimizeOptions = {
            autoprefixer: false,
            safe: true,
            mergeLonghand: false,
            discardComments: { remove: (comment) => !importantCommentRe.test(comment) }
        };
        return [
            postcssImports({
                resolve: (url, context) => {
                    return new Promise((resolve, reject) => {
                        let hadTilde = false;
                        if (url && url.startsWith('~')) {
                            url = url.substr(1);
                            hadTilde = true;
                        }
                        loader.resolve(context, (hadTilde ? '' : './') + url, (err, result) => {
                            if (err) {
                                if (hadTilde) {
                                    reject(err);
                                    return;
                                }
                                loader.resolve(context, url, (err, result) => {
                                    if (err) {
                                        reject(err);
                                    }
                                    else {
                                        resolve(result);
                                    }
                                });
                            }
                            else {
                                resolve(result);
                            }
                        });
                    });
                },
                load: (filename) => {
                    return new Promise((resolve, reject) => {
                        loader.fs.readFile(filename, (err, data) => {
                            if (err) {
                                reject(err);
                                return;
                            }
                            const content = data.toString();
                            resolve(content);
                        });
                    });
                }
            }),
            postcssUrl({
                filter: ({ url }) => url.startsWith('~'),
                url: ({ url }) => {
                    const fullPath = path.join(projectRoot, 'node_modules', url.substr(1));
                    return path.relative(loader.context, fullPath).replace(/\\/g, '/');
                }
            }),
            postcssUrl([
                {
                    // Only convert root relative URLs, which CSS-Loader won't process into require().
                    filter: ({ url }) => url.startsWith('/') && !url.startsWith('//'),
                    url: ({ url }) => {
                        if (deployUrl.match(/:\/\//) || deployUrl.startsWith('/')) {
                            // If deployUrl is absolute or root relative, ignore baseHref & use deployUrl as is.
                            return `${deployUrl.replace(/\/$/, '')}${url}`;
                        }
                        else if (baseHref.match(/:\/\//)) {
                            // If baseHref contains a scheme, include it as is.
                            return baseHref.replace(/\/$/, '') +
                                `/${deployUrl}/${url}`.replace(/\/\/+/g, '/');
                        }
                        else {
                            // Join together base-href, deploy-url and the original URL.
                            // Also dedupe multiple slashes into single ones.
                            return `/${baseHref}/${deployUrl}/${url}`.replace(/\/\/+/g, '/');
                        }
                    }
                },
                {
                    // TODO: inline .cur if not supporting IE (use browserslist to check)
                    filter: (asset) => {
                        return maximumInlineSize > 0 && !asset.hash && !asset.absolutePath.endsWith('.cur');
                    },
                    url: 'inline',
                    // NOTE: maxSize is in KB
                    maxSize: maximumInlineSize,
                    fallback: 'rebase',
                },
                { url: 'rebase' },
            ]),
            autoprefixer({ grid: true }),
        ].concat(minimizeCss ? [cssnano(minimizeOptions)] : []);
    };




module.exports = {
  "resolve": {
    "extensions": [
      ".ts",
      ".js"
    ],
    "modules": [
      "./node_modules",
      "./node_modules"
    ],
    "symlinks": true,
    "alias": rxPaths(),
    "mainFields": [
      "browser",
      "module",
      "main"
    ]
  },
  "resolveLoader": {
    "modules": [
      "./node_modules",
      "./node_modules"
    ],
    "alias": rxPaths()
  },
  "entry": {
    "main": [
      "./src\\main.ts"
    ],
    "polyfills": [
      "./src\\polyfills.ts"
    ],
    "styles": [
      "./src\\styles.scss",
      "./src\\assets\\styles\\theme.scss",
      "./node_modules\\vis\\dist\\vis.min.css"
    ]
  },
  "output": {
    "path": path.join(process.cwd(), "dist"),
    "filename": "[name].bundle.js",
    "chunkFilename": "[id].chunk.js",
    "crossOriginLoading": false
  },
  "module": {
    "rules": [
      {
        "test": /\.html$/,
        "loader": "raw-loader"
      },
      {
        "test": /\.(eot|svg|cur)$/,
        "loader": "file-loader",
        "options": {
          "name": "[name].[hash:20].[ext]",
          "limit": 10000
        }
      },
      {
        "test": /\.(jpg|png|webp|gif|otf|ttf|woff|woff2|ani)$/,
        "loader": "url-loader",
        "options": {
          "name": "[name].[hash:20].[ext]",
          "limit": 10000
        }
      },
      {
        "exclude": [
          path.join(process.cwd(), "src\\styles.scss"),
          path.join(process.cwd(), "src\\assets\\styles\\theme.scss"),
          path.join(process.cwd(), "node_modules\\vis\\dist\\vis.min.css")
        ],
        "test": /\.css$/,
        "use": [
          "exports-loader?module.exports.toString()",
          {
            "loader": "css-loader",
            "options": {
              "sourceMap": false,
              "import": false
            }
          },
          {
            "loader": "postcss-loader",
            "options": {
              "ident": "postcss",
              "plugins": postcssPlugins,
              "sourceMap": false
            }
          }
        ]
      },
      {
        "exclude": [
          path.join(process.cwd(), "src\\styles.scss"),
          path.join(process.cwd(), "src\\assets\\styles\\theme.scss"),
          path.join(process.cwd(), "node_modules\\vis\\dist\\vis.min.css")
        ],
        "test": /\.scss$|\.sass$/,
        "use": [
          "exports-loader?module.exports.toString()",
          {
            "loader": "css-loader",
            "options": {
              "sourceMap": false,
              "import": false
            }
          },
          {
            "loader": "postcss-loader",
            "options": {
              "ident": "postcss",
              "plugins": postcssPlugins,
              "sourceMap": false
            }
          },
          {
            "loader": "sass-loader",
            "options": {
              "sourceMap": false,
              "precision": 8,
              "includePaths": []
            }
          }
        ]
      },
      {
        "exclude": [
          path.join(process.cwd(), "src\\styles.scss"),
          path.join(process.cwd(), "src\\assets\\styles\\theme.scss"),
          path.join(process.cwd(), "node_modules\\vis\\dist\\vis.min.css")
        ],
        "test": /\.less$/,
        "use": [
          "exports-loader?module.exports.toString()",
          {
            "loader": "css-loader",
            "options": {
              "sourceMap": false,
              "import": false
            }
          },
          {
            "loader": "postcss-loader",
            "options": {
              "ident": "postcss",
              "plugins": postcssPlugins,
              "sourceMap": false
            }
          },
          {
            "loader": "less-loader",
            "options": {
              "sourceMap": false
            }
          }
        ]
      },
      {
        "exclude": [
          path.join(process.cwd(), "src\\styles.scss"),
          path.join(process.cwd(), "src\\assets\\styles\\theme.scss"),
          path.join(process.cwd(), "node_modules\\vis\\dist\\vis.min.css")
        ],
        "test": /\.styl$/,
        "use": [
          "exports-loader?module.exports.toString()",
          {
            "loader": "css-loader",
            "options": {
              "sourceMap": false,
              "import": false
            }
          },
          {
            "loader": "postcss-loader",
            "options": {
              "ident": "postcss",
              "plugins": postcssPlugins,
              "sourceMap": false
            }
          },
          {
            "loader": "stylus-loader",
            "options": {
              "sourceMap": false,
              "paths": []
            }
          }
        ]
      },
      {
        "include": [
          path.join(process.cwd(), "src\\styles.scss"),
          path.join(process.cwd(), "src\\assets\\styles\\theme.scss"),
          path.join(process.cwd(), "node_modules\\vis\\dist\\vis.min.css")
        ],
        "test": /\.css$/,
        "use": [
          "style-loader",
          {
            "loader": "css-loader",
            "options": {
              "sourceMap": false,
              "import": false
            }
          },
          {
            "loader": "postcss-loader",
            "options": {
              "ident": "postcss",
              "plugins": postcssPlugins,
              "sourceMap": false
            }
          }
        ]
      },
      {
        "include": [
          path.join(process.cwd(), "src\\styles.scss"),
          path.join(process.cwd(), "src\\assets\\styles\\theme.scss"),
          path.join(process.cwd(), "node_modules\\vis\\dist\\vis.min.css")
        ],
        "test": /\.scss$|\.sass$/,
        "use": [
          "style-loader",
          {
            "loader": "css-loader",
            "options": {
              "sourceMap": false,
              "import": false
            }
          },
          {
            "loader": "postcss-loader",
            "options": {
              "ident": "postcss",
              "plugins": postcssPlugins,
              "sourceMap": false
            }
          },
          {
            "loader": "sass-loader",
            "options": {
              "sourceMap": false,
              "precision": 8,
              "includePaths": []
            }
          }
        ]
      },
      {
        "include": [
          path.join(process.cwd(), "src\\styles.scss"),
          path.join(process.cwd(), "src\\assets\\styles\\theme.scss"),
          path.join(process.cwd(), "node_modules\\vis\\dist\\vis.min.css")
        ],
        "test": /\.less$/,
        "use": [
          "style-loader",
          {
            "loader": "css-loader",
            "options": {
              "sourceMap": false,
              "import": false
            }
          },
          {
            "loader": "postcss-loader",
            "options": {
              "ident": "postcss",
              "plugins": postcssPlugins,
              "sourceMap": false
            }
          },
          {
            "loader": "less-loader",
            "options": {
              "sourceMap": false
            }
          }
        ]
      },
      {
        "include": [
          path.join(process.cwd(), "src\\styles.scss"),
          path.join(process.cwd(), "src\\assets\\styles\\theme.scss"),
          path.join(process.cwd(), "node_modules\\vis\\dist\\vis.min.css")
        ],
        "test": /\.styl$/,
        "use": [
          "style-loader",
          {
            "loader": "css-loader",
            "options": {
              "sourceMap": false,
              "import": false
            }
          },
          {
            "loader": "postcss-loader",
            "options": {
              "ident": "postcss",
              "plugins": postcssPlugins,
              "sourceMap": false
            }
          },
          {
            "loader": "stylus-loader",
            "options": {
              "sourceMap": false,
              "paths": []
            }
          }
        ]
      },
      {
        "test": /\.ts$/,
        "loader": "@ngtools/webpack"
      }
    ]
  },
  "plugins": [
    new NoEmitOnErrorsPlugin(),
    new ScriptsWebpackPlugin({
      "name": "scripts",
      "sourceMap": true,
      "filename": "scripts.bundle.js",
      "scripts": [
        "C:\\Users\\Consultant.FRomero\\Documents\\OneWeb\\OneWeb_Test_Report_GUI\\node_modules\\vis\\dist\\vis.min.js"
      ],
      "basePath": "C:\\Users\\Consultant.FRomero\\Documents\\OneWeb\\OneWeb_Test_Report_GUI"
    }),
    new CopyWebpackPlugin([
      {
        "context": "src",
        "to": "",
        "from": {
          "glob": "src\\assets\\**\\*",
          "dot": true
        }
      },
      {
        "context": "src",
        "to": "",
        "from": {
          "glob": "src\\favicon.ico",
          "dot": true
        }
      }
    ], {
      "ignore": [
        ".gitkeep",
        "**/.DS_Store",
        "**/Thumbs.db"
      ],
      "debug": "warning"
    }),
    new ProgressPlugin(),
    new CircularDependencyPlugin({
      "exclude": /(\\|\/)node_modules(\\|\/)/,
      "failOnError": false,
      "onDetected": false,
      "cwd": projectRoot
    }),
    new NamedLazyChunksWebpackPlugin(),
    new HtmlWebpackPlugin({
      "template": "./src\\index.html",
      "filename": "./index.html",
      "hash": false,
      "inject": true,
      "compile": true,
      "favicon": false,
      "minify": false,
      "cache": true,
      "showErrors": true,
      "chunks": "all",
      "excludeChunks": [],
      "title": "Webpack App",
      "xhtml": true,
      "chunksSortMode": function sort(left, right) {
        let leftIndex = entryPoints.indexOf(left.names[0]);
        let rightindex = entryPoints.indexOf(right.names[0]);
        if (leftIndex > rightindex) {
            return 1;
        }
        else if (leftIndex < rightindex) {
            return -1;
        }
        else {
            return 0;
        }
    }
    }),
    new BaseHrefWebpackPlugin({}),
    new CommonsChunkPlugin({
      "name": [
        "inline"
      ],
      "minChunks": null
    }),
    new CommonsChunkPlugin({
      "name": [
        "vendor"
      ],
      "minChunks": (module) => {
                return module.resource
                    && (module.resource.startsWith(nodeModules)
                        || module.resource.startsWith(genDirNodeModules)
                        || module.resource.startsWith(realNodeModules));
            },
      "chunks": [
        "main"
      ]
    }),
    new SourceMapDevToolPlugin({
      "filename": "[file].map[query]",
      "moduleFilenameTemplate": "[resource-path]",
      "fallbackModuleFilenameTemplate": "[resource-path]?[hash]",
      "sourceRoot": "webpack:///"
    }),
    new CommonsChunkPlugin({
      "name": [
        "main"
      ],
      "minChunks": 2,
      "async": "common"
    }),
    new NamedModulesPlugin({}),
    new AngularCompilerPlugin({
      "mainPath": "main.ts",
      "platform": 0,
      "hostReplacementPaths": {
        "environments\\environment.ts": "environments\\environment.ts"
      },
      "sourceMap": true,
      "tsConfigPath": "src\\tsconfig.app.json",
      "skipCodeGeneration": true,
      "compilerOptions": {}
    })
  ],
  "node": {
    "fs": "empty",
    "global": true,
    "crypto": "empty",
    "tls": "empty",
    "net": "empty",
    "process": true,
    "module": false,
    "clearImmediate": false,
    "setImmediate": false
  },
  "devServer": {
    "historyApiFallback": true
  }
};

I haven't modify my webpack.config.js file.

[etpinard]

Then i need to add a loader to use GLSL plots.
Is that correct ??

YES. See -> https://github.com/plotly/plotly.js#building-plotlyjs-with-webpack

[FrancoisRMR]

Problem solved !! 👍 Thank's you very very very much !! 😄

[mathieuleclaire]

Hi @vador31, could please share your fix for this issue ?