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

[!] 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]

Fixed, thanks 😃

[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.