SolidJS•14mo ago

Bundled package breaks when used in PROD

I am working on a package which provides hooks and components to be used in a Solid app. The package is build with Rollup (config in next comment). It’s well tested and all test are successful. I linked that package in a Solid-Start app to test the behaviour. Everything works fine as long as the app runs in DEV mode and all the hooks and components work as expected, but once I build then app and run it in PROD my package breaks: In some scenarios the hooks return the wrong values and in some cases I get maximum call stack size exceeded error. Which again does not happen in DEV with the same build!? I then digged deeper and added a function from another package mine is based on and compared the behaviour to the original one on the same page: the original works fine, mine is broken. So I guess there something wrong with my rollup config (but again why does it work in dev!?) The original uses pridepack as the bundler.

8 Replies

Madaxen86OP•14mo ago

import commonjs from '@rollup/plugin-commonjs';
import replace from '@rollup/plugin-replace';
import summary from 'rollup-plugin-summary';
import withSolid from 'rollup-preset-solid';
// import babel from '@rollup/plugin-babel';

export default withSolid({
  input: 'src/index.ts',
  targets: ['esm', 'cjs'],
  watch: {},
  printInstructions: true,
  plugins: [
    summary({showGzippedSize: true}),
    replace({
      __DEV__: 'process.env.NODE_ENV !== "production"',
      preventAssignment: true,
    }),
    commonjs(),
    // babel({
    //   extensions: ['.ts', '.tsx'],
    //   babelHelpers: 'bundled',
    //   presets: ['@babel/preset-typescript', 'babel-preset-solid'],
    //   exclude: 'node_modules/**',
    // }),
  ],
  treeshake: true,
});

import commonjs from '@rollup/plugin-commonjs';
import replace from '@rollup/plugin-replace';
import summary from 'rollup-plugin-summary';
import withSolid from 'rollup-preset-solid';
// import babel from '@rollup/plugin-babel';

export default withSolid({
  input: 'src/index.ts',
  targets: ['esm', 'cjs'],
  watch: {},
  printInstructions: true,
  plugins: [
    summary({showGzippedSize: true}),
    replace({
      __DEV__: 'process.env.NODE_ENV !== "production"',
      preventAssignment: true,
    }),
    commonjs(),
    // babel({
    //   extensions: ['.ts', '.tsx'],
    //   babelHelpers: 'bundled',
    //   presets: ['@babel/preset-typescript', 'babel-preset-solid'],
    //   exclude: 'node_modules/**',
    // }),
  ],
  treeshake: true,
});

package.json

Madaxen86OP•14mo ago

message.txt

thetarnav•14mo ago

it would be useful to know how exactly the behavior is different from dev to prod. Either solid runtime is being duplicated due to some module resolution failure, or you are relying on some dev only features that are not present in prod. If you instead of linking the package, import the source directly, does that change anything?

Madaxen86OP•14mo ago

I imported one of the hooks directly and it behaves like the broken ones.

thetarnav•14mo ago

Then building cannot be the problem. can you send the source for the hooks?

Madaxen86OP•14mo ago

And thanks a lot for your help already 🙏

Madaxen86OP•14mo ago

solid-floating-ui.zi...

Madaxen86OP•14mo ago

The package I am working on is in floating-ui/packages/solid In this package i ran pnpm link --global and in the playground app pnpm link @floating-ui/solid --global In the playground app the route http://localhost:3000/tests/loop is a page where after clicking any button the corresponding element should be positioned at the bottom of each button @thetarnav : solved it. You probably meant this by "import the source directly". Typical layer 8 mistake 😅 Using pnpm link does not resolve peer dependencies as stated in the docs:

INFO When dealing with peer dependencies it is recommended to use the file: protocol. It better resolves the peer dependencies from the project dependencies, ensuring that the linked dependency correctly uses the versions of the dependencies specified in your main project, leading to more consistent and expected behaviors.

So after i hardlinked the package like "dependencies": { ... "my-local-package": "file:./path/to/my-local-package" } Then run pnpm i to install it. After that everything worked in the production build. Thanks again.

Gaming

Programming

Bundled package breaks when used in PROD