webpack alias does not work in develop mode...

[busticated]

i'm trying to use a module which presents the same API across browser and server / node.js contexts but uses different implementations for each and i'm hitting a weird issue.

i have a dependency that uses the browser field in package.json (info: https://github.com/defunctzombie/package-browser-field-spec) - when running gatsby build (or develop) it appears this setting is ignored (perhaps a webpack v1 issue).

when i manually add a webpack alias via gatbsy's modifyWebpackConfig API, gatsby build works as expected but develop fails w/ Error: WebpackError while compiling html.js

here's modifyWebpackConfig in my gatsby-node.js file:

exports.modifyWebpackConfig = ({ config, stage }) => {
    config.merge({
        resolve: {
            alias: {
                '@foo/bar': '@foo/baz/index.js'
            }
        }
    });

    return config;
};

my issue seems similar to: #1654 but there's no obvious solution there.

the full error shown during `develop`

error There was an error compiling the html.js component for the development server.

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND


  Error: WebpackError
  
  - option-manager.js:180 
    [my-site]/[babel-core]/lib/transformation/file/options/option-manager.js:180:17
  
  - Array.map
  
  - option-manager.js:158 Function.normalisePlugins
    [my-site]/[babel-core]/lib/transformation/file/options/option-manager.js:158:20
  
  - option-manager.js:234 OptionManager.mergeOptions
    [my-site]/[babel-core]/lib/transformation/file/options/option-manager.js:234:36
  
  - option-manager.js:368 OptionManager.init
    [my-site]/[babel-core]/lib/transformation/file/options/option-manager.js:368:12
  
  - index.js:212 File.initOptions
    [my-site]/[babel-core]/lib/transformation/file/index.js:212:65
  
  - index.js:135 new File
    [my-site]/[babel-core]/lib/transformation/file/index.js:135:24
  
  - pipeline.js:46 Pipeline.transform
    [my-site]/[babel-core]/lib/transformation/pipeline.js:46:16
  
  - index.js:46 transpile
    [my-site]/[babel-loader]/lib/index.js:46:20
  
  - fs-cache.js:79 
    [my-site]/[babel-loader]/lib/fs-cache.js:79:18
  
  - fs-cache.js:15 ReadFileContext.callback
    [my-site]/[babel-loader]/lib/fs-cache.js:15:14
  
  - From previous event:
  
  - develop-html.js:40 _callee$
    [my-site]/[gatsby]/dist/commands/develop-html.js:40:46
  
  - next_tick.js:131 _combinedTickCallback
    internal/process/next_tick.js:131:7
  
  - next_tick.js:180 process._tickCallback
    internal/process/next_tick.js:180:9

Environment

Gatsby version: v1.9.175
Node.js version: v8.9.4
Operating System: v10.13.2

[jquense]

Your error looks more like a babel-loader error than a problem with the alias. Maybe it can't compile it?

[busticated]

@jquense thanks for taking a look 👍

agree that it looks babel-related. #1654 mentions babel-plugin-webpack-alias which seems promising but i'm not sure how to point it at the underlying webpack.config.js file (or more broadly, how to properly wire it up).

[jquense]

To clarify i think your error is unrelated to aliases in general. Normal webpack alias, do work with gatsby (use them all the time) and the setup isn't special, is just like you are doing. I'm curious why you think the problem is the alias and not something related to the file itself

[busticated]

hm. if it's a problem with the underlying module / file, why would it work under gatsby build but not develop?

[jquense]

IT might be related to dev only babel plugins...like react-hot-loader. That it works under build would lead me to think it's definately not a webpack config issue. I wish the error was more descriptive, i think some info is getting removed by the pretty formatter

[busticated]

i got the impression from #1654 that babel does not participate in webpack's aliasing (iow, babel isn't aware of the substituted module). you've run successfully w/ an aliased module / path. did you need to adjust babel configs at all?

is there a way to disable the pretty formatter so i can see more of the error? i tried dropping console statements into develop-html but it gets transpiled when published so it's a bit hard to follow

[jquense]

i got the impression from #1654 that babel does not participate in webpack's aliasing

That is correct, what i'm trying to suggest is that the webpack alias has no bearing on your error, especially if it works when building, because the same webpack config is used then so the alias works fine there. I still unsure sure why you think the problem is related to that the error doesn't indicate anything other than an issue compiling a file

[busticated]

I still unsure sure why you think the problem is related to that the error doesn't indicate anything other than an issue compiling a file

well, the error is WebpackError, it only fails when running gatsby develop, and i'm only adjusting the alias setting so 🤷‍♂️ . perhaps the issue title could be refined given our findings (happy to do that if you have suggestions).

in the meantime, any tips on further debugging would be very much appreciated 🙏 - thanks again for the help 👍

[busticated]

some more info: i'm using a babel plugin to improve the dev UX of styled-components.

exports.modifyBabelrc = ({ babelrc }) => {
	return {
		...babelrc,
		plugins: babelrc.plugins.concat(['babel-plugin-styled-components'])
	};
};

the code above mirrors the extension pattern found here

when i remove this plugin, gatsby develop works fine.

adding logging here and re-enabling the babel-plugin-styled-components plugin, i see the following error when running develop:

Module build failed: ReferenceError: Unknown plugin "babel-plugin-styled-components"

Module build failed: ReferenceError: Unknown plugin "babel-plugin-styled-components" specified in "base" at 3, attempted to resolve relative to "foo/baz"
    at my-site/node_modules/babel-core/lib/transformation/file/options/option-manager.js:180:17
    at Array.map (<anonymous>)
    at Function.normalisePlugins (my-site/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
    at OptionManager.mergeOptions (my-site/node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
    at OptionManager.init (my-site/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (my-site/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (my-site/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at Pipeline.transform (my-site/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transpile (my-site/node_modules/babel-loader/lib/index.js:46:20)
    at my-site/node_modules/babel-loader/lib/fs-cache.js:79:18
    at ReadFileContext.callback (my-site/node_modules/babel-loader/lib/fs-cache.js:15:14)
    at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:420:13)
 @ ./src/app/Store.js 12:14-41',
  'Error: Cannot find module "@foo/bar"
    at webpackMissingModule (render-page.js:30777:80)
    at Object.exports.__esModule (render-page.js:30777:173)
    at __webpack_require__ (render-page.js:30:30)
    at Object.exports.__esModule (render-page.js:24505:15)
    at __webpack_require__ (render-page.js:30:30)
    at Object.<anonymous> (render-page.js:21817:12)
    at __webpack_require__ (render-page.js:30:30)
    at Object.<anonymous> (render-page.js:69:22)
    at __webpack_require__ (render-page.js:30:30)
    at Object.assign.i (render-page.js:50:18)'

@foo/bar is the server / node.js variant and foo/baz is the browser variant of the module i'm trying to alias

EDIT - trying different babel plugins gives the same result: Unknown plugin - so it doesn't seem to be an issue w/ babel-plugin-styled-components specifically. also, the module i'm trying to alias doesn't use babel in any way - it's plain es5 and rather boring overall

[busticated]

i was able to track down the underlying issue: babel & webpack have a weird interaction around npm link'ed modules (issue).

once i fixed that (by installing from a github url instead of using npm link), i ran into #3780 (uglify incompatible w/ es6) 🤦‍♂️

with that squared away, my issue is resolved. thanks again for the help! 🙏