Problem accessing module

[galki]

Using this with webpack in Chrome I get the following error:

Not allowed to load local resource: file:///{path to project root}/{name of module trying to load}

[thgreasi]

Which version it's causing the issue? My tests using webpack as a packer seem to work.

What's your use case? Are you using babel in the browser?

Thodoris Greasidis

[galki]

Thanks for the fast response. I downloaded everything through npm yesterday so it should be he latest, and I downloaded this plugin using --save-dev

Here is my webpack config:

module.exports = {
    module: {           
        loaders: [
            {
                test: [/\.js$/, /\.jsx$/],
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015'],
                    plugins: ['system-import-transformer']
                }
            }
     },
     // other settings
}

The code looks like this:

System.import('expect').then(expect => {
    // more code 
})

[thgreasi]

I guess that 'expect' is an npm module, not a module of your own project. I'm I right? Last night I released v2.1.0 so please verify & report the version that you are using currently. I will try to reproduce, in the mean time any extra info / samples would be

very helpful.

Thodoris Greasidis

[galki]

Sorry, the version is 2.1.0 Yes, expect is an npm module.

My Chrome version is Version 51.0.2704.103 m and all flags are default, and the error in FF looks like this: Error: Script error for "{path to project root}/expect"

I'm not using any minifaction with webpack and I'm on Windows 10. Please let me know if you need more info.

[galki]

Also, I'm using require.js to load things like jquery from a cdn and then require the webpack generated code. Here are the errors:

[thgreasi]

Can you test it with firefox or use a web server for your pages? Chrome is a bit weird when doing ajax requests directly to the filesystem. Also, I would be very interested if you could share how the transformed code of:

System.import('expect').then(expect => {
    // more code 
})

looks like.

[galki]

Firefox gives these errors:

Error: Script error for "C:/xampp/htdocs/niqola/expect"
http://requirejs.org/docs/errors.html#scripterror

The transformed code looks like this

(typeof _systemImportTransformerGlobalIdentifier.define === 'function' && _systemImportTransformerGlobalIdentifier.define.amd ? new Promise(function (resolve, reject) {
    _systemImportTransformerGlobalIdentifier.require(['C:/xampp/htdocs/niqola/expect'], resolve, reject);
}) : typeof module !== 'undefined' && module.exports && "function" !== 'undefined' || typeof module !== 'undefined' && module.component && _systemImportTransformerGlobalIdentifier.require && _systemImportTransformerGlobalIdentifier.require.loader === 'component' ? Promise.resolve(__webpack_require__((18))) : Promise.resolve(_systemImportTransformerGlobalIdentifier['C:/xampp/htdocs/niqola/expect'])).then(function (expect) {
    // more code
});

[thgreasi]

Thanks for the transformed code. I know where to look now. I will check it this evening! (Obviously my bad.)

[thgreasi]

Do you also use any specific .babelrc configuration file that I should have in mind?

[galki]

Thanks!

I set my babel through the webpack config file only, so it's just the presets react and es2015

[thgreasi]

Just pushed some commits into master. Can you clone the repo into your project's node_modules, run a npm run-script build and then test & report if it works with your project?

[galki]

It appears the build fails at babel src --out-dir dist

I have npm@3.9.6 node@v4.4.5

[thgreasi]

That's weird since it passed on travis. Have you done an npm install in the babel-plugin-system-import-transformer's folder?

[galki]

Ok, that did it.

The generated code is now

(typeof _systemImportTransformerGlobalIdentifier.define === 'function' && _systemImportTransformerGlobalIdentifier.define.amd ? new Promise(function (resolve, reject) {
    _systemImportTransformerGlobalIdentifier.require(['expect'], resolve, reject);
}) : typeof module !== 'undefined' && module.exports && "function" !== 'undefined' || typeof module !== 'undefined' && module.component && _systemImportTransformerGlobalIdentifier.require && _systemImportTransformerGlobalIdentifier.require.loader === 'component' ? Promise.resolve(__webpack_require__((20))) : Promise.resolve(_systemImportTransformerGlobalIdentifier['expect'])).then(function (expect) {

 })

But the module is loaded not throught npm but an invalid url (niqola.dev/js/expect.js)

[thgreasi]

I think that this is an issue with your requirejs configuration. I will check it again later today, but I think that this is the equivalent require statement that UMD transformer generated from import expect from 'expect'. Check out the requirejs API. You probably need to configure the baseUrl and paths options to point expect to the npm_modules folder. eg:

requirejs.config({
    paths: {
        "backbone": "lib/backbone-1.1.0",
        "jquery": "lib/jquery-1.10.2",
        "underscore": "lib/lodash.underscore-2.3.0",
        "jqueryUI": "lib/jquery-ui.min",
        "expect": "node_modules/expect"
    }
});

[galki]

Thank you, that fixes it!

[thgreasi]

Great!, I will cut a release later today!

[thgreasi]

Just published v2.2.0 with the commits introduced for this issue. Thanks for your effort collaborating on this!

[galki]

Thanks for the plugin!