0

I have a preact app which is using rollup + buble. I need to use another component text-mask which uses React. I am trying to create alias within my rollup build file. For the client side, it works flawlessly however when building on the server side, it fails. My plugin section within my rollup build config is as below :-

plugins: [
    alias({
      'react': path.resolve('./node_modules/preact-compat/dist/preact-compat.es.js'),
      'react-dom': path.resolve('./node_modules/preact-compat/dist/preact-compat.es.js')
    }),
    nodeResolve({ jsnext: true, browser: true }),
    commonjs({ include: ['node_modules/**'], namedExports: { 'preact-redux': ['connect', 'Provider'] } }),
    replace({ '__CLIENT__': true, 'process.env.NODE_ENV': JSON.stringify('production') }),
    images,
    buble({ jsx: 'h', objectAssign: 'Object.assign' }),
    !isDev && uglify(uglifyConfig) // uglify slows builds
  ]

I came across an issue where it says there are issues while using preact-compat on a server side app and it was suggesting to use module-alias as an alternative. So i tried giving the below module-alias in my node server file :-

require('module-alias').addAliases({
  'react': 'preact-compat',
  'react-dom': 'preact-compat'
})

Even after doing that, i still get the below error :-

Error: Cannot find module 'react'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.Module._load (module.js:418:25)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at r (/my-app/node_modules/react-text-mask/dist/reactTextMask.js:1:145)
    at Object.<anonymous> (/my-app/node_modules/react-text-mask/dist/reactTextMask.js: 1:315)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
Ranjith Nair
  • 475
  • 1
  • 6
  • 17
  • The alias part with module-alias should be at the very beginning of your server code. – thangngoc89 Jul 09 '17 at 14:43
  • @thangngoc89 Its at the beginning of my node server file. – Ranjith Nair Jul 11 '17 at 21:03
  • Without further detailsof your code, I can't know how to fix this. Does it work without react-text-mask? – thangngoc89 Jul 11 '17 at 22:46
  • I made it work by register the alias on `package.json`, no luck using `.addAliases({...})` idk why – Alfred Crosby Jul 13 '17 at 14:46
  • @AlfredCrosby Still not able to get it working. Can you share how you have the aliases in your package.json file. Does the path structure matter in that?And where have you hooked up the below registering? `require('module-alias/register');` – Ranjith Nair Jul 14 '17 at 15:53
  • ` "_moduleAliases": { "react": "node_modules/preact-compat", "react-dom": "node_modules/preact-compat" },` that's my alias on `package.json`. But I have an issue, it's only working on dev mode. When I try build my server code using webpack, it won't work. – Alfred Crosby Jul 19 '17 at 08:37

0 Answers0