Posted in Uncategorized

[BUG?] npm link causes Webpack to look for babel-plugin in linked package node_modules.

   February 23, 2021  12 Comments on [BUG?] npm link causes Webpack to look for babel-plugin in linked package node_modules.

I’ve linked a package that is outside of the project by first running npm link in the outside package, then npm link name-of-package inside the project.

I am now getting this error:

Module build failed: ReferenceError: Unknown plugin "transform-es2015-arrow-functions" specified in "base" at 0, attempted to resolve relative to "/path/to/location/far/away/from/project/name-of-package"

Of course there’s no babel plugin there.

Author: Fantashit

12 thoughts on “[BUG?] npm link causes Webpack to look for babel-plugin in linked package node_modules.”

  1. I’m avoiding the issue by sticking with babel-core@6.1.21, the latest version I’ve found that works with npm link. I’ve been able to upgrade other babel loaders, plugins, and presets without issue in the meantime. I also have the latest webpack and webpack-dev-server. Just going to wait for a solution.

  3. I’m also having the same issue using babel-plugin-transform-async-to-generator, I just downgraded from babel-core@6.7.2 to babel-core@6.1.21 and it works…

    Update: Found a workaround:

    query: {
  presets: ['es2015', 'stage-0'],
  plugins: ['babel-plugin-transform-async-to-generator'].map(require.resolve)
}

    More info babel/babel-loader#166 (comment)

    Any update on this?

  4. Ah, the require.resolve trick makes it absolute, circumventing Webpack from looking for the plugin in the wrong place during build? Good workaround!

  5. Just a note that the require.resolve workaround only works up until Webpack version 1.12.15. Later versions use acorn instead of esprima as the JS parser, and this seems to prevent parsing of the JSON in the query string somehow.

  8. {symlinks: false} fixes the error, however it disrupts webpack’s watch function (and therefore webpack-dev-server will not recompile when changing files in the “linked” dependency).

    Anybody found another solution?

  12. My workaround (for webpack 3) which is compatible with webpack-dev-server:

    First set the resolve.modules property:

    resolve: { modules: [path.resolve(__dirname, 'node_modules'] }

    It is important that you supply the abs path to your node_modules

    The, for each babel preset and plugin, explicitly use require.resolve.

    query: {
    plugins: [ require.resolve('babel-plugin-transform-object-rest-spread')],
   presets: [ require.resolve('babel-preset-react') ..etc.. ]
}

    Note this means you need to explicitly move any babel setup you have in a babelrc file into your webpack config (in my case it was moving the plugins defs)

    This compiles and when I make a change in a yarn link‘d module, dev-server is picking up the changes

Comments are closed.