Unknown shader module project32 #3213

cschlueter · 2019-06-07T08:14:55Z

Description

My usage of path layer leads to error: "Unknown shader module project32"
Same goes for this example: https://deck.gl/showcases/gallery/highway

Repro Steps

Use example above.

Environment (please complete the following information):

Framework Version: <script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>
Browser Version: Version 76.0.3809.6 (Official Build) canary (64-bit)
OS: Mac OS X 10.14.5

Logs

dist.min.js:1 deck: error while initializing PathLayer({id: 'path-layer'})
Error: Unknown shader module project32
at i (dist.min.js:1)
at e.value (dist.min.js:1)
at dist.min.js:1
at Array.map ()
at e.value (dist.min.js:1)
at h (dist.min.js:1)
at T (dist.min.js:1)
at t.value (dist.min.js:1)
at t.value (dist.min.js:1)
at t.value (dist.min.js:1)
value @ dist.min.js:1
value @ dist.min.js:1
value @ dist.min.js:1
value @ dist.min.js:1
value @ dist.min.js:1
value @ dist.min.js:1
setProps @ dist.min.js:12
value @ dist.min.js:1
value @ dist.min.js:1
value @ dist.min.js:1
(anonymous) @ dist.min.js:1
Promise.then (async)
value @ dist.min.js:1
e @ dist.min.js:1
o @ dist.min.js:12
(anonymous) @ 2416456071?v=5:147
dist.min.js:1 Uncaught (in promise) Error: Unknown shader module project32
at i (dist.min.js:1)
at e.value (dist.min.js:1)
at dist.min.js:1
at Array.map ()
at e.value (dist.min.js:1)
at h (dist.min.js:1)
at T (dist.min.js:1)
at t.value (dist.min.js:1)
at t.value (dist.min.js:1)
at t.value (dist.min.js:1)
i @ dist.min.js:1
value @ dist.min.js:1
(anonymous) @ dist.min.js:1
value @ dist.min.js:1
h @ dist.min.js:1
T @ dist.min.js:1
value @ dist.min.js:1
value @ dist.min.js:1
value @ dist.min.js:1
e @ dist.min.js:1
t @ dist.min.js:1
value @ dist.min.js:1
value @ dist.min.js:1
value @ dist.min.js:1
value @ dist.min.js:1
value @ dist.min.js:1
value @ dist.min.js:1
value @ dist.min.js:1
value @ dist.min.js:1
value @ dist.min.js:1
value @ dist.min.js:1
setProps @ dist.min.js:12
value @ dist.min.js:1
value @ dist.min.js:1
value @ dist.min.js:1
(anonymous) @ dist.min.js:1
Promise.then (async)
value @ dist.min.js:1
e @ dist.min.js:1
o @ dist.min.js:12
(anonymous) @ 2416456071?v=5:147

cschlueter · 2019-06-07T09:14:34Z

Actually this bug appears on a few examples. It also does not depend on Browser, both Safari and Chrome are affected.

cschlueter · 2019-06-07T09:45:23Z

Happens with GeoJson Layer as well.

Error message:

dist.min.js:1 deck: error while initializing PathLayer({id: 'GeoJsonLayer-line-strings'})
 Error: Unknown shader module project32

const geojsonLayer = new deck.GeoJsonLayer({
    data: fc,
    pickable: false,
    stroked: false,
    filled: false,
    extruded: false,
    lineWidthScale: 20,
    lineWidthMinPixels: 2,
    getFillColor: [160, 160, 180, 255],
    getLineColor: [160, 160, 180, 255],
    getLineWidth: 10,
    opacity: 0.8,
    wireframe: true,
    fp64: true,
    getElevation: 100,
});

Where "fc" is a FeatureCollection only consisting of one LineString with hundreds of coordinates.

var fc = {
    "type": "FeatureCollection",
    "features": [
        feature
    ]
}

Pessimistress · 2019-06-07T15:54:42Z

@cschlueter Thanks for reporting. Please use https://unpkg.com/deck.gl@7.1.0/dist.min.js as we address this issue.

@ibgreen Tree shaking is broken by #3202.

Pessimistress · 2019-06-07T18:33:44Z

Fixed in 7.1.2. It is available on either

https://unpkg.com/deck.gl@7.1.2/dist.min.js

or

https://unpkg.com/deck.gl@latest/dist.min.js.

The ^7.0.0 cache on unpkg.com may need some time to refresh.

cschlueter · 2019-06-07T19:20:51Z

Thanks, selecting the version 7.1.2 explicitly did the trick.

sebastibe · 2019-06-14T10:00:48Z

I still getting this error on 7.1.4 with ScatterplotLayer without using pre-bundled versions.

sebastibe · 2019-06-22T15:00:41Z

I'm still blocked by this issue when trying to build an application with the following config:

{
  "engineStrict": true,
  "scripts": {
    "watch": "webpack -d --watch",
    "build": "webpack -p --progress",
    "rollup-build": "npx rollup -c"
  },
  "dependencies": {
    "nebula.gl": "^0.14.0",
    "nebula.gl-react": "^0.10.5",
    "react": "16.5.0",
    "react-dom": "16.5.0",
    "react-map-gl": "^5.0.3"
  },
  "resolutions": {
    "@deck.gl/core": "7.2.0-alpha.1"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-decorators": "^7.0.0",
    "@babel/plugin-proposal-export-default-from": "^7.2.0",
    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
    "@babel/plugin-proposal-function-sent": "^7.0.0",
    "@babel/plugin-proposal-json-strings": "^7.0.0",
    "@babel/plugin-proposal-numeric-separator": "^7.0.0",
    "@babel/plugin-proposal-throw-expressions": "^7.0.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/plugin-syntax-import-meta": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-flow": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.0",
    "babel-preset-minify": "^0.5.0",
    "bourbon": "^4.3.4",
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^0.11.2",
    "rollup": "^1.15.3",
    "rollup-plugin-babel": "^4.3.0",
    "rollup-plugin-commonjs": "^9.2.0",
    "rollup-plugin-json": "^3.1.0",
    "rollup-plugin-node-builtins": "^2.1.2",
    "rollup-plugin-node-globals": "^1.4.0",
    "rollup-plugin-node-resolve": "^4.0.0",
    "rollup-plugin-replace": "^2.1.0",
    "url-loader": "^0.5.9",
    "webpack": "^4.34.0",
    "webpack-cli": "^3.3.4"
  }
}

I have tried different versions of @deck.gl/core after 7.1 but I can't seem to find the initializeShaderModules in the generated bundle. Am I missing something?

Pessimistress · 2019-06-24T21:02:12Z

@sebastibe Can you try the following:

Check if the global object deck exists in the console, and deck.version matches your installed version (7.2.0-alpha.1).
With source map on, see if https://github.com/uber/deck.gl/blob/master/modules/core/src/lib/init.js#L46 is executed.

sebastibe · 2019-06-24T22:37:51Z

One weird thing I noticed is that I always seem to have the deck version one minor version below the one required: (7.1.6 if I require 7.2.0-alpha.1, 7.1.5 if I require 7.1.6 etc...)
I don't find the initializeShaderModules function in the source maps which could indicate I might have an issue with my webpack config. Here it is below for reference:

const resolve = require('path').resolve;
const join = require('path').join;
const dirname = require('path').dirname;
const webpack = require('webpack');

const BUILD_DIR = resolve(__dirname, 'target', 'cljsbuild', 'public');
const APP_DIR = resolve(__dirname, 'src', 'js');
const SCSS_DIR = resolve(__dirname, 'src', 'sass');
const MAP_GL_CSS_DIR = resolve(__dirname, 'node_modules', 'mapbox-gl');

const ExtractTextPlugin = require("extract-text-webpack-plugin");

const extractSass = new ExtractTextPlugin({
  // filename: "[name].[contenthash].css"
  filename: "css/[name].css"
  // disable: process.env.NODE_ENV === "development"
});

const config = {
  entry: [
    `${APP_DIR}/main.js`,
    `${MAP_GL_CSS_DIR}/dist/mapbox-gl.css`,
  ],
  output: {
    path: BUILD_DIR,
    filename: 'js/bundle.js'
  },
  resolve: {
    extensions: ['.js', '.scss']
  },
  module: {
    rules: [
      // Compile ES2015 using babel
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              require('@babel/preset-env'),
              require('@babel/preset-react'),
              require('@babel/preset-flow')
            ],
            plugins: [
              require('@babel/plugin-proposal-class-properties'),
              require('@babel/plugin-proposal-export-default-from')
            ]
          },
        },
        exclude: /node_modules/,
        include: [resolve('.')]
      },
      {
        // webpackl 4 fix for broken turf module: https://github.com/uber/nebula.gl/issues/64
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto'
      },
      {
        test: /\.css$/,
        use: extractSass.extract({
          use: [{
            loader: "css-loader", // translates CSS into CommonJS
            options: {
              includePaths: [
                // From mapbox-gl-js README.
                // Required for non-browserify bundlers (e.g. webpack):
                join(dirname(module.filename), 'node_modules/mapbox-gl/dist'),
                // join(dirname(module.filename), 'node_modules/weather-icons/css')
              ]
            }
           }],
           fallback: "style-loader" // creates style nodes from JS strings
        })
      },
      {
        test: /\.scss$/,
        use: extractSass.extract({
          use: [{
            loader: "css-loader" // translates CSS into CommonJS
          }, {
            loader: "sass-loader", // compiles Sass to CSS
            options: {
              includePaths: [
                join(dirname(module.filename), 'node_modules')
              ]
            }
          }],
          fallback: "style-loader" // creates style nodes from JS strings
        })
      },
      {
        test: /\.(woff|woff2)$/,
        use: {
          loader: 'url-loader',
          options: {
            name: 'fonts/[hash].[ext]',
            limit: 5000,
            mimetype: 'application/font-woff'
          }
        }
      }, {
        test: /\.(ttf|eot|svg)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: 'fonts/[hash].[ext]'
          }
        }
      }
    ]
  },
  plugins: [
    extractSass,
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
};

module.exports = config;

Pessimistress · 2019-06-24T23:42:33Z

@sebastibe Your package.json does not explicitly depend on any deck.gl packages. They are not dependencies of the latest nebula.gl either.

nebula-react looks like a deprecated package since it's depending on an old version of nebula.gl which depends on an older version of deck.gl.

The ultimate test is always running yarn list @deck.gl/core to see exactly how many copies and what versions are installed.

@cschlueter This doesn't seem to be related to your issue, feel free to close and we can move to a different thread.

sebastibe · 2019-07-10T11:10:19Z

@Pessimistress I'm still blocked on this issue.

I have confirmed that I could have a clean install and only one version of deck.gl with the following packages:

    "@deck.gl/core": "^7.1.7",
    "@deck.gl/layers": "^7.1.7",
    "@deck.gl/react": "^7.1.7",
    "@luma.gl/constants": "^7.1.1",
    "@luma.gl/core": "^7.1.1",
    "@nebula.gl/layers": "^0.14.0",

I have confirmed that the initializeShaderModules function was called with the debugger.

I'm a bit out of imagination on where to go from here, any ideas?

Pessimistress · 2019-07-10T19:09:53Z

@sebastibe Can you run yarn list @luma.gl/core

sebastibe · 2019-07-11T02:10:40Z

╰─ yarn list @luma.gl/core
yarn list v1.16.0
└─ @luma.gl/core@7.1.1

Pessimistress · 2019-07-11T18:54:10Z

Nothing jumps out to me from the information you've shared. This error might be caused by one of the following:

Multiple copies of @deck.gl/core or @luma.gl/core in node_modules. This can be verified with yarn list <package>. The fix is to use matching dependency versions in package.json, remove yarn.lock and perform a clean install.
Multiple copies of @deck.gl/core or @luma.gl/core as a result of some local setup, such as yarn link, use of module-alias module, resolve.alias in webpack config, inclusion of both locally-bundled and pre-bundled versions, etc.
Overly aggressive tree shaking - I've seen this if the sideEffects field in package.json is not respected, usually due to a custom minifier config. This can be verified by checking if the global deck object exists in the runtime console.

helennf · 2019-07-24T10:20:11Z

This error occurred when I used @deck.gl/geo-layers to create TripsLayers.
@Pessimistress According to the tips,I deleted the node_modules and yarn.lock files and reinstalled them using yarn install, but this error still appears.I have no used of module-alias and minifier config.
This is a screenshot of the browser console error, which keeps growing.

In addition, there is another error:

Packages:
"deck.gl": "^7.1.10",
"@deck.gl/core": "^7.1.10",
"@deck.gl/mapbox": "^7.1.10",
"@deck.gl/geo-layers": "^7.1.10",
Am I missing something?:frowning:

SterlingMcCall · 2019-07-24T15:34:00Z

I am seeing this issue as well. I am using npm to install my packages and it is an angular application. I am building the application with ng build --prod which is using webpack under the hood.
The deck.gl version I am using is 7.1.10. I have switched to including deck.gl via <script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script> which is not optimal, but functions as a workaround until I can have it properly included in my application when building.

mbarrenechea · 2019-07-29T09:03:28Z

Any update on this? I'm having the same issue

    "@deck.gl/core": "^7.1.10",
    "@deck.gl/mapbox": "^7.1.10",
    "@loaders.gl/images": "^1.1.6",
    "@luma.gl/constants": "^7.1.1",
    "deck.gl": "^7.1.10",
    "luma.gl": "^7.1.1",

A clean install doesn't solve it

Pessimistress · 2019-07-29T14:29:24Z

@mbarrenechea have you tried run yarn list @luma.gl/core? Most likely you have multiple copies because Luma is already a dependency of deck.

mbarrenechea · 2019-07-29T15:10:49Z

Just an update I changed my dependencies to

    "deck.gl": "7.0.0",
    "luma.gl": "^7.1.1",

and now it works... Who knows....

mbarrenechea · 2019-07-29T15:12:56Z

@Pessimistress yes I run it and I only had one

yarn list @luma.gl/core
yarn list v1.17.0
└─ @luma.gl/core@7.1.1

Pessimistress · 2019-07-29T16:20:45Z

@mbarrenechea that is very curious. Do you have other dependencies that depend on deck? Are you able to share your full dependencies list so that I can try to reproduce?

pulges · 2019-07-31T07:26:31Z

I have the same problem, and tracked it down to having no global deck object present.
Adding this to file head to fool tree shaking solved the problem but it is not nice:

import deck from '@deck.gl/core';
const hack = deck;

I think the problem is that my previous header had only and no core library:

import { GoogleMapsOverlay as DeckOverlay } from '@deck.gl/google-maps';
import { IconLayer } from '@deck.gl/layers';

and it all worked until core version 7.1.0. Somehow 7.1.1 and up needs to run the init in @deck/core and it will not be run if core is not imported directly.

Is there a better way to solve the "overly aggressive tree shaking"?

sebastibe · 2019-07-31T12:53:44Z

This "hack" worked also for me.

Pessimistress · 2019-07-31T17:02:32Z

What bundler do you use? This field:
https://github.com/uber/deck.gl/blob/7.1-release/modules/core/package.json#L27
Is supposed to prevent the module registration from being tree shaken, and we have tested it with webpack.

pulges · 2019-08-01T07:50:10Z

I use webpack 4.38.0 but I think the problem is that I did not import and use @deck.gl/core. Just '@deck.gl/google-maps' and '@deck.gl/layers' (both have "sideEffects": false). I think the side effects of dependencies of imports are not respected. Just importing did not work too as webpack probably sees it as an unused library, thus the hack thing to make it think I'm using it.

Pessimistress · 2019-08-02T21:34:26Z

@pulges That would explain it. Thank you for the insight! We do have an ongoing discussion to remove side effects from core.

Pessimistress · 2019-08-06T17:31:00Z

Published 7.1.11

Perhaps related to visgl/deck.gl#3213

cschlueter added the bug label Jun 7, 2019

Pessimistress mentioned this issue Jun 7, 2019

Fix tree shaking in pre-bundled version #3214

Merged

Pessimistress mentioned this issue Aug 2, 2019

Remove side effects from core module #3395

Merged

tgorkin closed this as completed Aug 6, 2019

SterlingMcCall mentioned this issue Sep 11, 2019

Deck.gl fails to initialize when run with AOT compilation with Angular #3567

Closed

mccalluc added a commit to vitessce/vitessce that referenced this issue Dec 2, 2019

Make the docs demo mimic the dev demo... but deck.gl errors

457a174

Perhaps related to visgl/deck.gl#3213

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Unknown shader module project32 #3213

Unknown shader module project32 #3213

cschlueter commented Jun 7, 2019

cschlueter commented Jun 7, 2019

cschlueter commented Jun 7, 2019 •

edited

Pessimistress commented Jun 7, 2019

Pessimistress commented Jun 7, 2019

cschlueter commented Jun 7, 2019

sebastibe commented Jun 14, 2019

sebastibe commented Jun 22, 2019

Pessimistress commented Jun 24, 2019

sebastibe commented Jun 24, 2019

Pessimistress commented Jun 24, 2019

sebastibe commented Jul 10, 2019

Pessimistress commented Jul 10, 2019

sebastibe commented Jul 11, 2019

Pessimistress commented Jul 11, 2019

helennf commented Jul 24, 2019 •

edited

SterlingMcCall commented Jul 24, 2019

mbarrenechea commented Jul 29, 2019

Pessimistress commented Jul 29, 2019

mbarrenechea commented Jul 29, 2019

mbarrenechea commented Jul 29, 2019 •

edited

Pessimistress commented Jul 29, 2019

pulges commented Jul 31, 2019 •

edited

sebastibe commented Jul 31, 2019

Pessimistress commented Jul 31, 2019

pulges commented Aug 1, 2019 •

edited

Pessimistress commented Aug 2, 2019

Pessimistress commented Aug 6, 2019

Unknown shader module project32 #3213

Unknown shader module project32 #3213

Comments

cschlueter commented Jun 7, 2019

Description

Repro Steps

Environment (please complete the following information):

Logs

cschlueter commented Jun 7, 2019

cschlueter commented Jun 7, 2019 • edited

Pessimistress commented Jun 7, 2019

Pessimistress commented Jun 7, 2019

cschlueter commented Jun 7, 2019

sebastibe commented Jun 14, 2019

sebastibe commented Jun 22, 2019

Pessimistress commented Jun 24, 2019

sebastibe commented Jun 24, 2019

Pessimistress commented Jun 24, 2019

sebastibe commented Jul 10, 2019

Pessimistress commented Jul 10, 2019

sebastibe commented Jul 11, 2019

Pessimistress commented Jul 11, 2019

helennf commented Jul 24, 2019 • edited

SterlingMcCall commented Jul 24, 2019

mbarrenechea commented Jul 29, 2019

Pessimistress commented Jul 29, 2019

mbarrenechea commented Jul 29, 2019

mbarrenechea commented Jul 29, 2019 • edited

Pessimistress commented Jul 29, 2019

pulges commented Jul 31, 2019 • edited

sebastibe commented Jul 31, 2019

Pessimistress commented Jul 31, 2019

pulges commented Aug 1, 2019 • edited

Pessimistress commented Aug 2, 2019

Pessimistress commented Aug 6, 2019

cschlueter commented Jun 7, 2019 •

edited

helennf commented Jul 24, 2019 •

edited

mbarrenechea commented Jul 29, 2019 •

edited

pulges commented Jul 31, 2019 •

edited

pulges commented Aug 1, 2019 •

edited