Error when adding a webpack plugin #2190
Answered
by
jmikrut
lynndylanhurley
asked this question in
Q&A
-
Bug ReportI tried to add the Here is the config I tried: export default buildConfig({
// ...
admin: {
// ...
webpack: (config) => {
const envPlugin = new webpack.EnvironmentPlugin({
HEROKU_BRANCH: 'main',
HEROKU_APP_NAME: 'my-app-name'
});
config.plugins = [envPlugin, ...config.plugins];
return config;
}
},
// ...The app crashed with the following error: |
Beta Was this translation helpful? Give feedback.
Answered by
jmikrut
Feb 27, 2023
Replies: 2 comments 2 replies
-
|
Hey @lynndylanhurley — this is actually because the Webpack plugin you're using relies on some Node-only modules. But - - the Payload config is executed in both Node and in your browser, which is where all of these errors are coming from. You need to use a Webpack alias to tell Webpack to ignore that package for its browser JS, which will allow you to circumvent this issue. See more in our docs here: I will convert this to a discussion but am happy to continue to help! |
Beta Was this translation helpful? Give feedback.
2 replies
-
|
Thanks @jmikrut ! I'll try this ASAP |
Beta Was this translation helpful? Give feedback.
-
|
For anyone with this problem, this config is working for me: import { buildConfig } from 'payload/config';
import webpack from 'webpack';
import dotenv from 'dotenv';
import path from 'path';
// ...
const mockModulePath = path.resolve(__dirname, 'mocks/emptyObject');
dotenv.config({ path: __dirname + '/../../../.env' });
export default buildConfig({
// ...
admin: {
// ...
webpack: (config) => {
const envPlugin = new webpack.EnvironmentPlugin([
'CMS_PORT',
'NEXT_JS_PORT',
'HEROKU_BRANCH',
'HEROKU_APP_NAME'
]);
config.plugins.unshift(envPlugin);
config.resolve.alias = {
...config.resolve.alias,
webpack: mockModulePath
};
return config;
}
},
// ....
}); |
Beta Was this translation helpful? Give feedback.
Answer selected by
zubricks
-
|
Is using fallback ( |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hey @lynndylanhurley — this is actually because the Webpack plugin you're using relies on some Node-only modules. But - - the Payload config is executed in both Node and in your browser, which is where all of these errors are coming from. You need to use a Webpack alias to tell Webpack to ignore that package for its browser JS, which will allow you to circumvent this issue.
See more in our docs here:
https://payloadcms.com/docs/admin/webpack#aliasing-server-only-modules
I will convert this to a discussion but am happy to continue to help!