-
Notifications
You must be signed in to change notification settings - Fork 10.3k
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
webpack alias does not work in develop mode... #4089
Comments
Your error looks more like a babel-loader error than a problem with the alias. Maybe it can't compile it? |
@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). |
To clarify i think your error is unrelated to aliases in general. Normal webpack |
hm. if it's a problem with the underlying module / file, why would it work under |
IT might be related to dev only babel plugins...like react-hot-loader. That it works under |
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 |
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 |
well, the error is in the meantime, any tips on further debugging would be very much appreciated 🙏 - thanks again for the help 👍 |
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, adding logging here and re-enabling the 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)'
EDIT - trying different babel plugins gives the same result: |
i was able to track down the underlying issue: babel & webpack have a weird interaction around once i fixed that (by installing from a github url instead of using with that squared away, my issue is resolved. thanks again for the help! 🙏 |
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
(ordevelop
) it appears this setting is ignored (perhaps a webpack v1 issue).when i manually add a webpack alias via gatbsy's
modifyWebpackConfig
API, gatsbybuild
works as expected butdevelop
fails w/Error: WebpackError
while compiling html.jshere's
modifyWebpackConfig
in mygatsby-node.js
file:my issue seems similar to: #1654 but there's no obvious solution there.
the full error shown during `develop`
Environment
Gatsby version: v1.9.175
Node.js version: v8.9.4
Operating System: v10.13.2
The text was updated successfully, but these errors were encountered: