I get "but could not be resolved – treating it as an external dependency"

[ghost]

Hi

I want to use roll-up with gulp, but I always get "but could not be resolved – treating it as an external dependency" and in the IIFE the import is treated as external variable. I'm using gulp, because I want to apply roll-up to multiple entries.

What I'm doing wrong ?

const rollup = require('gulp-rollup');
const resolve = require('rollup-plugin-node-resolve');

gulp.task('rollup', function () {
    return gulp.src('_01_src/js/form/*.js')
        .pipe(rollup({
                entry: '_01_src/js/form/controller.js',
                format: 'iife',
                plugins: [
                    resolve({
                        jsnext: true,
                        main: true,
                        browser: true
                    })
                ]
            })
        )

        .pipe(gulp.dest('_02_build/js/'));
});

[CodingMeUp]

And i meet same problem !!

• Config.js

  
  import uglify from 'rollup-plugin-uglify'
  import resolve from 'rollup-plugin-node-resolve'
  import babel from 'rollup-plugin-babel';
  import commonjs from 'rollup-plugin-commonjs';
  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/main.js', format: 'umd', dest: 'dist/bundle.min.js', sourceMap: true, plugins: [ resolve({ jsnext: true, main: true }), commonjs(), babel({ exclude: 'node_modules/**' }), uglify(), postcss({ plugins: [ simplevars(), nested(), cssnext({ warnForDuplicates: false, }), cssnano(), ], extensions: [ '.css' ], }) ] }

-----------------

> main.js
```javascript
import   'js/jsondiffpatch.min.js'
import  'js/jsondiffpatch-formatters.min.js'
import 'css/annotated.css'
import 'css/html.css'

class Customer {
    constructor(name) {
        this.name = name;
    }
    sayHi() {
        console.log(`The name is: ${this.name}`)
        console.info(`foo's Uppercase: ${_.upperCase('foo')}`)
    }
}

let kevin = new Customer('kevin');
kevin.sayHi();`

---

CMD get errors !

⚠️ 'js/jsondiffpatch.min.js' is imported by src\main.js, but could not be reso lved – treating it as an external dependency https://github.com/rollup/rollup/wiki/Troubleshooting#treating-module-as-externa l-dependency

⚠️ 'js/jsondiffpatch-formatters.min.js' is imported by src\main.js, but could not be resolved – treating it as an external dependency https://github.com/rollup/rollup/wiki/Troubleshooting#treating-module-as-externa l-dependency

⚠️ 'css/annotated.css' is imported by src\main.js, but could not be resolved – treating it as an external dependency https://github.com/rollup/rollup/wiki/Troubleshooting#treating-module-as-externa l-dependency

⚠️ 'css/html.css' is imported by src\main.js, but could not be resolved – tre ating it as an external dependency https://github.com/rollup/rollup/wiki/Troubleshooting#treating-module-as-externa l-dependency

[jlengstorf]

Hey, folks — questions like these are much better directed to the official Rollup issues (https://github.com/rollup/rollup). The issues you're hitting aren't related to the tutorial, so they don't really make sense here.

The short answer, though, is that the paths need to be relative.

So instead of:

import myScripts from 'js/myscripts';

Use:

import myScripts from './js/myscripts';

Good luck!