trouble importing from ES6-based D3 modules

[ChipNowacek]

I'm sure I have a config error; just not (yet) smart enough to find it:

🚨   'request' is not exported by node_modules/d3-request/build/d3-request.js
https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module
src/scripts/modules/d3sparql.js (75:9)
73: */
74: 
75: import { request } from 'd3-request';
             ^
76: export function query(endpoint, sparql, callback) {
77:   var url = endpoint + 'query=' + encodeURIComponent(sparql);
78:   d3.request(url)
79:   .mimeType('application/sparql-results+json')
...

Chips-iMac:questions chipnowacek$ grep -r export node_modules/d3-request
node_modules/d3-request/build/d3-request.js:    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('d3-collection'), require('d3-dispatch'), require('d3-dsv')) :
node_modules/d3-request/build/d3-request.js:    typeof define === 'function' && define.amd ? define(['exports', 'd3-collection', 'd3-dispatch', 'd3-dsv'], factory) :
node_modules/d3-request/build/d3-request.js:}(this, (function (exports,d3Collection,d3Dispatch,d3Dsv) { 'use strict';
node_modules/d3-request/build/d3-request.js:exports.request = request;

I get similar errors if I import all of D3 via import * as d3 from 'd3';.

I looked at https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module. Do I have to use namedExports or something?

[ChipNowacek]

I'm still fiddling with this and will report back.

[ChipNowacek]

Ok. I'm still getting:

⚠️   'select' is not exported by 'node_modules/d3/build/d3.js'
https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module
src/scripts/main.js (26:18)
24: import * as d3 from 'd3';
25: export function exec() {
26:   var sparql = d3.select('#sparql').property('value');
                      ^

I have a feeling #998 answers the question — and I don't see it yet.

[fregante]

Are you using the latest version of rollup and rollup-plugin-node-resolve? It looks like rollup is trying to bundle the CommonJS file specified in the browser field (d3-request/build/d3-request.js), not the ES Module of the module field (d3-request/index.js)

[ChipNowacek]

Thanks for the question.

Here's my package.json. I think everything is the latest available. You will see that I am confused about dependencies and devDependencies. Given that I'm building a bundle, shouldn't everything be a devDependency? Anyway...

{
  "name": "questions",
  "version": "1.0.0",
  "description": "Questions front end",
  "main": "src/scripts/main.js",
  "dependencies": {
    "d3": "^4.8.0",
    "bootstrap": "^4.0.0-alpha.6",
    "debug": "^2.6.4",
    "jquery": "^3.2.1",
    "tether": "^1.4.0"
  },
  "devDependencies": {
    "babel-preset-es2015-rollup": "^3.0.0",
    "cssnano": "^3.10.0",
    "d3": "^4.8.0",
    "d3-request": "^1.0.5",
    "d3-selection": "^1.0.5",
    "jquery": "^3.2.1",
    "livereload": "^0.6.2",
    "npm-run-all": "^4.0.2",
    "postcss-cssnext": "^2.10.0",
    "postcss-nested": "^1.0.1",
    "postcss-simple-vars": "^3.1.0",
    "rollup": "^0.41.6",
    "rollup-plugin-babel": "^2.7.1",
    "rollup-plugin-commonjs": "^8.0.2",
    "rollup-plugin-eslint": "^3.0.0",
    "rollup-plugin-node-resolve": "^3.0.0",
    "rollup-plugin-postcss": "^0.4.1",
    "rollup-plugin-replace": "^1.1.1",
    "rollup-plugin-uglify": "^1.0.2",
    "rollup-watch": "^3.2.2"
  },
  "scripts": {
    "prepublish": "./node_modules/.bin/rollup -c && uglifyjs js/questions.js -c -m -o js/questions.min.js",
    "build": "rollup -c",
    "dev": "rollup -c --watch",
    "reload": "livereload 'build/'",
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "npm-run-all --parallel dev reload"
  },
  "repository": {
    "type": "git",
    "url": "http://chip@git.twostewards.com/questions.git"
  },
  "author": "Two Stewards, LLC",
  "license": "None granted",
  "private": true
}

and my rollup.config.js

// Rollup plugins
import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';
import eslint from 'rollup-plugin-eslint';
import replace from 'rollup-plugin-replace';
import uglify from 'rollup-plugin-uglify';
import postcss from 'rollup-plugin-postcss';

// PostCSS plugins
import simplevars from 'postcss-simple-vars';
import nested from 'postcss-nested';
import cssnext from 'postcss-cssnext';
import cssnano from 'cssnano';

export default {
    entry: "src/scripts/main.js",
    format: "iife",
    sourceMap: "inline",
    moduleName: "Questions",
    dest: "build/js/main.min.js",
    plugins: [
        postcss({
            plugins: [
                simplevars(),
                nested(),
                cssnext({ warnForDuplicates: false, }),
                cssnano(),
            ],
            extensions: ['.css'],
        }),
        resolve({
            // use "jsnext:main" if possible
            // – see https://github.com/rollup/rollup/wiki/jsnext:main
            jsnext: true,  // Default: false

            // use "main" field or index.js, even if it's not an ES6 module
            // (needs to be converted from CommonJS to ES6
            // – see https://github.com/rollup/rollup-plugin-commonjs
            main: true,  // Default: true

            // some package.json files have a `browser` field which
            // specifies alternative files to load for people bundling
            // for the browser. If that's you, use this option, otherwise
            // pkg.browser will be ignored
            browser: true,  // Default: false
        }),
        commonjs(),
        eslint({
            exclude: [
                'src/styles/**'
            ]
        }),
        babel({  //transpiling
            exclude: 'node_modules/**'
        }),
        replace({
            ENV: JSON.stringify(process.env.NODE_ENV || 'development') // to enable or diable `debug`-based logging
        }),
        (process.env.NODE_ENV === 'production' && uglify()) // uglify only in production
    ]
    // plugins: [
    //     node(),
    //     resolve({
    //         // use "module" field for ES6 module if possible
    //         // module: true, // Default: true

    //         // not all files you want to resolve are .js files
    //         extensions: ['.js', '.json'],  // Default: ['.js']

    //         // whether to prefer built-in modules (e.g. `fs`, `path`) or
    //         // local ones with the same names
    //         preferBuiltins: false,  // Default: true

    //         // Lock the module search in this path (like a chroot). Module defined
    //         // outside this path will be mark has external
    //         jail: '/my/jail/path', // Default: '/'

    //         // If true, inspect resolved files to check that they are
    //         // ES2015 modules
    //         modulesOnly: true, // Default: false

    //         // Any additional options that should be passed through
    //         // to node-resolve
    //         customResolveOptions: {
    //             moduleDirectory: 'js_modules'
    //         }
    //     })
    //     ,
    //     commonjs({
    //         // non-CommonJS modules will be ignored, but you can also
    //         // specifically include/exclude files
    //         include: ['node_modules/**'],  // Default: undefined
    //         // exclude: ['node_modules/foo/**', 'node_modules/bar/**'],  // Default: undefined

    //         // search for files other than .js files (must already
    //         // be transpiled by a previous plugin!)
    //         // extensions: ['.js', '.coffee'],  // Default: [ '.js' ]

    //         // if true then uses of `global` won't be dealt with by this plugin
    //         // ignoreGlobal: false,  // Default: false

    //         // if false then skip sourceMap generation for CommonJS modules
    //         // sourceMap: false,  // Default: true

    //         // explicitly specify unresolvable named exports
    //         // (see below for more details)
    //         // namedExports: { './module.js': ['foo', 'bar'] },  // Default: undefined

    //         // sometimes you have to leave require statements
    //         // unconverted. Pass an array containing the IDs
    //         // or a `id => boolean` function. Only use this
    //         // option if you know what you're doing!
    //         ignore: ['conditional-runtime-dependency']
    //     })],
};

After reading Mike's words again in #998, I edited my .babelrc to this:

{
    "presets": [
        [
            "latest",
            {
                "es2015": {
                    "modules": false
                }
            }
        ]
    ],
    "plugins": [
        "external-helpers"
    ]
}

I'm now getting:

Chips-iMac:questions chipnowacek$ npm run build

> questions@1.0.0 build /Volumes/Internal Data HD/Users/chipnowacek/Development/questions
> rollup -c

🚨   (babel plugin) Couldn't find preset "latest" relative to directory "/Volumes/Internal Data HD/Users/chipnowacek/Development/questions"
src/scripts/main.js

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! questions@1.0.0 build: `rollup -c`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the questions@1.0.0 build script 'rollup -c'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the questions package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     rollup -c
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs questions
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls questions
npm ERR! There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/chipnowacek/.npm/_logs/2017-04-22T12_58_31_258Z-debug.log

Here's that log

Chips-iMac:questions chipnowacek$ cat /Users/chipnowacek/.npm/_logs/2017-04-22T12_58_31_258Z-debug.log
0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/Cellar/node/7.9.0/bin/node',
1 verbose cli   '/usr/local/bin/npm',
1 verbose cli   'run',
1 verbose cli   'build' ]
2 info using npm@4.5.0
3 info using node@v7.9.0
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle questions@1.0.0~prebuild: questions@1.0.0
6 silly lifecycle questions@1.0.0~prebuild: no script for prebuild, continuing
7 info lifecycle questions@1.0.0~build: questions@1.0.0
8 verbose lifecycle questions@1.0.0~build: unsafe-perm in lifecycle true
9 verbose lifecycle questions@1.0.0~build: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Volumes/Internal Data HD/Users/chipnowacek/Development/questions/node_modules/.bin:/Users/chipnowacek/.jenv/shims:/Users/chipnowacek/.jenv/bin:/Users/chipnowacek/.rbenv/shims:/Library/TeX/Distributions/.FactoryDefaults/TeXLive-2016/Contents/Programs/texbin:/usr/local/sbin:/Users/chipnowacek/.rbenv/shims:/Library/TeX/Distributions/.FactoryDefaults/TeXLive-2016/Contents/Programs/texbin:/usr/local/sbin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/X11/bin:/Library/TeX/texbin
10 verbose lifecycle questions@1.0.0~build: CWD: /Volumes/Internal Data HD/Users/chipnowacek/Development/questions
11 silly lifecycle questions@1.0.0~build: Args: [ '-c', 'rollup -c' ]
12 silly lifecycle questions@1.0.0~build: Returned: code: 1  signal: null
13 info lifecycle questions@1.0.0~build: Failed to exec build script
14 verbose stack Error: questions@1.0.0 build: `rollup -c`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:279:16)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at EventEmitter.emit (events.js:194:7)
14 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:40:14)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at ChildProcess.emit (events.js:194:7)
14 verbose stack     at maybeClose (internal/child_process.js:899:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid questions@1.0.0
16 verbose cwd /Volumes/Internal Data HD/Users/chipnowacek/Development/questions
17 verbose Darwin 16.5.0
18 verbose argv "/usr/local/Cellar/node/7.9.0/bin/node" "/usr/local/bin/npm" "run" "build"
19 verbose node v7.9.0
20 verbose npm  v4.5.0
21 error code ELIFECYCLE
22 error errno 1
23 error questions@1.0.0 build: `rollup -c`
23 error Exit status 1
24 error Failed at the questions@1.0.0 build script 'rollup -c'.
24 error Make sure you have the latest version of node.js and npm installed.
24 error If you do, this is most likely a problem with the questions package,
24 error not with npm itself.
24 error Tell the author that this fails on your system:
24 error     rollup -c
24 error You can get information on how to open an issue for this project with:
24 error     npm bugs questions
24 error Or if that isn't available, you can get their info via:
24 error     npm owner ls questions
24 error There is likely additional logging output above.
25 verbose exit [ 1, true ]

[ChipNowacek]

In the continuing saga, I find that babel-presets-latest is deprecated. According to babel-preset-env I've npm install babel-preset-env --save-dev and set my .babelrc to:

{
    "presets": [
        [
            "env",
            {
                "es2015": {
                    "modules": false
                }
            }
        ]
    ],
    "plugins": [
        "external-helpers"
    ]
}

And am now getting this error:

(babel plugin) It looks like your Babel configuration specifies a module transformer. Please disable it. See https://github.com/rollup/rollup-plugin-babel#configuring-babel for more information

So I'm going to head over there...

[fregante]

You don't need both env and es2015 presets

[ChipNowacek]

Oh. Thanks. Do you recommend one over the other? Maybe the "modules": false is required in this situation?

[ChipNowacek]

Changed .babelrc back to

{
    "presets": [
        [
            "es2015",
            {
                "modules": false
            }
        ]
    ],
    "plugins": [
        "external-helpers"
    ]
}

and am back to seeing the original errors:

⚠️   'select' is not exported by 'node_modules/d3/build/d3.js'
https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module
src/scripts/main.js (26:18)
24: import * as d3 from 'd3';
25: export function exec() {
26:   var sparql = d3.select('#sparql').property('value');
                      ^
27:   // var endpoint = d3.select("#endpoint").property("value")
28:   var endpoint = 'http://localhost:5820/naut/query?';

Somewhere I'm chasing my tail.

[ChipNowacek]

disambiguated project.json

  "name": "questions",
  "version": "1.0.0",
  "description": "Questions front end",
  "main": "src/scripts/main.js",
  "dependencies": {
    "d3": "^4.8.0",
    "bootstrap": "^4.0.0-alpha.6",
    "debug": "^2.6.4",
    "jquery": "^3.2.1",
    "tether": "^1.4.0"
  },
  "devDependencies": {
    "babel-plugin-external-helpers": "^6.22.0",
    "babel-preset-env": "^1.4.0",
    "babel-preset-es2015": "^6.24.1",
    "cssnano": "^3.10.0",
    "livereload": "^0.6.2",
    "npm-run-all": "^4.0.2",
    "postcss-cssnext": "^2.10.0",
    "postcss-nested": "^1.0.1",
    "postcss-simple-vars": "^3.1.0",
    "rollup": "^0.41.6",
    "rollup-plugin-babel": "^2.7.1",
    "rollup-plugin-commonjs": "^8.0.2",
    "rollup-plugin-eslint": "^3.0.0",
    "rollup-plugin-node-resolve": "^3.0.0",
    "rollup-plugin-postcss": "^0.4.1",
    "rollup-plugin-replace": "^1.1.1",
    "rollup-plugin-uglify": "^1.0.2",
    "rollup-watch": "^3.2.2"
  },
  "scripts": {
    "build": "rollup -c",
    "autobuild": "rollup -c --watch",
    "reload": "livereload 'build/'",
    "dev": "npm-run-all --parallel autobuild reload",
    "test": "echo \"Error: no test specified\" && exit 1",
    "production-build": "NODE_ENV=production rollup -c"
  },
  "repository": {
    "type": "git",
    "url": "http://chip@git.twostewards.com/questions.git"
  },
  "author": "Two Stewards, LLC",
  "license": "None granted",
  "private": true
}

same errors

[ChipNowacek]

I'm just going to start over. For those comfortable with the Sturm und Drang of all this, it's the best job security system ever devised.