0

The polymer app is using redux to store app's state. The idea is to store all of the routing in state too (see the image below). I want to use redux-router for this, but I started to face problems already at the start when I try to import the library to my app.

enter image description here

The code of my import looks like this: 

import { createStore, compose as origCompose, applyMiddleware, combineReducers } from 'redux';
import thunk from 'redux-thunk';
import { lazyReducerEnhancer } from 'pwa-helpers/lazy-reducer-enhancer';
import {ReduxRouter} from '../node_modules/redux-router/src/ReduxRouter.js'



import app from './reducers/app.js';
import route from './reducers/route.js';
import user from './reducers/user.js';
import events from './reducers/events.js';

The error I get with this import is:

Unexpected token =

If I try to import like this:

import {ReduxRouter} from 'redux-router';

I get:

Uncaught SyntaxError: The requested module '../../node_modules/redux-router/lib/index.js' does not provide an export named 'ReduxRouter'

And if: 

import {ReduxRouter} from '../node_modules/redux-router/src'

Then:

Uncaught SyntaxError: Unexpected token export

The problem can be reproduced in starter polymer 3 app. Or, I think, in any polymer app.

So:

  1. What is the right way to import?
  2. Can I possibly use redux-router in a polymer app (without react) if I only need to store all the routes and history in state?
  3. What other options do I have. Do you know any good libraries for that?
Artur Takoev
  • 127
  • 2
  • 11

1 Answers1

0

1.) Try:

    import 'redux-router';

If the npm package has a default export, this should allow you to reference it in the component. If not, try importing this on the end of index.html somewhere before like:

    <script src="node_modules/redux-router/dist/ReduxRouter.js"></script>
    ...
    </body>

Note: /dist/ not /src/

FYI, make sure you end your import statement with a semi-colon. You wrote:

    import { lazyReducerEnhancer } from 'pwa-helpers/lazy-reducer-enhancer';
    import {ReduxRouter} from '../node_modules/redux-router/src/ReduxRouter.js'

Your last line needs semi-colon (maybe a typo).

2.) Yes, it is possible.

3.) Check out the pwa-starter-kit -- specifically look at how the Polymer group has included Redux and pwa-helpers/router.js for routing...