Inside toProps.js:

var myProp = "test";
export default myProp;

Inside entry.js:

import myProp from './toProps.js';

From what I see, you haven't exported the variable. Therefore, it can't be an 'import' inside entry.js.

Edit 1: Learn more about exporting here.

Edit 2:

Okay, to make it a global variable, here's what I did:

Move props.js into /dist and link it inside index.html, before bundle.js, or whatever you've named the output file.

Now it's a global variable, so you don't actually need to export or import it anywhere.

To test this, I made a file called test.js, imported it into entry.js. Inside test.js is:

const logTest = () => {
  console.log(myProp)
}
export default logTest;

Now inside entry.js, I invoked the function. It worked as expected and 'test' showed up in the console.

As you mentioned, your example is simplified, so this may not be viable for you. Maybe, you could move all the global variables to one file inside /dist, inside an object, as it's best not to pollute the global object.

Edit 3: Go with the answer from Jonas W. Totally forgot you could do that.

If you really need a global variable (no you dont!), use window:

  window.myProp = "test";

Otherwise just export it from your file and import it everywhere you need it. That maybe adds some overhead to your code, but actually you always know where the value comes from, which makes debugging super simple.

Using webpack 4

To update this post for anyone that can read it, acctually you can use a plugin in webpack.config.js to resolve names that used in another .js files.

Take a look in https://webpack.js.org/plugins/provide-plugin/ example:

Usage: jQuery

To automatically load jquery we can simply point both variables it exposes to the corresponding node module:

new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
});

Then in any of our source code:

// in a module
$('#item'); // <= just works
jQuery('#item'); // <= just works
// $ is automatically set to the exports of module "jquery"

If the source file to import belongs to maintainer, it's best to export first and import latter. Just like the answer of @Ibrahim.

I also encounter a situation to import third party source file just not using export syntax. So I think below is a solution while using webpack.

First, install exports-loader for your project.

npm install exports-loader --save-dev

Then, in your JS source file, import and use like below:

const WEBGL = require("exports-loader?WEBGL!three/examples/js/WebGL.js");
WEBGL.isWebGL2Available()

In my case, WEBGL is the inner variable I wish to import, three/examples/js/WebGL.js is the third party source file.

Hoping this is useful.