0

I have a question or problem. I'm using React v.16 so when I create a project I did with create-react-app that webpack is already preconfigured. And I want work with ol-cesium, and in npmjs I see that I have to: 

create an alias to the goog directory. With webpack:

resolve: {
  alias: {
     'goog': path_to_goog,
  }
}

If I dont create a webpack file show me this error: 

./node_modules/olcs/AbstractSynchronizer.js
107:22-35 "export 'getUid' (imported as 'olBase') was not found in 'ol/index.js'

How can solve it??? And what is path_to_goog???

EDIT

Thanks to Shishir Anshuman for your help.

Now I add alias on webpack.config.dev.js and webpack.config.prod.js but some me a lot errors.

  resolve: {
    // This allows you to set a fallback for where Webpack should look for modules.
    // We placed these paths second because we want `node_modules` to "win"
    // if there are any conflicts. This matches Node resolution mechanism.
    // https://github.com/facebookincubator/create-react-app/issues/253
    modules: ['node_modules', paths.appNodeModules].concat(
      // It is guaranteed to exist because we tweak it in `env.js`
      process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
    ),
    // These are the reasonable defaults supported by the Node ecosystem.
    // We also include JSX as a common component filename extension to support
    // some tools, although we do not recommend using it, see:
    // https://github.com/facebookincubator/create-react-app/issues/290
    // `web` extension prefixes have been added for better support
    // for React Native Web.
    extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
    alias: {

      // Support React Native Web
      // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
      'react-native': 'react-native-web',
      // Ol-Cesium
      'goog': '../node_modules/olcs/goog',
    },
    plugins: [
      // Prevents users from importing files from outside of src/ (or node_modules/).
      // This often causes confusion because we only process files within src/ with babel.
      // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
      // please link the files into your node_modules/ and let module-resolution kick in.
      // Make sure your source files are compiled, as they will not be processed in any way.
      new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
    ],
  },

In console show me this error: 

 ./node_modules/olcs/AbstractSynchronizer.js
 107:22-35 "export 'getUid' (imported as 'olBase') was not found in 'ol/index.js'

__stack_frame_overlay_proxy_console__   @   index.js:2178
handleErrors    @   webpackHotDevClient.js:178
./node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage  @   webpackHotDevClient.js:211
./node_modules/sockjs-client/lib/event/eventtarget.js.EventTarget.dispatchEvent @   eventtarget.js:51
(anonymous) @   main.js:274
./node_modules/sockjs-client/lib/main.js.SockJS._transportMessage   @   main.js:272
./node_modules/sockjs-client/lib/event/emitter.js.EventEmitter.emit @   emitter.js:50
WebSocketTransport.ws.onmessage
Javier
  • 1,975
  • 3
  • 24
  • 46
  • If you want to do changes in the webpack configurations, you'll have to eject the `create-react-app`'s config. `npm run eject` – Shishir Anshuman Apr 23 '18 at 12:47
  • Thank you so much! I dont know that option. And... path_to_goog??? where is that?? node:modules??? – Javier Apr 24 '18 at 05:51
  • You just need to run the above command from your app root directory. It'll eject the configurations and then you can play around with it. – Shishir Anshuman Apr 24 '18 at 05:53
  • Yes I did it, and I add inside alias object 'goog': '../node_modules/olcs/goog/ as you can see in edit – Javier Apr 24 '18 at 06:13
  • Can you share a github repo or a Codesandbox reproducing this issue? It'll be easier for us to help. – Shishir Anshuman Apr 24 '18 at 06:20
  • https://codesandbox.io/s/8yzq194ny9 as you can see some lines are commented in MapController... if you uncomment that lines crash – Javier Apr 24 '18 at 07:18
  • Try [alias](https://github.com/oklas/react-app-rewire-alias) for rewire to simplify working with `webpack` and `create-react-app` – oklas Mar 13 '20 at 05:46

1 Answers1

1

In the Codesandbox provided by you, I was unable to find the root cause, but I noticed the following:

  • I noticed that you have used the ES6 import statement:import OLCesium from "olcs/OLCesium";. But as per this issue, the module is not yet ported to ES6.

I have never used this library before, So it's hard to figure out what exactly is going on.

Did you try installing https://www.npmjs.com/package/geom ? Since the error says 4.6.4/geom/Point.js is missing.

Shishir Anshuman
  • 1,115
  • 7
  • 23
  • 1
    Thanks!! I was looking for in stack trace and I think is an issue that openlayers 4 doesnt support ol-cesium.. because the error says: Cannot find module "ol/geom/Point.js" and in openlayers node_modules Point.js exists but is lowercase.. ol/geom/point.js – Javier Apr 24 '18 at 08:19