kuflash / react-router-sitemap

Generate sitemap.xml by React Router configuration
MIT License
251 stars 57 forks source link

Cannot find module 'components' #88

Open glothos opened 5 years ago

glothos commented 5 years ago

Hi there, first of all thanks for maintaining this package for so long.

I'm using webpack for this project and I've been trying to create its sitemap. I'm getting this error when running script to build the sitemap: "sitemap:create": "node ./src/sitemap-builder.js",

Here's my router file:

import {
  AuthorizationHandler,
  App,
  ConfirmDialog,
  HotNotification,
  Main,
  Notification,
  PrintContent,
  PaginationComponent,
} from 'components';
...
const Router = () => (
  <Main>
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/+*" component={PublicProfile} />
        <Route path="/about" component={About} />
        <Route
          path="/signup/:type"
          render={({ match }) => (
            <Redirect
              to={{
                pathname: '/',
                search: `?preset_role=${match.params.type}`,
              }}
            />
          )}
          exact
        />
        <Route exact path="/features" component={Features} />
        <Route exact path="/pricing" component={Pricing} />
        <Route exact path="/products" component={MarketPlace} />
        <Route exact path="/products/:id" component={MarketPlaceDetails} />
        <Route exact path="/team" component={Team} />
        <Route exact path="/terms" component={TermsOfService} />
        <Route exact path="/privacy" component={PrivacyPolicy} />
        <Route path="*" component={AuthorizedRoutes} />
      </Switch>
    </BrowserRouter>
    <Notification />
    <ConfirmDialog />
    <PrintContent />
    <PaginationComponent />
    <HotNotification />
  </Main>
);

and here's sitemap-builder.js

require('babel-register');

const router = require('./router').default;
const Sitemap = require('react-router-sitemap').default;

const filterConfig = {
  isValid: false,
  rules: [
    /\/signup/,
    /\*/,
  ],
};
const sampleProducts = [];

function generateSampleProducts(qty) {
  return [...Array(qty)].map((_, index) => sampleProducts.push(index));
}
generateSampleProducts(100);

console.log(sampleProducts);

const products = {
  id: sampleProducts,
};
const params = {
  'products/:id': [products],
};

(
  new Sitemap(router)
    .filterPaths(filterConfig)
    .applyParams(params)
    .build('http://my-site.herokuapp.com', { limitCountPaths: 5000 })
    .save('./sitemap.xml', '/static/')
);

For some reason I get this error:

module.js:549
    throw err;
    ^

Error: Cannot find module 'components'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/username/Documents/Projects/project/src/router.js:8:1)
    at Module._compile (module.js:652:30)
    at loader (/Users/username/Documents/Projects/project/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/username/Documents/Projects/project/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)

This components folder is related to the components I import in router.js file. I'm pretty sure I'm missing some basic stuff here. I replaced ... from 'components' (set by webpack) to relative path ... from './components with no luck.

Thanks in advance.

glothos commented 5 years ago

I found a solution. If you are using webpack to set an absolute path and you want to use this package, you can make it work by using babel-plugin-module-resolver. Here is how your .babelrc should look like:

{
  "presets": [
    "react",
    [
      "env",
      {
        "modules": "commonjs",
        "targets": {
          "browsers": ["last 2 versions"]
        }
      }
    ]
  ],
  "plugins": [
    "syntax-dynamic-import",
    "transform-decorators-legacy",
    "transform-object-rest-spread",
    "transform-class-properties",
    "react-hot-loader/babel",
    "transform-es2015-block-scoping",
    ["transform-runtime", { "polyfill": false }],
    ["module-resolver", {
      "cwd": "babelrc",
      "root": ["./src"]
    }]
  ],
  "env": {
    "development": {
      "plugins": [
        "react-hot-loader/babel"
      ]
    }
  }
}

Now I got the window issue. Wherever I use window object it says window is not defined. If I find a workaround I will post here.

kuflash commented 5 years ago

@glothos sorry, i not saw your issue. You were able to deal with the problem window object?

glothos commented 5 years ago

Not really, problem still persists. I tried some other approaches like defining window object, I managed to skip that problem but I couldn't make it work with my current structure which I don't think it's related to this package.