Error: `Unexpected token` when importing axios -- `node-resolve` should be first

[JWMB]

[!] Error: Unexpected token
node_modules\axios\package.json (2:9)
1: {
2:   "_from": "axios",
            ^

Same error as when importing axios into pure ES6 project and not having set browser: true for rollup-plugin-node-resolve. Simple test case: single js file containing

import axios from "axios";
window.process = window.process || { env: {} };
axios.get("http://httpbin.org/").then(response => console.log("Got length: " + response.data.length));

Using the below rollup.config.js produces the error, but when excluding rollup-plugin-typescript2 it works.

Versions

• node: 8.9.4
• typescript: 2.7.2
• rollup: 0.57.1
• rollup-plugin-typescript2: 0.12.0

rollup.config.js

import typescript from 'rollup-plugin-typescript2';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';

export default {
	input: 'src/main.js',
	output: {
		file: 'public/bundle.js',
		format: 'iife',
		sourcemap: true
	},
	plugins: [
		typescript(),
		resolve({ browser: true }),
		commonjs()
	]
};

[ezolenko]

Could you try suggestion made here: rollup/rollup-plugin-commonjs#28 (using rollup-plugin-json)

[JWMB]

Thanks, that seems to work (adding rollup-plugin-json as a plugin)!

The output is very different from rolling up the corresponding .js file though, with the iife signature becoming

var SomeName = (function (exports,tty,util,url,http,https,assert,stream,zlib)...

I was expecting rollup-plugin-typescript2 to basically run tsc with my tsconfig.config as a pre-rollup step, but when I do that (tsc first, then rollup without the typescript plugin) I get

var SomeName = (function (exports)...

I'm probably missing some config setting here..?

[ezolenko]

Are those other parameters used inside the function at all? Is the body the same in both cases?

[JWMB]

Yes, they are used, and there's an additional big chunk, starting with

 function createCommonjsModule(fn, module) {

in the middle of the body (when using the typescript plugin compared to using plain js as the source). A lot of it seems related to Node debugging functionality.
I've put up a minimal test case repo here.

[ezolenko]

Looking at your test repo, the plugin produces the same output tsc does. You can check for it in .rpt2_cache/xxx/code/xxx file -- look for code property of json inside. That is what gets passed to rollup.

The main difference in 2 results is when import axios from 'axios'; does -- in the cases of plain js rollup grabs axios/dist/axios.js -- webpacked build. In case of using the plugin axios/lib/axios.js is resolved.

Webpacked build is apparently the browser version that get magically found by rollup-plugin-node-resolve in browser mode.

If you put typescript plugin last in the chain, rollup uses node-resolve to resolve imports by itself, and everything is working as expected.

This line in your test repo:
tsPluginConf.plugins.splice(tsPluginConf.plugins.length - 1, 0, typescript());

This is the first time I've seen plugin order actually matter :). I'll update readme.

[ezolenko]

You probably don't need json plugin now either.

[giannif]

@ezolenko I was really thrown off by the readme 😬

It says:

rollup-plugin-node-resolve
Must be before this plugin in the plugin list, especially when browser: true option is used, see #66

I think I was thinking where do I put the typescript plugin, and then I read the next line and thought this plugin was referring to rollup-plugin-node-resolve.

Great work though! Thanks

[ezolenko]

Fixed, thanks :)