search

Js-Brecht / gatsby-plugin-pnpm

Provides PNPM compatible module resolvers to Webpack for Gatsby
MIT License
48 stars 6 forks source link

Error caused by missing framework.js when running gatsby develop #8

Closed marozzocom closed 3 years ago

marozzocom commented 3 years ago

Description

When running gatsby develop framework code (e.g. React source) seems to be bundled in commons.js instead of framework.js, but Gatsby still attempts to load the file within a <script> element. The missing file leads to the 404 page thus causing an error in the console.

To Reproduce

  1. Clone example repository
  2. Run pnpm install
  3. Run npm run start
  4. Open developer tools and console

Expected: No errors.

Observed: Error in console: Uncaught SyntaxError: Unexpected token '<'

Additional information

Observed using

This does not affect how the site works and does not seem to affect production builds at all, but it is annoying and led me to spend quite a bit of time investigating what was wrong in my configuration. It would be good if there was a way to fix the behavior, suppress the error or at least add a note to documentation.

I don't have enough knowledge to suggest this would be a "correct" fix, but changing the framework cacheGroup regexp seems to correct the issue, namely removing (?<!node_modules.*).

// gatsby-node.js

const FRAMEWORK_BUNDLES = [`react`, `react-dom`, `scheduler`, `prop-types`]

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    optimization: {
      splitChunks: {
        cacheGroups: {
          framework: {
            test: new RegExp(
              `[\\\\/]node_modules[\\\\/](${FRAMEWORK_BUNDLES.join(
                `|`
              )})[\\\\/]`
            )}}}}})}
Js-Brecht commented 3 years ago

All this plugin does is tell Webpack where to look for modules and loaders. The cacheGroup is configured in Gatsby core

Js-Brecht commented 3 years ago

So the problem is here... the issue is that with pnpm, there's ALWAYS two levels of node_modules.

Js-Brecht commented 3 years ago

Sorry, I think I got a little bit ahead of myself. It does make sense to add this configuration fix to this plugin instead of to the core. I can add that soon

Js-Brecht commented 3 years ago

@marozzocom care to try gatsby-plugin-pnpm@next?

Js-Brecht commented 3 years ago

The fix I used here can actually be implemented in the core, which is a better idea. That way there's only one source of truth for the framework bundles. So I've opened https://github.com/gatsbyjs/gatsby/pull/32701

I can publish this for now though, assuming it works for you. My tests were successful

marozzocom commented 3 years ago

After a very brief test, everything seems to be working, and the error is gone. 👍🏻 Thank you for the quick work, likewise for creating the PR in Gatsby -- I'll be following both to see where the change eventually goes!

Js-Brecht commented 3 years ago

Published in gatsby-plugin-pnpm@1.2.7