Can we have Lock 10 built for WebPack?

Help
,
1

I’m attempting to the the auth-lock node module working as per instructions, but while using npm run build works for the webpack example I have not been able to build it for our much more complicated project.

Usually node modules come ready built, so the problem would be avoided if there was a built module (we can’t use the CDN).

Trying to do:

import Auth0Lock from '../../../grunt/v2/node_modules/auth0-lock/lib/index.js';

Brings up errors about missing modules, so we had to manually install:

npm i --save-dev babel-plugin-transform-css-import-to-string
npm i --save-dev babel-plugin-stylus-compiler
npm i --save-dev babel-preset-es2015
npm i --save-dev babel-preset-stage-0

This finally results in error:

ERROR in ./node_modules/auth0-lock/lib/index.js
Module build failed: ReferenceError: [BABEL] C:\dev\workspace\project\grunt\v2\node_modules\auth0-lock\lib\index.js: Unknown option: C:\dev\workspace\project\grunt\v2\node_modules\react\index.js.Children. Check out http://babeljs.io/docs/usage/options/ for more information about options.

A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:

Invalid:
  `{ presets: {option: value}] }`
Valid:
  `{ presets: 'presetName', {option: value}]] }`

For more detailed information on preset configuration, please see http://babeljs.io/docs/plugins/#pluginpresets-options. (While processing preset: "C:\\Utvikling\\ECE5.6\\workspace\\project\\grunt\\v2\\node_modules\\react\\index.js")
  at Logger.error (C:\dev\workspace\project\grunt\v2\node_modules\babel-core\lib\transformation\file\logger.js:41:11)
  at OptionManager.mergeOptions (C:\dev\workspace\project\grunt\v2\node_modules\babel-core\lib\transformation\file\options\option-manager.js:226:20)
  at C:\dev\workspace\project\grunt\v2\node_modules\babel-core\lib\transformation\file\options\option-manager.js:265:14
  at C:\dev\workspace\project\grunt\v2\node_modules\babel-core\lib\transformation\file\options\option-manager.js:323:22
  at Array.map (native)
  at OptionManager.resolvePresets (C:\dev\workspace\project\grunt\v2\node_modules\babel-core\lib\transformation\file\options\option-manager.js:275:20)
  at OptionManager.mergePresets (C:\dev\workspace\project\grunt\v2\node_modules\babel-core\lib\transformation\file\options\option-manager.js:264:10)
  at OptionManager.mergeOptions (C:\dev\workspace\project\grunt\v2\node_modules\babel-core\lib\transformation\file\options\option-manager.js:249:14)
  at OptionManager.init (C:\dev\workspace\project\grunt\v2\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
  at File.initOptions (C:\dev\workspace\project\grunt\v2\node_modules\babel-core\lib\transformation\file\index.js:212:65)
  at new File (C:\dev\workspace\project\grunt\v2\node_modules\babel-core\lib\transformation\file\index.js:135:24)
  at Pipeline.transform (C:\dev\workspace\project\grunt\v2\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
  at transpile (C:\dev\workspace\project\grunt\v2\node_modules\babel-loader\lib\index.js:49:20)
  at Object.module.exports (C:\dev\workspace\project\grunt\v2\node_modules\babel-loader\lib\index.js:171:20)
 @ C:/Utvikling/ECE5.6/workspace/project/src/js/modules/login.js 3:13-78
 @ C:/Utvikling/ECE5.6/workspace/project/src/js/all.js
 @ C:/Utvikling/ECE5.6/workspace/project/src/js/program.js

Already spent a day trying to just get Lock working, so hope that it might be possible to get a lock node-module that is ready for use with webpack.

2

Solved! I had to install babel-preset-react and the above error disappeared.

I do get this warning, so I’m not 100% happy, but now it works:

[BABEL] Note: The code generator has
deoptimised the styling of
“C:/dev/workspace/project/grunt/v2/node_modules/react-dom/cjs/react-dom.development.js”
as it exceeds the max of “500KB”.

Also, I see that the webpack example project was updated not long after I posted this which is nice, but I’m not sure what the plugin is supposed to do?

3

To avoid Babel trying to optimise the node modules add this to the rules:
exclude: /node_modules/,