score:2

Accepted answer

You're getting that message because you're importing scaleLinear into your config file, rather than your app. Remove that line from the config file and you won't get the warning.

Strictly speaking, your src/scripts/main.js file should look like this:

import { scaleLinear } from 'd3-scale';

var yScale = scaleLinear() // <-- note there's no `d3.`
    .domain([10, 1200])
    .range([0, 500]);

console.log(yScale(1200)); // 500

In that case, you may need to tweak your config file, depending on what you want to do:

1. Bundle d3-scale into your app (recommended)

If you wanted to actually include d3-scale and its dependencies in the bundle Rollup creates so that you don't need to load D3 as a separate <script> tag, you would need to include the node-resolve plugin so that Rollup could find the d3-scale source code to include it.

This is what you'll need to do if you don't want to include D3 from unpkg.com.

2. Tell Rollup what d3-scale is

At the moment your app works because window.d3 is assigned to D3. That's totally fine and will work (you wouldn't even need the import declaration at all), but if you wanted to use the more idiomatic ES module approach without bundling d3-scale then you would need to add the following to your config:

import babel from 'rollup-plugin-babel';

export default {
  entry: 'src/scripts/main.js',
  dest: 'build/js/main.min.js',
  format: 'iife',

  // tell Rollup that d3-scale is an external package
  // and that it corresponds to `window.d3`
  external: ['d3-scale'],
  globals: {
    'd3-scale': 'd3'
  },

  plugins: [
    babel({
      exclude: 'node_modules/**',
    }),
  ],
};

Related Query

More Query from same tag