New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] "Unknown plugin" in linked or aliased modules while using babel-loader in Webpack. (T6942) #3969

Closed
babel-bot opened this Issue Jan 9, 2016 · 23 comments

Comments

Projects
None yet
8 participants
@babel-bot
Collaborator

babel-bot commented Jan 9, 2016

Issue originally made by @trusktr

Description

I've got an error that I thought I'd mention here. I'm not sure if it's a Babel problem or Webpack problem. I'm getting an error like this:

Module build failed: ReferenceError: Unknown plugin "transform-es2015-arrow-functions" specified in "base" at 0, attempted to resolve relative to "/home/trusktr/src/infamous+infamous"

where /home/trusktr/src/infamous+infamous is an NPM package that I've npm linked into my project. I also get the same error if I use Webpack's alias option instead of npm linking.

More details and a stack trace that goes through babel code here: webpack/webpack#1870

@babel-bot

This comment has been minimized.

Collaborator

babel-bot commented Jan 9, 2016

Comment originally made by @trusktr

Here's the stack trace for reference:

   at ./node_modules/babel-core/lib/transformation/file/options/option-manager.js:193:17
   at Array.map (native)
   at Function.normalisePlugins (./node_modules/babel-core/lib/transformation/file/options/option-manager.js:173:20)
   at OptionManager.mergeOptions (./node_modules/babel-core/lib/transformation/file/options/option-manager.js:271:36)
   at OptionManager.init (./node_modules/babel-core/lib/transformation/file/options/option-manager.js:416:10)
   at File.initOptions (./node_modules/babel-core/lib/transformation/file/index.js:191:75)
   at new File (./node_modules/babel-core/lib/transformation/file/index.js:122:22)
   at Pipeline.transform (./node_modules/babel-core/lib/transformation/pipeline.js:42:16)
   at transpile (./node_modules/babel-loader/index.js:14:22)
   at ./node_modules/babel-loader/lib/fs-cache.js:145:18
   at ./node_modules/babel-loader/lib/fs-cache.js:28:23
@babel-bot

This comment has been minimized.

Collaborator

babel-bot commented Jan 9, 2016

Comment originally made by @loganfsmyth

@trusktr This is very likely to be a misunderstanding and/or a misconfiguration on your end, so more info will be needed.

  • Where is the transform-es2015-arrow-functions being enabled? You haven't shown your .babelrc or your webpack config so it's very hard to say more.
  • Is this module precompiled, or are you expecting Babel to compile it for you? Is the issue here that Babel shouldn't be processing it at all, but is and is therefore failing, or is the issue that Babel is processing as but failing due to a config error?

I'll elaborate on what that error means in the hopes of shedding more light on things. For every file that Babel processes, it will take any global config params, like those passed to babel-loader, and merge them with .babelrc config. Then it will go through each preset/plugin and try to find its location, relative to the file being transpiled.

That error basically means that Babel is unable to find a plugin transform-es2015-arrow-functions inside the infamous+infamous module. That leaves a few possibilities, you may have misconfigured babel-loader to apply that transform to every file, rather than a subset of files which can properly resolve that plugin relative to themselves. The fact that your babel-core module lives in .meteor/local/rocket-module/platform-builds/web.browser/node_modules is weird, since if your plugin were installed into that folder, and then you have a JS file outside web.browser, it would be unable to find the plugin.

Anyway, a full description of your filesystem structure and Webpack and Babel config will be needed to track this down more.

@babel-bot

This comment has been minimized.

Collaborator

babel-bot commented Jan 10, 2016

Comment originally made by @trusktr

Is this module precompiled, or are you expecting Babel to compile it for you? Is the issue here that Babel shouldn't be processing it at all, but is and is therefore failing, or is the issue that Babel is processing as but failing due to a config error?

I'm not sure. In my Webpack config, I have it set to ignore the local node_modules folder, but as you can see in my previous post, the alias method isn't pointing to a location inside node_modules, so I would think that Webpack will apply the Babel transform to the files if necessary. The files in the external location are CommonJS format, so they might need language processing.

@babel-bot

This comment has been minimized.

Collaborator

babel-bot commented Jan 10, 2016

Comment originally made by @trusktr

The fact that your babel-core module lives in .meteor/local/rocket-module/platform-builds/web.browser/node_modules is weird, since if your plugin were installed into that folder, and then you have a JS file outside web.browser, it would be unable to find the plugin.

In my previous comment, when I described the alias /path/to/A/infamous, the /path/to/A/ corresponds to .meteor/local/rocket-module/platform-builds/web.browser/node_modules.

But, nonetheless, I don't think it should matter at all where the project is located; running npm link infamous (or linking any other library) shouldn't cause this problem since npm link is a common thing for people to do in local development. Know what I mean?

As a side note, the files in the external infamous actually don't even need any processing by Babel (they are already compiled by Babel in npm prepublish of that package), but even so (even if they do get processed) a simple npm link <package> shouldn't cause the problem.

@babel-bot

This comment has been minimized.

Collaborator

babel-bot commented Jan 10, 2016

Comment originally made by @trusktr

@loganfsmyth

Where is the transform-es2015-arrow-functions being enabled? You haven't shown your .babelrc or your webpack config so it's very hard to say more.

I've got project "A", and inside of project I my webpack.config.js looks like this:

var path = require('path')
var webpack = require('webpack')

module.exports = {
    entry: {
         'mom2015': './javascripts/mom2015/main.js',
         'webglearth': './javascripts/webglearth/main.js',
         'clobe': './javascripts/clobe/main.js',
         'flipDiagonal': './javascripts/flipDiagonal/main.js',
         'passwordReveal': './javascripts/passwordReveal/main.js',
         'calendar': './javascripts/calendar/main.js',
         'password': './javascripts/password/main.js',

         'giants': './javascripts/giants/main.js',
         'greg5050': './javascripts/greg5050/main.js',
         'johnnyCrook': './javascripts/johnnyCrook/main.js',
         'scrollViewTest': './javascripts/scrollViewTest/main.js',
    },
    output: {
        path: path.resolve(__dirname, '../js'),
        filename: '[name].bundle.js',
    },
    plugins: [
        //new webpack.optimize.CommonsChunkPlugin('shared-modules.js'),
    ],
    resolve: {
        extensions: [
            '', '.js', '.jsx', '.css',
        ],
        root: [ path.resolve(__dirname, 'node_modules') ],
        alias: {
            'famous': 'famous/src'
        },
    },
    resolveLoader: {
        root: [ path.resolve(__dirname, 'node_modules') ]
    },
    module: {
        loaders: [

            // Support for ES6 modules and the latest ES syntax.
            {
                test: /\.jsx?$/,
                loader: 'babel',
                exclude: /node_modules/,
                query: {
                    cacheDirectory: true,
                    presets: [
                        //'es2015', // specified manually below.
                        'react' // for React JSX.
                    ],
                    plugins: [

                        // es2015 preset, manual version:
                        'transform-es2015-arrow-functions',
                        'transform-es2015-block-scoped-functions',
                        'transform-es2015-block-scoping',
                        'transform-es2015-classes',
                        'transform-es2015-computed-properties',
                        'transform-es2015-destructuring',
                        'transform-es2015-for-of',
                        'transform-es2015-function-name',
                        'transform-es2015-literals',
                        'transform-es2015-modules-commonjs',
                        'transform-es2015-object-super',
                        'transform-es2015-parameters',
                        'transform-es2015-shorthand-properties',
                        'transform-es2015-spread',
                        'transform-es2015-sticky-regex',
                        'transform-es2015-template-literals',
                        'transform-es2015-typeof-symbol',
                        'transform-es2015-unicode-regex',
                        'transform-regenerator', // not needed in Chrome or Firefox. Soon won't be needed in Edge or Safari.

                        'transform-async-to-generator',

                        'transform-es5-property-mutators',
                    ],
                },
            },

            // For loading CSS files.
            { test: /\.css$/, loader: 'style!css' },

            //images
            {
                test: /\.(png|jpg|jpeg)$/,
                loader: 'file',
                //loader: 'url',
            },

        ]
    },
    devtool: 'source-map',
    //cache: webpackCacheObject[platform],
}

The package.json looks like this:

{
    "name": "trusktr.io",
    "version": "0.0.0",
    "dependencies": {
        "army-knife": "^0.2.1",
        "async": "^0.9.0",
        "big.js": "2.5.1",
        "bignumber.js": "1.4.1",
        "bootstrap": "3.2.0",
        "bootstrap-datepicker": "1.4.0",
        "famous": "git+https://github.com/trusktr/famous.git#trusktr",
        "infamous": "^0.1.0",
        "james-bond": "^0.0.0",
        "jquery": "2.1.1",
        "jquery-tooltipster": "git+https://github.com/trusktr/tooltipster.git#npm",
        "jsfromhell": "git+https://github.com/trusktr/JSFromHell.git#npm",
        "jss": "^0.10.1",
        "jss-nested": "^0.1.4",
        "leaflet": "^0.7.7",
        "operative": "^0.3.2",
        "string": "^3.0.0"
    },
    "devDependencies": {
        "webpack": "^1.12.3",
        "regenerator": "^0.8.0",

        "babel-core": "^6.0.0",
        "babel-loader": "^6.0.0",
        "babel-polyfill": "^6.0.0",

        "babel-preset-react": "^6.0.0",

        "babel-plugin-transform-es2015-arrow-functions": "^6.0.0",
        "babel-plugin-transform-es2015-block-scoped-functions": "^6.0.0",
        "babel-plugin-transform-es2015-block-scoping": "^6.0.0",
        "babel-plugin-transform-es2015-classes": "^6.0.0",
        "babel-plugin-transform-es2015-computed-properties": "^6.0.0",
        "babel-plugin-transform-es2015-destructuring": "^6.0.0",
        "babel-plugin-transform-es2015-for-of": "^6.0.0",
        "babel-plugin-transform-es2015-function-name": "^6.0.0",
        "babel-plugin-transform-es2015-literals": "^6.0.0",
        "babel-plugin-transform-es2015-modules-commonjs": "^6.0.0",
        "babel-plugin-transform-es2015-object-super": "^6.0.0",
        "babel-plugin-transform-es2015-parameters": "^6.0.0",
        "babel-plugin-transform-es2015-shorthand-properties": "^6.0.0",
        "babel-plugin-transform-es2015-spread": "^6.0.0",
        "babel-plugin-transform-es2015-sticky-regex": "^6.0.0",
        "babel-plugin-transform-es2015-template-literals": "^6.0.0",
        "babel-plugin-transform-es2015-typeof-symbol": "^6.0.0",
        "babel-plugin-transform-es2015-unicode-regex": "^6.0.0",
        "babel-plugin-transform-regenerator": "^6.0.0",

        "babel-plugin-transform-async-to-generator": "^6.0.0",

        "babel-plugin-transform-es5-property-mutators": "^6.0.0",

        "raw-loader": "^0.5.0",
        "glslify-loader": "^1.0.2",

        "css-loader": "^0.22.0",
        "style-loader": "^0.13.0",

        "url-loader": "^0.5.6",
        "file-loader": "^0.8.4"
    }
}

Inside of this project "A", if I run npm install then webpack to compile everything, all goes as expected.

The problem happens when I npm link infamous so that now the node_modules folder contains a symlink to infamous which is located externally in the system, at /home/trusktr/src/infamous+infamous as seen in the above error message. Now, when I run webpack, I get the described error.

Another way to get the error is, instead of npm linking infamous, if I change the Webpack alias option to

        alias: {
            'famous': 'famous/src'
            'infamous': '/home/trusktr/src/infamous+infamous'
        },

then that will also cause the exact same error message.

Even if I copy the infamous folder into my project, and make an alias like

        alias: {
            'famous': 'famous/src'
            'infamous': '/path/to/A/infamous'
        },

then I still get the same error.

I'll push a reproduction soon.

@babel-bot

This comment has been minimized.

Collaborator

babel-bot commented Jan 10, 2016

Comment originally made by @trusktr

By the way, in case it matters, I'm using NPM v3.5.x in the above reproduction.

@babel-bot

This comment has been minimized.

Collaborator

babel-bot commented Jan 10, 2016

Comment originally made by @trusktr

Alright, I have a repro. Run the following:

git clone https://github.com/trusktr/site.git
git clone https://github.com/infamous/infamous.git
npm install -g webpack # might require sudo
cd infamous
git checkout f149d803c2e
npm run prepublish
npm link # might require sudo
cd ../site/public/.src
git checkout 4936a1dfa6
npm install
webpack # <--------- it works
npm link infamous
webpack # <---------- error

That will output the errors in the console.

@babel-bot

This comment has been minimized.

Collaborator

babel-bot commented Feb 11, 2016

Comment originally made by Darren (ironsidevsquincy)

Also getting this issue

Almost certainly because when linking it creates a symbolic link, and babel is getting confused (trying to get the plugins relative to the target, rather than the link)

May be way off base, but possibly related to 8fd543e#diff-75a0292ed78043766c2d5564edd84ad2R55

@babel-bot

This comment has been minimized.

Collaborator

babel-bot commented Mar 3, 2016

Comment originally made by @tlrobinson

I'm also seeing this with npm link'd modules. This sounds like the same issue: babel/babel-loader#149

@babel-bot

This comment has been minimized.

Collaborator

babel-bot commented Mar 8, 2016

Comment originally made by Sunny Hirai (thesunny)

Also seeing this problem.

In case it adds anything, I'm also trying to do this through Meteor.

@babel-bot

This comment has been minimized.

Collaborator

babel-bot commented Mar 16, 2016

Comment originally made by Casey Occhialini (DocOcch)

This stackoverflow solution fixed the issue for me:

http://stackoverflow.com/questions/34574403/how-to-set-resolve-for-babel-loader-presets/

@babel-bot

This comment has been minimized.

Collaborator

babel-bot commented Apr 23, 2016

Comment originally made by @Awk34

@dococch Thanks for the link! This solved my problem as well.

I'm running Babel inside of a Yeoman generator that I have locally and npm linked.

@thisconnect

This comment has been minimized.

thisconnect commented Oct 5, 2016

Almost certainly because when linking it creates a symbolic link, and babel is getting confused (trying to get the plugins relative to the target, rather than the link)

Having this issue too, using rollup + babel.

@hzoo

This comment has been minimized.

Member

hzoo commented Dec 14, 2016

require.resolve should cover npm link, can make another issue if there's still issues.

Example https://github.com/facebookincubator/create-react-app/blob/7408e36478ea7aa271c9e16f51444547a063b400/packages/babel-preset-react-app/index.js#L15

@hzoo hzoo closed this Dec 14, 2016

@idangozlan

This comment has been minimized.

idangozlan commented Mar 15, 2017

Any solution? I bumped into the same issue (using npm link + babel = unkown plugin ...)

@benbernard

This comment has been minimized.

benbernard commented Mar 16, 2017

@hzoo I also encountered the same issue, doesn't seem like this has actually been resolved?

@loganfsmyth

This comment has been minimized.

Member

loganfsmyth commented Mar 16, 2017

The approach @hzoo mentioned would be changing

plugins: [
  'transform-es2015-arrow-functions',
],

to

plugins: [
  require('babel-plugin-transform-es2015-arrow-functions'),
],

which should pass in the plugin directly and avoid the path looking.

We're also planning to revisit this behavior in Babel 7.x to hopefully make stuff like this less likely to fail.

@Judahmeek Judahmeek referenced this issue May 5, 2017

Closed

Update Tabs #151

@brmscheiner

This comment has been minimized.

brmscheiner commented Sep 11, 2017

@loganfsmyth What if my project has babel but not webpack? I can't use require in .babelrc because it's pure JSON

@loganfsmyth

This comment has been minimized.

Member

loganfsmyth commented Sep 11, 2017

@brmscheiner Plugins referenced by a .babelrc file are resolved relative to the .babelrc, so I'd expect the plugin to be installed in the node_modules relative to that file.

@brmscheiner

This comment has been minimized.

brmscheiner commented Sep 11, 2017

@loganfsmyth ah, that sheds light on things. My problem is that .babelrc and node_modules are in the same directory, but after packaging my electron app on certain systems they are not. So I think I should take this up with electron folks. Thanks for the help!

@donaldpipowitch

This comment has been minimized.

donaldpipowitch commented Mar 16, 2018

We're also planning to revisit this behavior in Babel 7.x to hopefully make stuff like this less likely to fail.

Was this behavior changed in 7.x or is it still considered?

@loganfsmyth

This comment has been minimized.

Member

loganfsmyth commented Mar 16, 2018

@donaldpipowitch You can keep an eye on #6766. My PR at #7358 is the first attempt at a proposed approach but we're still kind of in flux about how nicely that approach will fit what people expect.

@donaldpipowitch

This comment has been minimized.

donaldpipowitch commented Mar 16, 2018

Cool, thank you!

@lock lock bot added the outdated label Jun 15, 2018

@lock lock bot locked as resolved and limited conversation to collaborators Jun 15, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.