Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Commonjs import differs between dev & prod #4209

Closed
6 tasks done
unlocomqx opened this issue Jul 11, 2021 · 4 comments
Closed
6 tasks done

Commonjs import differs between dev & prod #4209

unlocomqx opened this issue Jul 11, 2021 · 4 comments
Labels
bug: upstream Bug in a dependency of Vite inconsistency Inconsistency between dev & build

Comments

@unlocomqx
Copy link

unlocomqx commented Jul 11, 2021 •
edited
Loading

Describe the bug

Bug

A commonjs module default import will give a function in dev and an object in prod, resulting in an error on prod

X is not a function

Repro

npm run dev

Then check the console, you will see a function

npm run build && npm run serve

In the console, you will see an object with props default and createApp etc...

Reproduction

https://github.com/unlocomqx/vitejs-commonjs

npm run dev

Then check the console, you will see a function

npm run build && npm run serve

In the console, you will see an object with props default and createApp etc...

System Info

System:
    OS: macOS 11.4
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 299.27 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.16.1 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.18.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 91.0.4472.114
    Firefox: 89.0.2
    Safari: 14.1.1
  npmPackages:
    vite: ^2.4.0 => 2.4.1

Used Package Manager

yarn

Logs

Logs vite:config bundled config file loaded in 92ms +0ms vite:config using resolved config: { vite:config build: { vite:config target: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ], vite:config outDir: 'dist', vite:config assetsDir: 'assets', vite:config assetsInlineLimit: 4096, vite:config cssCodeSplit: true, vite:config sourcemap: false, vite:config rollupOptions: {}, vite:config commonjsOptions: { include: [Array], extensions: [Array] }, vite:config minify: 'terser', vite:config terserOptions: {}, vite:config cleanCssOptions: {}, vite:config write: true, vite:config emptyOutDir: null, vite:config manifest: false, vite:config lib: false, vite:config ssr: false, vite:config ssrManifest: false, vite:config brotliSize: true, vite:config chunkSizeWarningLimit: 500, vite:config watch: null vite:config }, vite:config configFile: '/Users/unloco/code/test/vite/import-test/vite.config.js', vite:config configFileDependencies: [ 'vite.config.js' ], vite:config inlineConfig: { vite:config root: undefined, vite:config base: undefined, vite:config mode: undefined, vite:config configFile: undefined, vite:config logLevel: undefined, vite:config clearScreen: undefined, vite:config build: {} vite:config }, vite:config root: '/Users/unloco/code/test/vite/import-test', vite:config base: '/', vite:config resolve: { dedupe: undefined, alias: [ [Object] ] }, vite:config publicDir: '/Users/unloco/code/test/vite/import-test/public', vite:config cacheDir: '/Users/unloco/code/test/vite/import-test/node_modules/.vite', vite:config command: 'build', vite:config mode: 'production', vite:config isProduction: true, vite:config plugins: [ vite:config 'alias', vite:config 'vite:dynamic-import-polyfill', vite:config 'vite:resolve', vite:config 'vite:html', vite:config 'vite:css', vite:config 'vite:esbuild', vite:config 'vite:json', vite:config 'vite:wasm', vite:config 'vite:worker', vite:config 'vite:asset', vite:config 'vite:define', vite:config 'vite:css-post', vite:config 'vite:build-html', vite:config 'commonjs', vite:config 'vite:data-uri', vite:config 'rollup-plugin-dynamic-import-variables', vite:config 'vite:import-analysis', vite:config 'vite:esbuild-transpile', vite:config 'vite:terser', vite:config 'vite:reporter' vite:config ], vite:config server: { vite:config fsServe: { root: '/Users/unloco/code/test/vite/import-test', strict: false } vite:config }, vite:config env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true }, vite:config assetsInclude: [Function: assetsInclude], vite:config logger: { vite:config hasWarned: false, vite:config info: [Function: info], vite:config warn: [Function: warn], vite:config warnOnce: [Function: warnOnce], vite:config error: [Function: error], vite:config clearScreen: [Function: clearScreen] vite:config }, vite:config createResolver: [Function: createResolver], vite:config optimizeDeps: { esbuildOptions: { keepNames: undefined } } vite:config } +4ms vite v2.3.2 building for production... ✓ 68 modules transformed. { exports: [ 'c' ], facadeModuleId: null, isDynamicEntry: false, isEntry: false, isImplicitEntry: false, modules: [Object: null prototype] { '\x00commonjsHelpers.js': { originalLength: 1299, removedExports: [Array], renderedExports: [Array], renderedLength: 192 }, '\x00/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/index.js?commonjs-module': { originalLength: 61, removedExports: [], renderedExports: [Array], renderedLength: 30 }, '\x00/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/production.js?commonjs-exports': { originalLength: 53, removedExports: [], renderedExports: [Array], renderedLength: 20 }, '\x00/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/client/index.js?commonjs-exports': { originalLength: 45, removedExports: [], renderedExports: [Array], renderedLength: 16 }, '\x00/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/client/Client.js?commonjs-exports': { originalLength: 45, removedExports: [], renderedExports: [Array], renderedLength: 18 }, '\x00/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/actions/helper.js?commonjs-exports': { originalLength: 45, removedExports: [], renderedExports: [Array], renderedLength: 16 }, '\x00/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/client/types.js?commonjs-exports': { originalLength: 43, removedExports: [], renderedExports: [Array], renderedLength: 17 }, '/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/client/types.js': { originalLength: 1656, removedExports: [Array], renderedExports: [Array], renderedLength: 978 }, '\x00/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/client/types.js?commonjs-proxy': { originalLength: 135, removedExports: [], renderedExports: [], renderedLength: 0 }, '\x00/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/util/collection.js?commonjs-exports': { originalLength: 53, removedExports: [], renderedExports: [Array], renderedLength: 20 }, '/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/util/collection.js': { originalLength: 1137, removedExports: [Array], renderedExports: [Array], renderedLength: 1137 }, '\x00/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/util/collection.js?commonjs-proxy': { originalLength: 138, removedExports: [], renderedExports: [], renderedLength: 0 }, '\x00/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/actions/Error/index.js?commonjs-exports': { originalLength: 45, removedExports: [], renderedExports: [Array], renderedLength: 16 }, '\x00/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/actions/helper.js?commonjs-proxy': { originalLength: 137, removedExports: [], renderedExports: [], renderedLength: 0 }, '\x00/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/actions/types.js?commonjs-exports': { originalLength: 43, removedExports: [], renderedExports: [Array], renderedLength: 17 }, '/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/actions/types.js': { originalLength: 1478, removedExports: [Array], renderedExports: [Array], renderedLength: 1378 }, '\x00/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/actions/types.js?commonjs-proxy': { originalLength: 136, removedExports: [], renderedExports: [], renderedLength: 0 }, '/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/actions/Error/index.js': { originalLength: 6674, removedExports: [Array], renderedExports: [Array], renderedLength: 6567 }, '\x00/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/actions/Error/index.js?commonjs-proxy': { originalLength: 142, removedExports: [], renderedExports: [], renderedLength: 0 }, '\x00/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/actions/constants.js?commonjs-exports': { originalLength: 51, removedExports: [], renderedExports: [Array], renderedLength: 19 }, '/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/actions/constants.js': { originalLength: 172, removedExports: [Array], renderedExports: [Array], renderedLength: 167 }, '\x00/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/actions/constants.js?commonjs-proxy': { originalLength: 140, removedExports: [], renderedExports: [], renderedLength: 0 }, '\x00/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/actions/merge.js?commonjs-exports': { originalLength: 43, removedExports: [], renderedExports: [Array], renderedLength: 15 }, '/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/actions/merge.js': { originalLength: 1548, removedExports: [Array], renderedExports: [Array], renderedLength: 1529 }, '\x00/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/actions/merge.js?commonjs-proxy': { originalLength: 136, removedExports: [], renderedExports: [], renderedLength: 0 }, '\x00/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/actions/uuid.js?commonjs-exports': { originalLength: 41, removedExports: [], renderedExports: [Array], renderedLength: 14 }, '/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/actions/uuid.js': { originalLength: 1588, removedExports: [Array], renderedExports: [Array], renderedLength: 1561 }, '\x00/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/actions/uuid.js?commonjs-proxy': { originalLength: 135, removedExports: [], renderedExports: [], renderedLength: 0 }, '/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/package.json': { originalLength: 1496, removedExports: [], renderedExports: [Array], renderedLength: 1791 }, '\x00/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/package.json?commonjs-proxy': { originalLength: 111, removedExports: [], renderedExports: [], renderedLength: 0 }, '/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/actions/helper.js': { originalLength: 17251, removedExports: [Array], renderedExports: [Array], renderedLength: 17234 }, '\x00/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/actions/Print/index.js?commonjs-exports': { originalLength: 43, removedExports: [], renderedExports: [Array], renderedLength: 15 }, '/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/actions/Print/index.js': { originalLength: 458, removedExports: [Array], renderedExports: [Array], renderedLength: 450 }, '\x00/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/actions/Print/index.js?commonjs-proxy': { originalLength: 142, removedExports: [], renderedExports: [], renderedLength: 0 }, '\x00/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/MessageTransport.js?commonjs-exports': { originalLength: 65, removedExports: [], renderedExports: [Array], renderedLength: 26 }, '\x00/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/actions/validator.js?commonjs-exports': { originalLength: 51, removedExports: [], renderedExports: [Array], renderedLength: 19 }, '/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/actions/validator.js': { originalLength: 2148, removedExports: [Array], renderedExports: [Array], renderedLength: 2110 }, '\x00/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/actions/validator.js?commonjs-proxy': { originalLength: 140, removedExports: [], renderedExports: [], renderedLength: 0 }, '\x00/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/util/env.js?commonjs-exports': { originalLength: 39, removedExports: [], renderedExports: [Array], renderedLength: 13 }, '/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/util/env.js': { originalLength: 748, removedExports: [Array], renderedExports: [Array], renderedLength: 756 }, '\x00/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/util/env.js?commonjs-proxy': { originalLength: 131, removedExports: [], renderedExports: [], renderedLength: 0 }, '/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/MessageTransport.js': { originalLength: 6315, removedExports: [Array], renderedExports: [Array], renderedLength: 6226 }, '\x00/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/MessageTransport.js?commonjs-proxy': { originalLength: 139, removedExports: [], renderedExports: [], renderedLength: 0 }, '\x00/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/util/shared.js?commonjs-exports': { originalLength: 45, removedExports: [], renderedExports: [Array], renderedLength: 16 }, '/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/util/shared.js': { originalLength: 786, removedExports: [Array], renderedExports: [Array], renderedLength: 747 }, '\x00/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/util/shared.js?commonjs-proxy': { originalLength: 134, removedExports: [], renderedExports: [], renderedLength: 0 }, '\x00/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/actions/Client/index.js?commonjs-exports': { originalLength: 45, removedExports: [], renderedExports: [Array], renderedLength: 16 }, '/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/actions/Client/index.js': { originalLength: 509, removedExports: [Array], renderedExports: [Array], renderedLength: 502 }, '\x00/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/actions/Client/index.js?commonjs-proxy': { originalLength: 143, removedExports: [], renderedExports: [], renderedLength: 0 }, '\x00/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/client/print.js?commonjs-exports': { originalLength: 43, removedExports: [], renderedExports: [Array], renderedLength: 15 }, '\x00/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/client/redirect.js?commonjs-exports': { originalLength: 49, removedExports: [], renderedExports: [Array], renderedLength: 20 }, '/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/client/redirect.js': { originalLength: 719, removedExports: [Array], renderedExports: [Array], renderedLength: 731 }, '\x00/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/client/redirect.js?commonjs-proxy': { originalLength: 138, removedExports: [], renderedExports: [], renderedLength: 0 }, '/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/client/print.js': { originalLength: 1099, removedExports: [Array], renderedExports: [Array], renderedLength: 1067 }, '\x00/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/client/print.js?commonjs-proxy': { originalLength: 135, removedExports: [], renderedExports: [], renderedLength: 0 }, '\x00/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/client/Hooks.js?commonjs-exports': { originalLength: 43, removedExports: [], renderedExports: [Array], renderedLength: 17 }, '/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/client/Hooks.js': { originalLength: 3065, removedExports: [Array], renderedExports: [Array], renderedLength: 3031 }, '\x00/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/client/Hooks.js?commonjs-proxy': { originalLength: 135, removedExports: [], renderedExports: [], renderedLength: 0 }, '/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/client/Client.js': { originalLength: 8635, removedExports: [Array], renderedExports: [Array], renderedLength: 8490 }, '\x00/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/client/Client.js?commonjs-proxy': { originalLength: 136, removedExports: [], renderedExports: [], renderedLength: 0 }, '/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/client/index.js': { originalLength: 733, removedExports: [Array], renderedExports: [Array], renderedLength: 759 }, '\x00/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/client/index.js?commonjs-proxy': { originalLength: 135, removedExports: [], renderedExports: [], renderedLength: 0 }, '/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/production.js': { originalLength: 814, removedExports: [Array], renderedExports: [Array], renderedLength: 838 }, '\x00/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/production.js?commonjs-proxy': { originalLength: 133, removedExports: [], renderedExports: [], renderedLength: 0 }, '/Users/unloco/code/test/vite/import-test/node_modules/@shopify/app-bridge/index.js': { originalLength: 145, removedExports: [], renderedExports: [Array], renderedLength: 73 } }, name: [Getter], type: 'chunk', code: undefined, dynamicImports: [], fileName: 'assets/vendor.93eab662.js', implicitlyLoadedBefore: [], importedBindings: {}, imports: [], map: undefined, referencedFiles: [] } { exports: [], facadeModuleId: '/Users/unloco/code/test/vite/import-test/index.html', isDynamicEntry: false, isEntry: true, isImplicitEntry: false, modules: [Object: null prototype] { '/Users/unloco/code/test/vite/import-test/style.css': { originalLength: 199, removedExports: [], renderedExports: [Array], renderedLength: 222 }, '/Users/unloco/code/test/vite/import-test/main.js': { originalLength: 247, removedExports: [], renderedExports: [], renderedLength: 180 }, '/Users/unloco/code/test/vite/import-test/index.html': { originalLength: 353, removedExports: [], renderedExports: [], renderedLength: 0 } }, name: [Getter], type: 'chunk', code: undefined, dynamicImports: [], fileName: 'assets/index.f91fac32.js', implicitlyLoadedBefore: [], importedBindings: { 'assets/vendor.93eab662.js': [ 'c' ] }, imports: [ 'assets/vendor.93eab662.js' ], map: undefined, referencedFiles: [] } dist/assets/favicon.17e50649.svg 1.49kb dist/index.html 0.51kb dist/assets/index.ccce2ca3.css 0.16kb / brotli: 0.10kb dist/assets/index.f91fac32.js 0.21kb / brotli: 0.13kb dist/assets/vendor.93eab662.js 24.54kb / brotli: 6.90kb

Validations
@unlocomqx unlocomqx changed the title commonjs import differs between dev & prod Commonjs import differs between dev & prod Jul 11, 2021
@unlocomqx
Copy link
Author

I'm using this workaround for now

import * as AppBridgePkg from "@shopify/app-bridge";

console.log(AppBridgePkg.createApp);

@haoqunjiang haoqunjiang added the inconsistency Inconsistency between dev & build label Jul 13, 2021
@haoqunjiang
Copy link
Member

See also: rollup/plugins#872

@haoqunjiang haoqunjiang added bug: upstream Bug in a dependency of Vite and removed pending triage labels Jul 13, 2021
@kurkle kurkle mentioned this issue Jul 14, 2021
Closed
@vladkens
Copy link

vladkens commented Sep 15, 2021 •
edited
Loading

Any updates on this issue? I also fight with that problem and write simple plugin for rollup. But not sure that this plugin is not break something else.

import reactRefresh from "@vitejs/plugin-react-refresh";
import { defineConfig } from "vite";

function cjsDetectionPlugin() {
  return {
    name: "cjs-detection",
    transform(code, id) {
      code = code.replace(
        "export default lib;",
        "export default lib && Object.prototype.hasOwnProperty.call(lib, 'default') ? lib['default'] : lib;"
      );
      return code;
    }
  };
}

export default defineConfig({
  plugins: [reactRefresh()],
  build: {
    rollupOptions: {
      plugins: [cjsDetectionPlugin()]
    }
  }
});

Connected issues:
#4123
rollup/plugins#948

@vladkens vladkens mentioned this issue Sep 16, 2021
Closed
@bluwy
Copy link
Member

bluwy commented Sep 16, 2021

@vladkens if that workaround works, then I'd say you can go with it. But maybe the better path forward is to have the library in question to export ESM as well. At the meantime, this happens because we use esbuild in dev (via prebundling) and rollup in prod, and they both handle CJS differently. This may be unified and fixed in the long term if we go the path of #4921.

@blechatellier blechatellier mentioned this issue Oct 1, 2021
Closed
@github-actions github-actions bot locked and limited conversation to collaborators Jan 24, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
bug: upstream Bug in a dependency of Vite inconsistency Inconsistency between dev & build
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@unlocomqx @vladkens @haoqunjiang @bluwy