Giter VIP home page Giter VIP logo

work-manage's Introduction

안녕하세요!

소프트웨어 개발자 장의영 입니다.

세상을 편하게 만드는 코드를 작성하고 있습니다.

work-manage's People

Contributors

dependabot[bot] avatar yeongi avatar

Watchers

 avatar

work-manage's Issues

issue : 라이브러리 버전업 이슈

image

[0]
[0] ERROR in ./node_modules/conf/dist/source/index.js 20:11-24
[0] Module not found: Error: Can't resolve 'fs' in 'C:\Users\juy\Desktop\develop\work-manage\node_modules\conf\dist\source'
[0]
[0] ERROR in ./node_modules/conf/dist/source/index.js 22:15-32
[0] Module not found: Error: Can't resolve 'crypto' in 'C:\Users\juy\Desktop\develop\work-manage\node_modules\conf\dist\source'
[0]
[0] BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
[0] This is no longer the case. Verify if you need this module and configure a polyfill for it.
[0]
[0] If you want to include a polyfill, you need to:
[0]     - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
[0]     - install 'crypto-browserify'
[0] If you don't want to include a polyfill, you can use an empty module like this:    
[0]     resolve.fallback: { "crypto": false }
[0]
[0] ERROR in ./node_modules/electron/index.js 1:11-24
[0] Module not found: Error: Can't resolve 'fs' in 'C:\Users\juy\Desktop\develop\work-manage\node_modules\electron'
[0]
[0] ERROR in ./node_modules/env-paths/index.js 4:11-24
[0] Module not found: Error: Can't resolve 'os' in 'C:\Users\juy\Desktop\develop\work-manage\node_modules\env-paths'
[0]
[0] BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
[0] This is no longer the case. Verify if you need this module and configure a polyfill for it.
[0]
[0] If you want to include a polyfill, you need to:
[0]     - add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
[0]     - install 'os-browserify'
[0] If you don't want to include a polyfill, you can use an empty module like this:    
[0]     resolve.fallback: { "os": false }
[0]
[0] ERROR in ./node_modules/pkg-up/node_modules/path-exists/index.js 3:11-24
[0] Module not found: Error: Can't resolve 'fs' in 'C:\Users\juy\Desktop\develop\work-manage\node_modules\pkg-up\node_modules\path-exists'
[0]
[0] webpack compiled with 6 errors

Webpack v5 polyfill 해결 (react-scripts 5버전 이상 시 webpack polyfill 지원 안됨)

0] ERROR in ./node_modules/conf/dist/source/index.js 22:15-32
[0] Module not found: Error: Can't resolve 'crypto' in 'C:\Users\juy\Desktop\develop\work-manage\node_modules\conf\dist\source'
[0]
[0] BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
[0] This is no longer the case. Verify if you need this module and configure a polyfill for it.
[0]
[0] If you want to include a polyfill, you need to:
[0]     - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
[0]     - install 'crypto-browserify'
[0] If you don't want to include a polyfill, you can use an empty module like this:    
[0]     resolve.fallback: { "crypto": false }
[0]
[0] ERROR in ./node_modules/env-paths/index.js 4:11-24
[0] Module not found: Error: Can't resolve 'os' in 'C:\Users\juy\Desktop\develop\work-manage\node_modules\env-paths'
[0]
[0] BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
[0] This is no longer the case. Verify if you need this module and configure a polyfill for it.
[0]
[0] If you want to include a polyfill, you need to:
[0]     - add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
[0]     - install 'os-browserify
[0] If you don't want to include a polyfill, you can use an empty module like this:    
[0]     resolve.fallback: { "os": false }
[0]     - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
[0]     - install 'crypto-browserify'
[0]     - add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
[0]     - install 'os-browserify'

'crypto-browserify', 'os-browserify' 를 설치하고, webpack.configfallback 설정으로 삽입하면 되는데

  1. eject해서 webpack.config를 분리
  2. react-app-wired를 사용하기

두가지 방법이 있었다. 본인은 2번을 선택해서 해결했다.

react-app-wired 설치하기

yarn add react-app-wired

config-overrides.js

const webpack = require("webpack");

module.exports = {
  webpack: function (config, env) {
    config.resolve.fallback = {
      crypto: require.resolve("crypto-browserify"),
      os: require.resolve("os-browserify/browser"),
    };

    config.plugins.push(
      new webpack.ProvidePlugin({
        process: "process/browser",
        Buffer: ["buffer", "Buffer"],
      })
    );

    return config;
  },
};

이제 6가지 오류에서 4가지 오류로 줄었다..

Module not found: Error: Can't resolve 'fs'

[0]
[0] ERROR in ./node_modules/conf/dist/source/index.js 20:11-24
[0] Module not found: Error: Can't resolve 'fs' in 'C:\Users\juy\Desktop\develop\work-manage\node_modules\conf\dist\source'
[0]
[0] ERROR in ./node_modules/electron/index.js 1:11-24
[0] Module not found: Error: Can't resolve 'fs' in 'C:\Users\juy\Desktop\develop\work-manage\node_modules\electron'
[0]
[0] ERROR in ./node_modules/pkg-up/node_modules/path-exists/index.js 3:11-24
[0] Module not found: Error: Can't resolve 'fs' in 'C:\Users\juy\Desktop\develop\work-manage\node_modules\pkg-up\node_modules\path-exists'
[0]
[0] webpack compiled with 4 errors

fs 관련 모듈 사용시에 발생한 오류

클라이언트 측에서 nodejs 라이브러리를 사용하려고 할 때 발생하는 오류입니다. 즉, fs모듈은 컴퓨터의 파일 시스템에 접근하여 읽고 쓰기 위한 것인데 클라이언트(브라우저)에서는 사용이 불가능한 패키지

브라우저 api를 쓰지 않고 FS 모듈을 사용하는 electron-store 덕분에 생긴 문제, 일단은 electron-store를 제거 했다.

//자동로그인 CRUD
const LOGINKEY = "myidpw";
const SPLIT_CHAR = "#";

class LoginSaveClient {
  constructor() {
    this.isSaved = localStorage.getItem(LOGINKEY) ? true : false;
  }

  createInfo = (ID, PW) => {
    localStorage.setItem(LOGINKEY, [ID, PW].join(SPLIT_CHAR));
  };

  getId = () => {
    if (this.isSaved) {
      return localStorage.getItem(LOGINKEY).split(SPLIT_CHAR);
    }
    return null;
  };

  updateInfo = (ID, PW) => {
    localStorage.setItem(LOGINKEY, [ID, PW].join(SPLIT_CHAR));
  };
}

export default LoginSaveClient;
  • 버전업 하고 빌드를 하니까 localstorage로 저장이 잘되더라 카더라..

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.