search

preactjs / preact-cli

😺 Your next Preact PWA starts in 30 seconds.
MIT License
4.69k stars 375 forks source link

[React to Preact] Issues with some libraries ReactRouter, AntDesign, DomPurify, JSDON, MomentJS #1409

Closed Hideman85 closed 2 years ago

Hideman85 commented 4 years ago

I'm trying to convert an existing react app into preact app and having some issues from libraries:

//  Looks to try to find nodejs deps even if it is in browser/webpack env
Module not found: Error: Can't resolve 'child_process' in './node_modules/jsdom/lib/jsdom/living/xhr'
Module not found: Error: Can't resolve 'fs' in './node_modules/request/lib'
Module not found: Error: Can't resolve 'net' in './node_modules/tunnel-agent'
Module not found: Error: Can't resolve 'tls' in './node_modules/tunnel-agent'

//  Looks to not find existing imports
"export 'duration' (imported as 'moment') was not found in 'moment'
"export 'locale' (imported as 'moment') was not found in 'moment'
"export 'sanitize' was not found in 'dompurify'
"export 'unstable_renderSubtreeIntoContainer' was not found in 'react-dom'

//  Looks to not be able to import assets (probably missing webpack/babel plugin)
Module not found: Error: Can't resolve './Avenir-Medium.woff' in './src/components/Alert/styles'
Module not found: Error: Can't resolve './logol.svg' in './src/components/Layouts'

I bootstrapped a new project for testing purpose from the typescript template and use it as base configuration with the code of the current project.

preact.config.js

import { resolve } from 'path'

export default {
  /**
   * Function that mutates the original webpack config.
   * Supports asynchronous changes when a promise is returned (or it's an async function).
   *
   * @param {object} config - original webpack config.
   * @param {object} env - options passed to the CLI.
   * @param {WebpackConfigHelpers} helpers - object with useful helpers for working with the webpack config.
   * @param {object} options - this is mainly relevant for plugins (will always be empty in the config), default to an empty object
   **/
  webpack (config, env, helpers, options) {
    config.module.rules[4].use.splice(1, 0, {
      loader: '@teamsupercell/typings-for-css-modules-loader',
      options: {
        banner:
          '// This file is automatically generated from your CSS. Any edits will be overwritten.',
        disableLocalsExport: true
      }
    })

    // Use any `index` file, not just index.js
    config.resolve.alias['preact-cli-entrypoint'] = resolve(
      process.cwd(),
      'src',
      'index'
    )

    const babel = helpers.getLoadersByName(config, 'babel-loader')[0].rule.options
    babel.plugins.push(['import', {
      libraryName: 'antd',
      libraryDirectory: 'es',
      style: true
    }])

    const lessloader = helpers
      .getLoadersByName(config, 'proxy-loader')
      .filter((loader) => loader.loader.options.loader === 'less-loader')[0].loader.options

    lessloader.options['lessOptions'] = {
      javascriptEnabled: true,
      modifyVars: {
        '@primary-color': '#FF0000'
      }
    }

    config.resolve = {
      alias: {
        ...((config.resolve || {}).alias || {}),
        'react': 'preact/compat',
        'react-dom/test-utils': 'preact/test-utils',
        'react-dom': 'preact/compat'
      }
    }
  }
}

tsconfig.json

{
    "compilerOptions": {
        "skipLibCheck": true, /* Added this according to the doc to skip check in node_modules */
        /* Basic Options */
        "target": "ES5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
        "module": "ESNext",                       /* Specify module code generation: 'none', commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
        // "lib": [],                             /* Specify library files to be included in the compilation:  */
        "allowJs": true,                          /* Allow javascript files to be compiled. */
        // "checkJs": true,                       /* Report errors in .js files. */
        "jsx": "react",                           /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
        "jsxFactory": "h",                        /* Specify the JSX factory function to use when targeting react JSX emit, e.g. React.createElement or h. */
        // [...]
    }
}

package.json

{
  "private": true,
  "name": "my-project",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "build": "preact build",
    "serve": "sirv build --port 8080 --cors --single",
    "dev": "preact watch",
    "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
    "test": "jest ./tests"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{css,md,scss}": "prettier --write",
    "*.{js,jsx,ts,tsx}": "eslint --fix"
  },
  "eslintIgnore": [
    "build/*"
  ],
  "dependencies": {
    "@ant-design/compatible": "^1.0.5",
    "@ant-design/icons": "^4.2.2",
    "@aws-amplify/analytics": "^3.3.1",
    "@aws-amplify/auth": "^3.4.1",
    "@aws-amplify/core": "^3.5.1",
    "@aws-amplify/datastore": "^2.3.1",
    "@aws-amplify/storage": "^3.3.1",
    "@lingui/macro": "^2.9.1",
    "@lingui/react": "^2.9.1",
    "@react-pdf/renderer": "^1.6.11",
    "@sentry/browser": "^5.22.3",
    "@stripe/react-stripe-js": "^1.1.2",
    "@stripe/stripe-js": "^1.9.0",
    "@types/jest": "^26.0.13",
    "@types/node": "^14.6.4",
    "@types/react": "^16.9.49",
    "@types/react-dom": "^16.9.8",
    "accounting": "^0.4.1",
    "animejs": "^3.2.0",
    "antd": "^4.6.3",
    "antd-img-crop": "^3.10.0",
    "axios": "^0.20.0",
    "babel-plugin-import": "^1.13.0",
    "chart.js": "^2.9.3",
    "connected-react-router": "^6.8.0",
    "dompurify": "^2.0.15",
    "emoji-mart": "^3.0.0",
    "himalaya": "^1.1.0",
    "html-entities": "^1.3.1",
    "less": "^3.12.2",
    "less-loader": "^7.0.1",
    "libphonenumber-js": "^1.7.57",
    "lodash.merge": "^4.6.2",
    "moment": "^2.27.0",
    "numeral": "^2.0.6",
    "preact": "^10.3.1",
    "preact-jsx-chai": "^3.0.0",
    "preact-markup": "^2.0.0",
    "preact-render-to-string": "^5.1.4",
    "preact-router": "^3.2.1",
    "quill": "^1.3.7",
    "react-blocks": "^1.1.4",
    "react-chartjs-2": "^2.10.0",
    "react-highlight-words": "^0.16.0",
    "react-input-mask": "^3.0.0-alpha.2",
    "react-linkedin-oauth2": "^1.0.8",
    "react-pdf": "^5.0.0",
    "react-redux": "^7.2.1",
    "react-render-html": "^0.6.0",
    "react-responsive": "^8.1.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-sortable-hoc": "^1.11.0",
    "react-spring": "9.0.0-rc.2",
    "react-stripe-checkout": "^2.6.3",
    "react-stripe-elements": "^6.1.2",
    "react-trello": "^2.2.8",
    "react-use-gesture": "^7.0.16",
    "recordrtc": "^5.6.1",
    "redux": "^4.0.5",
    "redux-mock-store": "^1.5.4",
    "redux-thunk": "^2.3.0",
    "typescript": "^4.0.2",
    "uniqid": "^5.2.0",
    "video.js": "^7.8.4",
    "videojs-record": "^4.1.0",
    "videojs-wavesurfer": "^3.3.0",
    "wavesurfer.js": "^4.0.1",
    "webrtc-adapter": "^7.7.0"
  },
  "devDependencies": {
    "@lingui/cli": "^2.9.1",
    "@sentry/webpack-plugin": "^1.12.1",
    "@teamsupercell/typings-for-css-modules-loader": "^2.2.0",
    "@types/enzyme": "^3.10.5",
    "@types/jest": "^26.0.8",
    "@types/webpack-env": "^1.15.1",
    "@typescript-eslint/eslint-plugin": "^2.25.0",
    "@typescript-eslint/parser": "^2.25.0",
    "babel-plugin-conditional-compilation": "0.0.1",
    "babel-plugin-macros": "^2.8.0",
    "css-loader": "^3.5.3",
    "enzyme": "^3.11.0",
    "enzyme-adapter-preact-pure": "^2.2.0",
    "eslint": "^6.8.0",
    "eslint-config-airbnb-base": "^14.2.0",
    "eslint-config-prettier": "^6.10.1",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-prettier": "^3.1.2",
    "eslint-plugin-react": "^7.19.0",
    "eslint-plugin-react-hooks": "^3.0.0",
    "husky": "^4.2.1",
    "jest": "^26.2.2",
    "jest-preset-preact": "^4.0.2",
    "lint-staged": "^10.0.7",
    "node-sass": "^4.14.1",
    "preact-cli": "^3.0.0",
    "prettier": "^1.19.1",
    "sass-loader": "^10.0.2",
    "sirv-cli": "^1.0.0-next.3",
    "typescript": "^3.7.5",
    "webpack-bundle-analyzer": "^3.8.0"
  }
}
marvinhagemeister commented 4 years ago

Sorry for moving twice. Accidentally moved it to the wrong repo :see_no_evil:

rschristian commented 4 years ago

You can remove your aliases from your preact.config.js file. The CLI ships with those aliases already.

Any chance you can provide a repo (preferably one a bit more cut down)?