Error: Appropriate Loader

[colbyfayock]

Hiya, I'm running into an issue where upon compile, it's saying that it's not getting properly run through an appropriate loader:

[ GATSBY] ✖ ｢wdm｣:
[ GATSBY] ERROR in ./node_modules/website-theme/src/components/layout.js 7:4
[ GATSBY] Module parse failed: Unexpected token (7:4)
[ GATSBY] You may need an appropriate loader to handle this file type.
[ GATSBY] | const TemplateWrapper = ({ children }) => {
[ GATSBY] |   return (
[ GATSBY] >     <div>
[ GATSBY] |
[ GATSBY] |       <main className="default-view">
[ GATSBY]  @ ./src/pages/index.js 13:0-61 34:29-35
[ GATSBY]  @ ./.cache/sync-requires.js
[ GATSBY]  @ ./.cache/app.js
[ GATSBY]  @ multi (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app
[ GATSBY] ℹ ｢wdm｣: Failed to compile.

I'm more than happy to try to repro this in an empty repo to get help, but before I do that, wondering if it's something silly I'm missing. Not getting this error on your example when running it, but I can't for the life of me find what I'm doing wrong...

Here's a few tastes of the code:

// website-theme/src/components/layout.js

import React from 'react';

import '../assets/stylesheets/theme.scss';

const TemplateWrapper = ({ children }) => {
  return (
    <div>

      <main className="default-view">

        { children }

      </main>

    </div>
  );
};

export default TemplateWrapper;

In the page I'm trying to use it on. It's just a standard Gatsby page:

// src/pages/index.js
...
import Layout from 'website-theme/src/components/layout';
...
<Layout>

gatsby develop works on the theme itself when running locally

I noticed some odd things going on when trying to run gatsby-plugin-resolve-src in both sources, so I'm only running that on the website repo, but not sure if that still has anything to do with the issue.

Config aside from that is pretty standard (i would think):

  ...
  __experimentalThemes: [
    {
      resolve: "website-theme",
      options: {},
    },
  ],
  plugins: [
    'gatsby-plugin-resolve-src',
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-sass',
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: 'src/pages',
        name: 'pages',
      },
    },
    {
      resolve: `gatsby-plugin-sitemap`,
      ...
    },
  ],
  ...

Any thoughts?

[colbyfayock]

"gatsby": "2.0.82", on both the theme and the website repo

[colbyfayock]

scratch that. i missed the entire node configuration somehow 🤦‍♀️

https://github.com/ChristopherBiscardi/gatsby-theme-examples/blob/281fd63802802aef3a57bc796e91c80c6ded49e3/themes/gatsby-theme-blog/gatsby-node.js