Back

Technologies:

javascriptjavascript
avatar
Tolerim
a month ago

How do I resolve the issue where an imported library functions properly in development but not after building the project?

After converting an existing project from webpack to , I encountered an issue with the https://www.npmjs.com/package/@3e/sqa-common lib. While everything runs seamlessly on the development front, the lib returns an empty object after the build process.

The build process worked well on webpack, and I'm uncertain as to why this occurred. Please let me know if you require further details.

Steps to Reproduce

To replicate, run npm install && npm run dev. The content of the library prints on the page without any issues.

To reproduce the error, run npm run build && npm run preview. The library returns an empty object in this case.

Dependencies

  • node: 16.19.1 - ~/.nvm/versions/node/v16.19.1/bin/node
  • npm: 8.19.3 - ~/.nvm/versions/node/v16.19.1/bin/npm
  • vite: ^4.3.2
  • @3e/sqa-common: ^6.13.0-1hotfix5
Please refer to https://github.com/pedrozok/vite-demo for more information.

Answers(2)
avatar
Vogi
a month ago
Verified Answer
It seems that the issue you are facing is related to the build process. The library returns an empty object after the build process. This issue is not related to the library itself but rather to the build process. One possible reason for this issue is that the library is not being included in the build process. You can try adding the library to the rollup.config.js file as shown below: 
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
    name: 'MyLibrary'
  },
  plugins: [
    resolve(),
    commonjs()
  ],
  external: ['@3e/sqa-common']
};
You can also try adding the following code to your vite.config.js file: 
export default {
  build: {
    rollupOptions: {
      external: ['@3e/sqa-common'],
      output: {
        globals: {
          '@3e/sqa-common': 'sqaCommon'
        }
      }
    }
  }
}
If none of these solutions work, you can try using a different version of the library or contacting the library's support team for further assistance. I hope this helps! Let me know if you have any other questions.

Sources

Why is process.env returning an empty object, while process.env.prop ...webpack react process.env always empty (windows 10)Extend the build process - MSBuild | Microsoft Learn
avatar
Tolerim
a month ago
It seems that the https://www.npmjs.com/package/@3e/sqa-common library is returning an empty object after the build process, even though everything works fine during development. Since it worked fine with webpack before the conversion, it is possible that the issue is related to the Vite build process. Some suggestions to fix this issue are: - Check if the Vite build process is including all the necessary files from the @3e/sqa-common library. This can be done by inspecting the output of the build process. - Make sure that the library is compatible with the version of Vite being used. It is possible that there are incompatibilities between the library and Vite, which are causing the issue. - Try using a different version of the @3e/sqa-common library, or another library that provides similar functionality. This can help to isolate the issue and determine if it is specific to the library or if it is related to the build process itself. Additional information about the error may be necessary to provide more targeted solutions to the problem. The repository provided can be useful for deeper investigations.
;