-
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
mapboxgl / Webpack error: self is undefined #7555
Comments
I should add I have tried the steps here (under fixing 3rd party modules): https://www.gatsbyjs.org/docs/debugging-html-builds/ but that also threw an error: WebpackError: (0 , _reactMapboxGl2.default) is not a function so I guess the solution is not to skip the module but to skip the uglification of the module ... |
I had the same problem, was hard to debug and hard to solve. exports.onCreateWebpackConfig = ({ stage, actions, getConfig }) => {
const config = getConfig();
let newConfig = {
...config,
module: {
...config.module,
noParse: /(mapbox-gl)\.js$/,
},
};
if (stage === 'build-html') {
newConfig = {
...newConfig,
module: {
...newConfig.module,
rules: [
...newConfig.module.rules,
{
test: /(mapbox-gl)\.js$/,
loader: 'null-loader',
},
],
},
};
}
actions.replaceWebpackConfig(newConfig);
}; |
@porfirioribeiro Thank you and sorry for the late reply. Unfortunately it did not work. Do I have to adjust anything in the Webpack config you pasted? |
Hey @dwehrmann. I hope you found a solution to this. I was able to get mine working with some logic inside the component to create a mock Map instance when it's in build. I'm also using react-mapbox-gl. let mapboxgl
let ReactMapboxGl = {}
if (typeof window !== `undefined`) {
mapboxgl = require('mapbox-gl')
ReactMapboxGl = require('react-mapbox-gl')
} else {
ReactMapboxGl.Map = () => {
return class Mock extends React.Component {
constructor() {
super()
}
render() {
return <div />
}
}
}
}
const Map = ReactMapboxGl.Map({
accessToken: '[your-token-here]',
})
class DirectoryMap extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<div className="directory-map">
<Map
ref={e => {
this.map = e
}}
zoom={[11]}
speed={[0.6]}
>
</Map>
</div>
)
}
} |
Hi @stemmlerjs – thank you! Similar to your solution, I was able to solve this by using class extends like that:
And in my gatsby-node.js:
note that I had to exclude isotope.js as well. Things are working now, thank you everyone! Hopefully this thread will be useful for somebody else as well. |
I know this issue is closed, but @porfirioribeiro's solution worked for me. Just pasted his code in gatsby-node.js Thank you very much! |
Hi guys, I'm working on a site which uses the mapbox-gl module, development mode works fine but it breaks in build stages. I am aware of the "(window/whatever) is undefined at build time" issue but I am unsure how to implement the solution. Almost all solutions I found revolve around Webpack configuration which is where I struggle in combination with Gatsby.
To be specific: Here seems to be the solution:
mapbox/mapbox-gl-js#4359 (comment)
but I don't know how to implement that in Gatsby. Do I have to put this in the Gatsby-node.js file? I have tried but without success. I'd be happy if someone could advise.
Here's my Gatsby-node.js:
`
const makeRequest = (graphql, request) =>
new Promise((resolve, reject) => {
// Query for nodes to use in creating pages.
resolve(
graphql(request).then(result => {
if (result.errors) {
reject(result.errors);
}
exports.createPages = ({ boundActionCreators, graphql }) => {
const { createPage } = boundActionCreators;
};`
The text was updated successfully, but these errors were encountered: