Results 1 to 7 of 7

Thread: d3 is not defined

  1. #1
    Sencha User
    Join Date
    Nov 2017
    Posts
    7

    Default d3 is not defined

    Hello! I'm just getting started with using ExtReact/d3 and am having some issues. Anytime I attempt to use a built in d3 component (ie D3_Pack), I get an error from Ext.js "Uncaught ReferenceError: d3 is not defined". The full error stack is below. My code is just the D3_Pack example (with some minor changes) and I definitely have ext-react-d3 installed and d3 added to app.json. Any ideas or recommendations on how to get this working? Thanks

    Code:
    Uncaught ReferenceError: d3 is not defined
        at constructor.make (ext.js:62311)
        at constructor.makeScale (ext.js:62295)
        at constructor.applyScale (ext.js:62503)
        at constructor.setter [as setScale] (ext.js:8810)
        at Ext.Configurator.configure (ext.js:9089)
        at constructor.initConfig (ext.js:9689)
        at constructor (ext.js:13026)
        at constructor (ext.js:62498)
        at new constructor (ext.js:9978)
        at constructor.applyColorAxis (ext.js:62634)
        at constructor.setter [as setColorAxis] (ext.js:8810)
        at Ext.Configurator.configure (ext.js:9100)
        at constructor.initConfig (ext.js:9689)
        at constructor (ext.js:13026)
        at constructor (ext.js:23578)
        at constructor.callParent (ext.js:9664)
        at constructor (ext.js:27089)
        at constructor.callParent (ext.js:9664)
        at constructor (ext.js:61950)
        at constructor.callParent (ext.js:9664)
        at constructor (ext.js:62605)
        at new constructor (ext.js:9978)
        at _class.createExtJSComponent (reactify.js:106)
        at _class.mountComponent (ExtJSComponent.js:184)
        at Object.mountComponent (ReactReconciler.js:43)
        at _class.mountChildren (ReactMultiChild.js:234)
        at _class._createInitialConfig (ExtJSComponent.js:352)
        at _class.mountComponent (ExtJSComponent.js:177)
        at Object.mountComponent (ReactReconciler.js:43)
        at ReactDOMComponent.mountChildren (ReactMultiChild.js:234)
        at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:701)
        at ReactDOMComponent.mountComponent (ReactDOMComponent.js:520)
        at Object.mountComponent (ReactReconciler.js:43)
        at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:368)
        at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:255)
        at Object.mountComponent (ReactReconciler.js:43)
        at ReactDOMComponent.mountChildren (ReactMultiChild.js:234)
        at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:701)
        at ReactDOMComponent.mountComponent (ReactDOMComponent.js:520)
        at Object.mountComponent (ReactReconciler.js:43)
        at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:368)
        at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:255)
        at Object.mountComponent (ReactReconciler.js:43)
        at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:368)
        at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:255)
        at Object.mountComponent (ReactReconciler.js:43)
        at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:368)
        at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:255)
        at Object.mountComponent (ReactReconciler.js:43)
        at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:368)

  2. #2
    Sencha - Sustaining Engineer tristan.lee's Avatar
    Join Date
    Mar 2015
    Location
    Central Ohio
    Posts
    1,579
    Answers
    165

    Default

    You won't be using app.json for your ExtReact app. Instead, it is webpack.config.js. Your configuration would need something along the lines of:

    Code:
    new ExtJSReactorWebpackPlugin({    ...
        packages: [
            'd3',
            'charts'
        ]
    });
    Tristan Lee
    Sencha Inc - Sustaining Engineer


    Having an issue? Help us help you - be detailed; provide some code; demonstrate with a fiddle (fiddle.sencha.com)

    Embed your fiddle in your post: [FIDDLE]id[/FIDDLE]

  3. #3
    Sencha User
    Join Date
    Nov 2017
    Posts
    7

    Default

    Thanks, Tristan! Just curious: is this in the documentation anywhere? I looked for something like this but wasn't able to find much on actually setting up the d3 packages.

  4. #4
    Sencha User
    Join Date
    Nov 2017
    Posts
    7

    Default

    Update: Adding this in did not work for me. Screen shots from my webpack config are below (forum won't allow me to post the actual code, citing "too many URLs").

    Screen Shot 2018-01-29 at 11.44.28 AM.jpg
    Screen Shot 2018-01-29 at 11.44.19 AM.jpg

  5. #5
    Sencha - Sustaining Engineer tristan.lee's Avatar
    Join Date
    Mar 2015
    Location
    Central Ohio
    Posts
    1,579
    Answers
    165

    Default

    Here is the documentation for configuring the packages: http://docs.sencha.com/extreact/6.5....common_options

    If you're able to provide a zip (excluding the modules) of a project where this can be reproduced, that'd be helpful in debugging the problem.
    Tristan Lee
    Sencha Inc - Sustaining Engineer


    Having an issue? Help us help you - be detailed; provide some code; demonstrate with a fiddle (fiddle.sencha.com)

    Embed your fiddle in your post: [FIDDLE]id[/FIDDLE]

  6. #6
    Sencha User
    Join Date
    Nov 2015
    Posts
    11

    Default

    Does anyone have a complete example or instructions on using D3 with ExtReact (not extjs-reactor and ExtJS)?
    I added d3 4.5.0 with npm install.

    Tried adding a "packages:['charts','d3']" section to the ExtReactWebpackPlugin - no change. still get

    Uncaught ReferenceError: d3 is not defined
    at constructor.getSvg (ext.js?9e1b41654c8210566700:47072)
    at constructor.getWrapper (ext.js?9e1b41654c8210566700:47195)
    at constructor.getScene (ext.js?9e1b41654c8210566700:47153)
    at constructor.applyAxis (ext.js?9e1b41654c8210566700:47895)
    at constructor.applyXAxis (ext.js?9e1b41654c8210566700:47905)
    at constructor.setter [as setXAxis] (ext.js?9e1b41654c8210566700:8892)
    at Ext.Configurator.configure (ext.js?9e1b41654c8210566700:9171)
    at constructor.initConfig (ext.js?9e1b41654c8210566700:9771)
    at constructor (ext.js?9e1b41654c8210566700:13110)
    at constructor (ext.js?9e1b41654c8210566700:23686)

    I am trying to use the simple D3 HeatMap PurchasesbyDay.js. I started with the empty boilerplate app generated by "yo @extjs/ext-react".
    I copied some lines from the Kitchen Sink package.json and have this now:

    cat package.json:
    {
    "name": "yobu",
    "version": "1.0.0",
    "license": "ISC",
    "main": "index.js",
    "scripts": {
    "local": "webpack-dev-server --progress --env.local=true",
    "dev": "webpack-dev-server --progress --env.local=true --env.treeShaking=false",
    "builddk": "touch build/ext-react/app.json",
    "build": "npm run clean && cross-env NODE_ENV=production webpack --env.prod=true --progress --colors",
    "clean": "rimraf build",
    "pretest": "webpack --progress",
    "preupdate-snapshots": "webpack --progress",
    "prod": "cd build && static-server --port 8080",
    "start": "webpack-dev-server --progress --colors",
    "test": "jest",
    "update-snapshots": "jest -u"
    },
    "dependencies": {
    "@extjs/ext-react": "^6.5.1",
    "@extjs/ext-react-calendar": "^6.5.1",
    "@extjs/ext-react-charts": "^6.5.1",
    "@extjs/ext-react-d3": "^6.5.1",
    "@extjs/ext-react-exporter": "^6.5.1",
    "@extjs/ext-react-pivot": "^6.5.1",
    "@extjs/ext-react-pivot-d3": "^6.5.1",
    "@extjs/ext-react-treegrid": "^6.5.1",
    "@extjs/ext-react-ux": "^6.5.1",
    "@extjs/reactor": "^1.1.2",
    "babel-polyfill": "^6.23.0",
    "babel-runtime": "^6.23.0",
    "d3": "^4.5.0",
    "highlightjs": "^9.8.0",
    "history": "^4.6.1",
    "prop-types": "^15.5.8",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-redux": "^5.0.4",
    "react-router-dom": "^4.1.1",
    "redux": "^3.6.0"
    },
    "devDependencies": {
    "@extjs/reactor-babel-plugin": "^1.1.1",
    "@extjs/reactor-webpack-plugin": "^1.1.1",
    "babel-core": "^6.17.0",
    "babel-jest": "^20.0.3",
    "babel-loader": "^7.0.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.14.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-2": "^6.13.0",
    "cross-env": "^5.0.0",
    "html-webpack-plugin": "^2.24.1",
    "jest": "^20.0.4",
    "open-browser-webpack-plugin": "0.0.5",
    "portfinder": "^1.0.13",
    "react-hot-loader": "^3.0.0-beta.7",
    "react-test-renderer": "^15.5.4",
    "rimraf": "^2.6.1",
    "static-server": "^2.0.5",
    "webpack": "^2.5.1",
    "webpack-dev-server": "^2.4.1"
    },
    "jest": {
    "collectCoverageFrom": [
    "src/**/*.{js,jsx}"
    ],
    "transform": {
    "^.+\\.jsx?$": "babel-jest"
    },
    "setupFiles": [
    "./node_modules/@extjs/reactor/jest/setup.js",
    "./build/ext-react/ext.js"
    ],
    "unmockedModulePathPatterns": [
    "react",
    "react-dom",
    "react-addons-test-utils",
    "enzyme"
    ]
    }
    }



    The webpack.config.js looks like this:

    cat webpack.config.js
    const webpack = require('webpack');
    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const ExtJSReactorWebpackPlugin = require('@extjs/reactor-webpack-plugin');
    const OpenBrowserPlugin = require('open-browser-webpack-plugin');
    const ExtReactWebpackPlugin = require('@extjs/reactor-webpack-plugin');
    const portfinder = require('portfinder');


    const sourcePath = path.join(__dirname, './src');


    module.exports = function (env) {
    const nodeEnv = env && env.prod ? 'production' : 'development';
    const isProd = nodeEnv === 'production';
    const local = env && env.local;
    const disableTreeShaking = env && env.treeShaking === 'false';


    portfinder.basePort = (env && env.port) || 8080; // the default port to use


    return portfinder.getPortPromise().then(port => {
    const nodeEnv = env && env.prod ? 'production' : 'development';
    const isProd = nodeEnv === 'production';


    const plugins = [
    new ExtReactWebpackPlugin({
    packages: [
    'font-ext',
    'ux',
    'd3',
    'pivot-d3',
    'font-awesome',
    'exporter',
    'pivot',
    'calendar',
    'charts'
    ],
    theme: 'custom-ext-react-theme',
    overrides: ['ext-react/overrides'],
    production: isProd
    }),
    new webpack.EnvironmentPlugin({
    NODE_ENV: nodeEnv
    }),
    new webpack.NamedModulesPlugin()
    ];


    if (isProd) {
    plugins.push(
    new webpack.LoaderOptionsPlugin({
    minimize: true,
    debug: false
    }),
    new webpack.optimize.UglifyJsPlugin({
    compress: {
    warnings: false,
    screw_ie8: true
    }
    })
    );
    } else {
    plugins.push(
    new webpack.HotModuleReplacementPlugin()
    );
    }


    plugins.push(new HtmlWebpackPlugin({
    template: 'index.html',
    hash: true
    }) );


    return {
    devtool: isProd ? 'source-map' : 'cheap-module-source-map',
    context: sourcePath,


    entry: {
    'app': [
    'babel-polyfill',
    'react-hot-loader/patch',
    './index.js',
    ]
    },


    output: {
    path: path.resolve(__dirname, './build'),
    filename: '[name].js'
    },


    module: {
    rules: [
    {
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    use: [
    'babel-loader'
    ],
    },
    ],
    },


    resolve: {
    // The following is only needed when running this boilerplate within the extjs-reactor repo. You can remove this from your own projects.
    alias: {
    "react-dom": path.resolve('./node_modules/react-dom'),
    "react": path.resolve('./node_modules/react')
    }
    },


    plugins,


    stats: {
    colors: {
    green: '\u001b[32m',
    }
    },


    devServer: {
    contentBase: './build',
    historyApiFallback: true,
    host: '0.0.0.0',
    port,
    disableHostCheck: true,
    compress: isProd,
    inline: !isProd,
    hot: !isProd,
    stats: {
    assets: true,
    children: false,
    chunks: false,
    hash: false,
    modules: false,
    publicPath: false,
    timings: true,
    version: false,
    warnings: true,
    colors: {
    green: '\u001b[32m'
    }
    },
    }
    }
    });
    };

  7. #7
    Sencha Premium User
    Join Date
    Apr 2018
    Posts
    3

    Default

    hey,
    some body did find solution for that case ... i have same trouble with reactor (modern toolkit 6.5.3)
    compiles without warnings and after that

    ReferenceError: d3 is not defined
    at constructor.applyTransitions (ext.js?0e37a168bac1996b9411:68698)
    at
    applyTransitions:function(transitions) {
    var name, transition, ease, ret = {};
    for (name in transitions) {
    transition = transitions[name];
    if (transition === true) {
    Ext.raise("'true' is not a valid transition value (should be an object or 'false').");
    }
    ret[name] = transition = Ext.apply({}, transition || transitions.none);
    ease = transition.ease;
    if (typeof ease === 'string') {
    transition.ease = d3['ease' + ease.charAt(0).toUpperCase() + ease.substr(1)]; // thats 68698 row
    }
    if (!('name' in transition)) {
    transition.name = this.getId() + '-' + name;
    }
    }

Similar Threads

  1. Replies: 2
    Last Post: 26 Apr 2013, 8:12 AM
  2. Replies: 1
    Last Post: 29 Nov 2011, 5:53 AM
  3. fvd is not defined
    By archmisha in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 24 Feb 2009, 1:38 PM
  4. Ext is not defined
    By lalit_ce in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 4 Oct 2008, 5:25 AM
  5. Ext is not defined
    By hixson in forum Ext 1.x: Help & Discussion
    Replies: 9
    Last Post: 9 Oct 2007, 10:36 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •