Tinacms: Cannot find module './locale'

[raulfdm]

Description

Hey guys.

I was trying to add TinaCMS into my Gatsby website but I'm stuck in the first step: add and run.

Basically I just add yarn add -D gatsby-plugin-tinacms (my project already uses styled-components. Then I copy and paste the snippet from the guide into my gatsby config:

    {
      resolve: 'gatsby-plugin-tinacms',
      options: {
        sidebar: {
          hidden: process.env.NODE_ENV === 'production',
          position: 'displace',
        },
        plugins: [
          // We'll add some Tinacms plugins in the next step.
        ],
      },
    },

and I got the following error:

 ERROR 

There was an error compiling the html.js component for the development server.

See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html  Cannot find module './locale'


> 1 | import { Moment } from './constructor';
    | ^
  2 | 
  3 | var proto = Moment.prototype;
  4 | 


  WebpackError: Cannot find module './locale'

  - prototype.js:1 webpackMissingModule
    node_modules/moment/src/lib/moment/prototype.js:1:1

  - prototype.js:1 Module../node_modules/moment/src/lib/moment/prototype.js
    node_modules/moment/src/lib/moment/prototype.js:1:1

  - moment.js:1 Module../node_modules/moment/src/lib/moment/moment.js
    node_modules/moment/src/lib/moment/moment.js:1:1

  - moment.js:1 Module../node_modules/moment/src/moment.js
    node_modules/moment/src/moment.js:1:1

  - DateTime.js:6 Object../node_modules/react-datetime/DateTime.js
    node_modules/react-datetime/DateTime.js:6:11

  - index.js:1 
    node_modules/tinacms/build/index.js:1:523

  - index.js:1 Object../node_modules/tinacms/build/index.js
    node_modules/tinacms/build/index.js:1:1359

  - gatsby-ssr.js:28 Object../node_modules/gatsby-plugin-tinacms/gatsby-ssr.js
    node_modules/gatsby-plugin-tinacms/gatsby-ssr.js:28:17

You can also check the log from my CI: https://github.com/raulfdm/raulmelo.dev/pull/501/checks?check_run_id=641054390

Steps to reproduce

Since my site is open-source, I create a branch/PR with the code so you can go from there.

• Clone this repo in this branch: https://github.com/raulfdm/raulmelo.dev/tree/add-cv-with-tina-cms
• install dependencies yarn
• run the script dev (yarn dev)

Expected result

Properly start my project

Actual result

It breaks my project. I can't run build or start

Environment

Tinacms Package Versions

npm ERR! extraneous: [email protected] /home/raulfdm/development/medium-blog/node_modules/is-empty
npm ERR! extraneous: [email protected] /home/raulfdm/development/medium-blog/node_modules/is-whitespace
npm ERR! extraneous: @babel/[email protected] /home/raulfdm/development/medium-blog/node_modules/@babel/plugin-proposal-numeric-separator/node_modules/@babel/core
npm ERR! missing: acorn@^7.1.0, required by [email protected]
npm ERR! peer dep missing: [email protected] || 2.x, required by [email protected]
npm ERR! extraneous: [email protected] /home/raulfdm/development/medium-blog/node_modules/eslint-config-react-app/node_modules/eslint-plugin-react-hooks
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: acorn@^7.1.1, required by [email protected]
npm ERR! missing: is-empty@latest, required by [email protected]
npm ERR! missing: is-whitespace@latest, required by [email protected]
npm ERR! peer dep missing: prop-types@>15, required by @tinacms/[email protected]
npm ERR! peer dep missing: prop-types@>15, required by @tinacms/[email protected]
npm ERR! peer dep missing: prop-types@>15, required by @tinacms/[email protected]
npm ERR! peer dep missing: prop-types@>15, required by @tinacms/[email protected]
npm ERR! peer dep missing: prosemirror-tables@^0.9.1, required by [email protected]
npm ERR! peer dep missing: prop-types@>15, required by @tinacms/[email protected]
npm ERR! missing: acorn@^7.1.0, required by [email protected]
├─┬ [email protected]
│ └─┬ [email protected]
│   ├── @tinacms/[email protected]
│   ├── @tinacms/[email protected]
│   ├─┬ @tinacms/[email protected]
│   ├─┬ @tinacms/[email protected]
│   ├─┬ @tinacms/[email protected]
│   ├── @tinacms/[email protected]
│   ├── @tinacms/[email protected]
│   ├── @tinacms/[email protected]
│   ├─┬ @tinacms/[email protected]
│   ├─┬ @tinacms/[email protected]
│   ├── @tinacms/[email protected]
│   ├── @tinacms/[email protected]
│   ├─┬ @tinacms/[email protected]
│   ├─┬ @tinacms/[email protected]
│   ├── @tinacms/[email protected]
│   └─┬ [email protected]
│     ├─┬ @tinacms/[email protected]

Tools

| Tool | Version |
| ------- | ------- |
| browser | irrelevant |
| os | WSL 2 - Ubuntu-18.04 |
| node | v12.15.0 |
| npm | v1.22.4 |

[nlindley]

It looks like this might be an issue in moment. Based on a comment in this issue, I was able to get it running with Yarn by adding a resolutions property to package.json.

{
  "resolutions": {
    "moment": "2.24.0"
  }
}

[raulfdm]

Nice @nlindley . thanks for this workaround...

[logan-anderson]

@ncphillips Should this be closed?