Netlify-cms: Can modules imported into cms.js for netlify-cms be resolved relative to one specified directory?

[vai0]

It seems like imports and the imported module's dependencies in the cms.js module must be all be relative. Is there a workaround to allowing absolute imports, something similar along the lines of webpack config's resolve?

The reason I ask is because I'm importing a React component, but that react component is coming from a project where all dependencies are absolute relative to a specified folder.

i.e.,

// cms.js
import CMS from "netlify-cms";

import StandardLandingPagePreview from "./components/preview-templates/StandardLandingPagePreview";

CMS.registerPreviewTemplate('lp-standard', StandardLandingPagePreview)

// StandardLandingPagePreview.js
import React from "react";

import BaseLayout from "components/layouts/BaseLayout";
import StandardLandingPage from "components/StandardLandingPage";

export default class StandardLandingPagePreview extends React.Component {
    render() {
        ...
        );
    }
}

This will throw error:

 ERROR  Failed to compile with 2 errors                                                                                14:06:49

These dependencies were not found:

* components/StandardLandingPage in ./src/components/preview-templates/StandardLandingPagePreview.js
* components/layouts/BaseLayout in ./src/components/preview-templates/StandardLandingPagePreview.js

To install them, you can run: npm install --save components/StandardLandingPage components/layouts/BaseLayout

Applicable Versions:

• Netlify CMS version: 2.3.3
• Git provider: Gitlab
• OS: Mac OS 10.14

Additional context
I am running netlify-cms with GatsbyJS via gatsby-plugin-netlify-cms

[talves]

@vai0 where do the components exist? In your Gatsby project?

Shouldn't your imports be relative to the StandardLandingPagePreview.js

// StandardLandingPagePreview.js
import React from "react";

import BaseLayout from "../layouts/BaseLayout";
import StandardLandingPage from "../StandardLandingPage";

export default class StandardLandingPagePreview extends React.Component {
    render() {
        ...
        );
    }
}

[vai0]

@talves Yes they exist in my Gatsby project under src/components

Yes I can do that, but that would only solve that one layer of imports. I'd get more errors from the modules that BaseLayout and StandardLandingPage depend on, since the imports in those components are written in the format of components/....

My entire Gatsby project is written in the format of being able to import relative to the src directory, so changing all my import statements wouldn't really be feasible.

Is there some sort of function that exposes netlify-cms' webpack.config such that it can be editable? This way I can add a resolve relative to src which may solve this issue.

[talves]

For a Gatsby project you would refer to their docs on how to expose the webpack.config.

[vai0]

@talves Yes, but that only exposes Gatsby's webpack.config. Gatsby begins building/running netlify-cms outside and after its own build process.

[talves]

Yes, but if you look at the gatsby-plugin-netlify-cms project. Specifically the gatsby-node.js code. You will see that it is using the Gatsby webpack config, because it is itself extending the config. So you would just extend the Gatsby webpack config to have the alias paths you need.

Gatsby is bundling up and extending the netlify-cms project during the build and using the configuration that the plugin gives it.

[vai0]

What doesn't make sense though is only in the cms.js module it isn't picking up webpack config changes in my Gatsby project's gatsby-node.js, which is used to resolve all the imports in the fashion they're written now in my entire project.

// gatsby-node.js
exports.onCreateWebpackConfig = ({ stage, actions, plugins, loaders }) => {
    let config = {
        resolve: {
            modules: [path.resolve(__dirname, "src"), "node_modules"],
        },
        plugins: ...
    };

    actions.setWebpackConfig(config);
};

[erquhart]

Guessing onCreateWebpackConfig from your plugins (such as the cms plugin) is being run _before_ any use of it in gatsby-node.js, which makes sense, but isn't helpful for the unique setup that the Netlify CMS plugin has. I'd recommend asking the Gatsby community, or maybe even opening an issue over there. This is a generic issue of understanding how your own webpack configuration customizations can be pulled in by plugins.

[BrunoBernardino]

@vai0 I'm also running into this issue. Did you resolve it? I'm still early in this project so I can switch the import paths for now, but would prefer to use absolute (or relative to src).

[vai0]

@BrunoBernardino I have a PR up that I'm currently using in my project. Feel free to finish it up

https://github.com/gatsbyjs/gatsby/pull/11947

[erquhart]

We can track this in the Gatsby PR, thanks for opening @vai0!

[andru]

This might be fixed for a specific use case, but it hasn't resolved webpack resolve plugins like directory-named-webpack-plugin or custom loaders.

To help anyone else running into related problems: The problem is that any webpack config you have in your gatsby-node.js in the project root is loaded _after_ gatsby-plugin-netlify-cms has been run and copied over the gatsby webpack config to build netlify-cms.

I've found the easiest workaround is to just move my custom webpack config from the gatsby-node.js in the project root into a custom plugin, and add it as the first plugin so that config is available to all other plugins, including netlify-cms.

Maybe there's another lifecycle hook to add webpack config before plugins are run but if there is I can't find it.

[erquhart]

Agreed, we should note this in the gatsby-plugin-netlify-cms docs, the Gatsby guide in our docs, and on the Gatsby Netlify CMS starter.

[apolopena]

@andru Yes this is what I had to do too.